127k
New

FAQ

PreviousNext

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.

{
  "$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.

{
  "$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.

Why does button in registryDependencies not resolve to my GitHub repository?

Bare registry dependency names keep the existing shadcn behavior. button means the built-in shadcn button item.

For a dependency from a GitHub repository, use the full GitHub item address.

registry-item.json
{
  "registryDependencies": ["acme/ui/button"]
}

How do I pin a GitHub registry item?

Add #ref to the GitHub item address. The ref can be a branch, tag or full commit SHA.

pnpm dlx shadcn@latest add acme/ui/button#v1.2.0

For published registries, prefer tags or full commit SHAs.

Can GitHub registry addresses use private repositories?

Yes. Private github.com repositories work with your GitHub credentials. The CLI uses the GitHub CLI (gh auth login) locally, or GH_TOKEN / GITHUB_TOKEN in CI. See Private repositories.

GitHub Enterprise hosts are not supported. For custom registry servers with request authentication, use a namespace with authentication.

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.

{
  "$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"
    }
  }
}