mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-30 08:04:18 +00:00
9643db42cf
* chore: 2.2.0-canary.2 * feat: add docs for registry * docs(www): update registry docs * fix: update dep * docs(www): update docs * docs(www): update registry docs * feat: add new label * fix: lint
126 lines
3.1 KiB
Plaintext
126 lines
3.1 KiB
Plaintext
---
|
|
title: FAQ
|
|
description: Frequently asked questions about running a registry.
|
|
---
|
|
|
|
## Frequently asked questions
|
|
|
|
### What does a complex component look like?
|
|
|
|
Here's an example of a complex component that installs a page, two components, a hook, a format-date utils and a config file.
|
|
|
|
```json showLineNumbers
|
|
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "hello-world",
|
|
"title": "Hello World",
|
|
"type": "registry:block",
|
|
"description": "A complex hello world component",
|
|
"files": [
|
|
{
|
|
"path": "registry/hello-world/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/hello/page.tsx"
|
|
},
|
|
{
|
|
"path": "registry/hello-world/components/hello-world.tsx",
|
|
"type": "registry:component"
|
|
},
|
|
{
|
|
"path": "registry/hello-world/components/formatted-message.tsx",
|
|
"type": "registry:component"
|
|
},
|
|
{
|
|
"path": "registry/hello-world/hooks/use-hello.ts",
|
|
"type": "registry:hook"
|
|
},
|
|
{
|
|
"path": "registry/hello-world/lib/format-date.ts",
|
|
"type": "registry:utils"
|
|
},
|
|
{
|
|
"path": "registry/hello-world/hello.config.ts",
|
|
"type": "registry:file",
|
|
"target": "~/hello.config.ts"
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
### How do I add a new Tailwind color?
|
|
|
|
To add a new color you need to add it to `cssVars` and `tailwind.config.theme.extend.colors`.
|
|
|
|
```json showLineNumbers {10-19} {24-29}
|
|
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "hello-world",
|
|
"title": "Hello World",
|
|
"type": "registry:block",
|
|
"description": "A complex hello world component",
|
|
"files": [
|
|
// ...
|
|
],
|
|
"cssVars": {
|
|
"light": {
|
|
"brand-background": "20 14.3% 4.1%",
|
|
"brand-accent": "20 14.3% 4.1%"
|
|
},
|
|
"dark": {
|
|
"brand-background": "20 14.3% 4.1%",
|
|
"brand-accent": "20 14.3% 4.1%"
|
|
}
|
|
},
|
|
"tailwind": {
|
|
"config": {
|
|
"theme": {
|
|
"extend": {
|
|
"colors": {
|
|
"brand": {
|
|
"DEFAULT": "hsl(var(--brand-background))",
|
|
"accent": "hsl(var(--brand-accent))"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
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`.
|
|
|
|
### How do I add a Tailwind animation?
|
|
|
|
To add a new animation you add it to `tailwind.config.theme.extend.animation` and `tailwind.config.theme.extend.keyframes`.
|
|
|
|
```json showLineNumbers {14-22}
|
|
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "hello-world",
|
|
"title": "Hello World",
|
|
"type": "registry:block",
|
|
"description": "A complex hello world component",
|
|
"files": [
|
|
// ...
|
|
],
|
|
"tailwind": {
|
|
"config": {
|
|
"theme": {
|
|
"extend": {
|
|
"keyframes": {
|
|
"wiggle": {
|
|
"0%, 100%": { "transform": "rotate(-3deg)" },
|
|
"50%": { "transform": "rotate(3deg)" }
|
|
}
|
|
},
|
|
"animation": {
|
|
"wiggle": "wiggle 1s ease-in-out infinite"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|