Skip to content

Commit 487c8f3

Browse files
shadcnshadcn
committed
docs(www): update registry item docs
1 parent 617fe80 commit 487c8f3

File tree

3 files changed

+108
-20
lines changed

3 files changed

+108
-20
lines changed

‎apps/www/content/docs/registry/faq.mdx‎

Lines changed: 85 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,46 @@ Here's an example of a complex component that installs a page, two components, a
4949

5050
### How do I add a new Tailwind color?
5151

52+
<Tabs defaultValue="v4">
53+
54+
<TabsList>
55+
<TabsTrigger value="v4">Tailwind CSS v4</TabsTrigger>
56+
<TabsTrigger value="v3">Tailwind CSS v3</TabsTrigger>
57+
</TabsList>
58+
59+
<TabsContent value="v4">
60+
61+
To add a new color you need to add it to `cssVars` under `light` and `dark` keys.
62+
63+
```json showLineNumbers {10-18}
64+
{
65+
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
66+
"name": "hello-world",
67+
"title": "Hello World",
68+
"type": "registry:block",
69+
"description": "A complex hello world component",
70+
"files": [
71+
// ...
72+
],
73+
"cssVars": {
74+
"light": {
75+
"brand-background": "20 14.3% 4.1%",
76+
"brand-accent": "20 14.3% 4.1%"
77+
},
78+
"dark": {
79+
"brand-background": "20 14.3% 4.1%",
80+
"brand-accent": "20 14.3% 4.1%"
81+
}
82+
}
83+
}
84+
```
85+
86+
The CLI will update the project CSS file. Once updated, the new colors will be available to be used as utility classes: `bg-brand` and `text-brand-accent`.
87+
88+
</TabsContent>
89+
90+
<TabsContent value="v3">
91+
5292
To add a new color you need to add it to `cssVars` and `tailwind.config.theme.extend.colors`.
5393

5494
```json showLineNumbers {10-19} {24-29}
@@ -90,9 +130,47 @@ To add a new color you need to add it to `cssVars` and `tailwind.config.theme.ex
90130

91131
The CLI will update the project CSS file and tailwind.config.js file. Once updated, the new colors will be available to be used as utility classes: `bg-brand` and `text-brand-accent`.
92132

93-
### How do I add a Tailwind animation?
133+
</TabsContent>
134+
</Tabs>
135+
136+
### How do I add or override a Tailwind theme variable?
137+
138+
<Tabs defaultValue="v4">
139+
140+
<TabsList>
141+
<TabsTrigger value="v4">Tailwind CSS v4</TabsTrigger>
142+
<TabsTrigger value="v3">Tailwind CSS v3</TabsTrigger>
143+
</TabsList>
144+
145+
<TabsContent value="v4">
146+
147+
To add or override a theme variable you add it to `cssVars.theme` under the key you want to add or override.
148+
149+
```json showLineNumbers {10-15}
150+
{
151+
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
152+
"name": "hello-world",
153+
"title": "Hello World",
154+
"type": "registry:block",
155+
"description": "A complex hello world component",
156+
"files": [
157+
// ...
158+
],
159+
"cssVars": {
160+
"theme": {
161+
"text-base": "3rem",
162+
"ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
163+
"font-heading": "Poppins, sans-serif"
164+
}
165+
}
166+
}
167+
```
168+
169+
</TabsContent>
94170

95-
To add a new animation you add it to `tailwind.config.theme.extend.animation` and `tailwind.config.theme.extend.keyframes`.
171+
<TabsContent value="v3">
172+
173+
To override a theme variable you add it to `tailwind.config.theme.extend` under the key you want to override.
96174

97175
```json showLineNumbers {14-22}
98176
{
@@ -108,18 +186,15 @@ To add a new animation you add it to `tailwind.config.theme.extend.animation` an
108186
"config": {
109187
"theme": {
110188
"extend": {
111-
"keyframes": {
112-
"wiggle": {
113-
"0%, 100%": { "transform": "rotate(-3deg)" },
114-
"50%": { "transform": "rotate(3deg)" }
115-
}
116-
},
117-
"animation": {
118-
"wiggle": "wiggle 1s ease-in-out infinite"
189+
"text": {
190+
"base": "3rem"
119191
}
120192
}
121193
}
122194
}
123195
}
124196
}
125197
```
198+
199+
</TabsContent>
200+
</Tabs>

