Skip to content

Commit d113145

Browse files
cpreciosocprecioso
authored
Merge pull request #3815 from wasp-lang/release
Merge `release` into `main`
2 parents 49371dd + 835875d commit d113145

File tree

3 files changed

+253
-0
lines changed

3 files changed

+253
-0
lines changed

‎web/docs/guides/libraries/_category_.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
label: "Libraries"
2+
collapsible: true
3+
collapsed: false

‎web/docs/guides/libraries/radix-themes.md‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
---
2+
comments: true
3+
last_checked_with_versions:
4+
Wasp: "0.21"
5+
"Radix Themes": 3
6+
---
7+
8+
# Radix Themes
9+
10+
This guide shows you how to integrate the [Radix Themes](https://www.radix-ui.com/themes) component library into your Wasp application.
11+
12+
## Setting up Radix Themes
13+
14+
### 1. Install Radix Themes
15+
16+
Install the Radix Themes package:
17+
18+
```bash
19+
npm install @radix-ui/themes
20+
```
21+
22+
### 2. Create a Root Component if it doesn't exist
23+
24+
Due to how Radix works, we'll need to have a single component that wraps all the pages in our app. In Wasp, this is done through the `rootComponent` configuration:
25+
26+
```wasp title="main.wasp"
27+
app MyApp {
28+
wasp: {
29+
version: "^0.21.0"
30+
},
31+
title: "My App",
32+
client: {
33+
// highlight-next-line
34+
rootComponent: import { Layout } from "@src/Layout",
35+
}
36+
}
37+
```
38+
39+
If you already have a root component in your Wasp app, open that file and skip to the next step. If you don't have one, create a new file with an empty component that will serve as the root:
40+
41+
```tsx auto-js title="src/Layout.tsx"
42+
import type { ReactNode } from "react";
43+
44+
export function Layout({ children }: { children?: ReactNode }) {
45+
return children;
46+
}
47+
```
48+
49+
### 3. Add Radix Themes to your root component
50+
51+
In your root component, we'll wrap the `children` with Radix Theme's `Theme` component, and import their CSS stylesheet:
52+
53+
```tsx auto-js title="src/Layout.tsx"
54+
import type { ReactNode } from "react";
55+
// highlight-next-line
56+
import "@radix-ui/themes/styles.css";
57+
// highlight-next-line
58+
import { Theme } from "@radix-ui/themes";
59+
60+
export function Layout({ children }: { children?: ReactNode }) {
61+
// highlight-next-line
62+
return <Theme>{children}</Theme>;
63+
}
64+
```
65+
66+
67+
### 4. Use Radix Themes components
68+
69+
Now you can use Radix Themes components anywhere in your application:
70+
71+
```tsx auto-js title="src/MainPage.tsx"
72+
import { Flex, Text, Button } from "@radix-ui/themes";
73+
74+
export const MainPage = () => {
75+
return (
76+
<Flex direction="column" gap="2">
77+
<Text>Hello from Radix Themes :)</Text>
78+
<Button>Let's go</Button>
79+
</Flex>
80+
);
81+
};
82+
```
83+
84+
That's it!
85+
86+
## Customizing the theme
87+
88+
You can customize the theme by passing props to the `Theme` component:
89+
90+
```tsx auto-js title="src/Layout.tsx"
91+
import type { ReactNode } from "react";
92+
import "@radix-ui/themes/styles.css";
93+
import { Theme } from "@radix-ui/themes";
94+
95+
export function Layout({ children }: { children?: ReactNode }) {
96+
return (
97+
// highlight-next-line
98+
<Theme accentColor="crimson" grayColor="sand" radius="large" scaling="95%">
99+
{children}
100+
</Theme>
101+
);
102+
}
103+
```
104+
105+
See the [Radix Themes documentation](https://www.radix-ui.com/themes/docs/overview/getting-started) for more customization options.

‎web/docs/guides/libraries/shadcn.md‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
---
2+
comments: true
3+
last_checked_with_versions:
4+
Wasp: "0.21"
5+
Shadcn: 2026-02-16
6+
---
7+
8+
# Shadcn
9+
10+
## Setting up Shadcn in a Wasp project
11+
12+
We'll be loosely following [the Vite instructions for Shadcn](https://ui.shadcn.com/docs/installation/vite) since Wasp is using Vite + React. Some of the steps don't apply, so we've adjusted them accordingly.
13+
14+
You won't be able to use the `@` alias setup since it's not currently supported by Wasp. Because of this you'll need to adjust some imports when we generate components, but it should be fairly straightforward to do.
15+
16+
### 1. Add Tailwind CSS
17+
18+
If you haven't added Tailwind CSS to your Wasp project yet, follow the instructions in the [Tailwind CSS documentation](../../project/css-frameworks.md#tailwind) first.
19+
20+
### 2. Temporarily set up the `@` alias
21+
22+
We need to temporarily setup the `@` alias to pass Shadcn's "Preflight checks". We'll remove it later.
23+
24+
Add the following lines to your `tsconfig.json`:
25+
26+
```json title="tsconfig.json"
27+
{
28+
"compilerOptions": {
29+
// ...
30+
// highlight-start
31+
"baseUrl": ".",
32+
"paths": {
33+
"@/*": ["./src/*"]
34+
}
35+
// highlight-end
36+
// ...
37+
}
38+
}
39+
```
40+
41+
### 3. Setup Shadcn
42+
43+
Go into your project directory and run:
44+
45+
```bash
46+
npx shadcn@latest init
47+
```
48+
49+
Select the options like this:
50+
51+
```bash
52+
✔ Preflight checks.
53+
✔ Verifying framework. Found Vite.
54+
✔ Validating Tailwind CSS.
55+
✔ Validating import alias.
56+
✔ Which style would you like to use? › New York
57+
✔ Which color would you like to use as the base color? › Neutral
58+
✔ Would you like to use CSS variables for theming? … yes
59+
✔ Writing components.json.
60+
✔ Checking registry.
61+
✔ Updating tailwind.config.js
62+
✔ Updating src/Main.css
63+
✔ Installing dependencies.
64+
✔ Created 1 file:
65+
- src/lib/utils.ts
66+
```
67+
68+
### 4. Remove the `@` alias
69+
70+
Remove the lines we added in the `tsconfig.json`:
71+
72+
```diff title="tsconfig.json"
73+
{
74+
"compilerOptions": {
75+
// ...
76+
- "baseUrl": ".",
77+
- "paths": {
78+
- "@/*": ["./src/*"]
79+
- }
80+
}
81+
}
82+
```
83+
84+
### 5. Adjust the `components.json`
85+
86+
Adjust the `aliases` in `components.json` to be:
87+
88+
```json title="components.json"
89+
{
90+
"$schema": "https://ui.shadcn.com/schema.json",
91+
// ...
92+
"aliases": {
93+
// highlight-start
94+
"components": "src/components",
95+
"utils": "src/lib/utils",
96+
"ui": "src/components/ui",
97+
"lib": "src/lib",
98+
"hooks": "src/hooks"
99+
// highlight-end
100+
},
101+
}
102+
```
103+
104+
## Adding a component
105+
106+
In this example, we'll add the `Button` component.
107+
108+
### 1. Use the `shadcn` CLI to add the component
109+
110+
We'll add a button component with:
111+
112+
```bash
113+
npx shadcn@latest add button
114+
```
115+
116+
### 2. Adjust the `utils` import
117+
118+
You'll notice that you now have a brand new `button.tsx` file in `src/components/ui`. We need to fix some import issues:
119+
120+
```diff title="src/components/ui/button.tsx"
121+
import * as React from "react"
122+
import { Slot } from "@radix-ui/react-slot"
123+
import { cva, type VariantProps } from "class-variance-authority"
124+
125+
-import { cn } from "src/lib/utils"
126+
+import { cn } from "../../lib/utils"
127+
```
128+
129+
### 3. Use the `Button` component
130+
131+
That's it, now you are ready to use the `Button` component!
132+
133+
```tsx title="src/MainPage.tsx"
134+
import "./Main.css";
135+
136+
import { Button } from "./components/ui/button";
137+
138+
export const MainPage = () => {
139+
return (
140+
<div className="container">
141+
<Button>This works</Button>
142+
</div>
143+
);
144+
};
145+
```

0 commit comments

Comments
 (0)