Install shadcn/ui themes by name (and from AI assistants)

Every theme on shadcnthemes.com is published as a shadcn registry item. You can install one from its URL, but registering the site as a namespaced registry is nicer: one line in components.json, and every theme becomes installable by name, from your terminal or from an AI assistant.

1. Add the registry

Add a registries entry to your project's components.json:

{
  "registries": {
    "@shadcnthemes": "https://shadcnthemes.com/r/{name}.json"
  }
}

2. Install themes by name

npx shadcn@latest add @shadcnthemes/dracula
npx shadcn@latest add @shadcnthemes/nord

The name is the theme's slug, the last part of its URL on this site. For matching success, warning and info colors, add .extended:

npx shadcn@latest add @shadcnthemes/dracula.extended

Browse from the terminal with npx shadcn@latest search @shadcnthemes, or see the full index at /r/registry.json.

3. Use it from an AI assistant

The shadcn CLI includes an MCP server that reads the registries in your components.json. Set it up once:

npx shadcn@latest mcp init --client claude   # or cursor, vscode, codex, opencode

Then you can ask your assistant (Claude Code, Cursor, VS Code Copilot and others) things like:

• "Show me dark themes from @shadcnthemes"
• "Install the Gruvbox theme from @shadcnthemes"
• "Switch this project to @shadcnthemes/tokyo-night and keep my fonts"

The assistant finds the theme in the registry index and installs it with the CLI, exactly as you would.

Good to know

• Installing a theme rewrites your :root and .dark variables. Commit first if you want an easy way back.
• Themes reference Google Fonts by name; load them in your app (see Fonts in shadcn/ui).
• Want several themes users can switch between? Use the theme switcher builder.