‎apps/www/content/docs/registry/registry-item-json.mdx‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,18 @@ The `registry-item.json` schema is used to define your custom registry items.
2121
"path": "registry/new-york/hello-world/use-hello-world.ts",
2222
"type": "registry:hook"
2323
}
24-
]
24+
],
25+
"cssVars": {
26+
"theme": {
27+
"font-heading": "Poppins, sans-serif"
28+
},
29+
"light": {
30+
"brand": "20 14.3% 4.1%"
31+
},
32+
"dark": {
33+
"brand": "20 14.3% 4.1%"
34+
}
35+
}
2536
}
2637
```
2738

@@ -41,7 +52,7 @@ The `$schema` property is used to specify the schema for the `registry-item.json
4152

4253
### name
4354

44-
The `name` property is used to specify the name of your registry item.
55+
The name of the item. This is used to identify the item in the registry. It should be unique for your registry.
4556

4657
```json title="registry-item.json" showLineNumbers
4758
{
@@ -71,7 +82,7 @@ A description of your registry item. This can be longer and more detailed than t
7182

7283
### type
7384

74-
The `type` property is used to specify the type of your registry item.
85+
The `type` property is used to specify the type of your registry item. This is used to determine the type and target path of the item when resolved for a project.
7586

7687
```json title="registry-item.json" showLineNumbers
7788
{
@@ -90,6 +101,8 @@ The following types are supported:
90101
| `registry:ui` | Use for UI components and single-file primitives |
91102
| `registry:page` | Use for page or file-based routes. |
92103
| `registry:file` | Use for miscellaneous files. |
104+
| `registry:style` | Use for registry styles. eg. `new-york` |
105+
| `registry:theme` | Use for themes. |
93106

94107
### author
95108

@@ -122,7 +135,7 @@ Use `@version` to specify the version of your registry item.
122135

123136
### registryDependencies
124137

125-
Used for registry dependencies. Can be names or URLs.
138+
Used for registry dependencies. Can be names or URLs. Use the name of the item to reference shadcn/ui components and urls to reference other registries.
126139

127140
- For `shadcn/ui` registry items such as `button`, `input`, `select`, etc use the name eg. `['button', 'input', 'select']`.
128141
- For custom registry items use the URL of the registry item eg. `['https://example.com/r/hello-world.json']`.
@@ -189,6 +202,8 @@ Use `~` to refer to the root of the project e.g `~/foo.config.js`.
189202

190203
### tailwind
191204

205+
**DEPRECATED:** Use `cssVars.theme` instead for Tailwind v4 projects.
206+
192207
The `tailwind` property is used for tailwind configuration such as `theme`, `plugins` and `content`.
193208

194209
You can use the `tailwind.config` property to add colors, animations and plugins to your registry item.
@@ -225,6 +240,9 @@ Use to define CSS variables for your registry item.
225240
```json title="registry-item.json" showLineNumbers
226241
{
227242
"cssVars": {
243+
"theme": {
244+
"font-heading": "Poppins, sans-serif"
245+
},
228246
"light": {
229247
"brand": "20 14.3% 4.1%",
230248
"radius": "0.5rem"
@@ -236,11 +254,6 @@ Use to define CSS variables for your registry item.
236254
}
237255
```
238256

239-
<Callout>
240-
**Note:** When adding colors, make sure to also add them to the
241-
`tailwind.config.theme.extend.colors` property.
242-
</Callout>
243-
244257
### docs
245258

246259
Use `docs` to show custom documentation or message when installing your registry item via the CLI.

‎apps/www/public/schema/registry-item.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
},
2828
"title": {
2929
"type": "string",
30-
"description": "The title of the item. This is human readable and used in the UI."
30+
"description": "The human-readable title for your registry item. Keep it short and descriptive."
3131
},
3232
"author": {
3333
"type": "string",

0 commit comments

Comments
 (0)