FAQ
FAQ
레지스트리를 운영하면서 자주 받는 질문을 알려드릴게요. 실제 레지스트리 아이템 예시를 보면서 복잡한 컴포넌트가 어떻게 생겼는지, 커스텀 color와 animation은 어떻게 추가하는지 살펴볼게요.
출처: 문서
본문
복잡한 컴포넌트는 어떻게 생겼나요?
다음은 페이지, 컴포넌트 두 개, 훅, format-date 유틸, config 파일까지 설치하는 복잡한 컴포넌트의 예시예요.
{
"$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"
}
]
}
새 Tailwind color는 어떻게 추가하나요?
새 color를 추가하려면 cssVars와 tailwind.config.theme.extend.colors에 모두 추가해야 해요.
{
"$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))"
}
}
}
}
}
}
}
CLI가 프로젝트 CSS 파일과 tailwind.config.js 파일을 업데이트해 줘요. 업데이트가 끝나면 새 color를 유틸리티 클래스로 사용할 수 있게 돼요: bg-brand, text-brand-accent.
Tailwind animation은 어떻게 추가하나요?
새 animation을 추가하려면 tailwind.config.theme.extend.animation과 tailwind.config.theme.extend.keyframes에 추가해요.
{
"$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"
}
}
}
}
}
}