mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
05fc512820
Upstream sync from shadcn-ui/ui (1686 commits since last merge base). Key changes: - packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors) - apps/v4 replaces apps/www as the primary docs/registry app - Font system: 25+ heading font registries, font markers utility, @supports override - Chart improvements: recharts v3 compat, radial chart fixes - templates/ updated with monorepo variants (astro, vite, react-router, start) - skills/shadcn AI skill definitions added - deprecated/ removed (auth, auth-firebase, cli, www) Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
102 lines
2.6 KiB
Plaintext
102 lines
2.6 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/new-york/hello-world/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/hello/page.tsx"
|
|
},
|
|
{
|
|
"path": "registry/new-york/hello-world/components/hello-world.tsx",
|
|
"type": "registry:component"
|
|
},
|
|
{
|
|
"path": "registry/new-york/hello-world/components/formatted-message.tsx",
|
|
"type": "registry:component"
|
|
},
|
|
{
|
|
"path": "registry/new-york/hello-world/hooks/use-hello.ts",
|
|
"type": "registry:hook"
|
|
},
|
|
{
|
|
"path": "registry/new-york/hello-world/lib/format-date.ts",
|
|
"type": "registry:lib"
|
|
},
|
|
{
|
|
"path": "registry/new-york/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` under `light` and `dark` keys.
|
|
|
|
```json showLineNumbers {10-18}
|
|
{
|
|
"$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": "oklch(0.205 0.015 18)",
|
|
"brand-accent": "oklch(0.205 0.015 18)"
|
|
},
|
|
"dark": {
|
|
"brand-background": "oklch(0.205 0.015 18)",
|
|
"brand-accent": "oklch(0.205 0.015 18)"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
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`.
|
|
|
|
### How do I add or override a Tailwind theme variable?
|
|
|
|
To add or override a theme variable you add it to `cssVars.theme` under the key you want to add or override.
|
|
|
|
```json showLineNumbers {10-15}
|
|
{
|
|
"$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": {
|
|
"theme": {
|
|
"text-base": "3rem",
|
|
"ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
"font-heading": "Poppins, sans-serif"
|
|
}
|
|
}
|
|
}
|
|
```
|