Style and component base
Select the current Radix, Base UI, or Aria families and a visual style, or create a legacy new-york configuration.
Free shadcn configuration generator
components.json Builder
Build and validate a shadcn components.json file for Tailwind CSS, aliases, styles, icon libraries, RTL, and custom registry namespaces.
Configure before you install
Build a components.json file you can review
Maintained by Diwan SachiduTechnical review:
The shadcn CLI reads components.json before it chooses file destinations, import aliases, component format, and theme conventions. A wrong alias may produce imports your project cannot resolve. A stale Tailwind config path can stop initialization before a component is written.
This builder keeps the configuration and generated JSON side by side. Every change is validated in the browser, so you can inspect the exact file before copying or downloading it.
What the components.json builder covers
Tailwind configuration
Set the global CSS file, Tailwind version, base color, CSS-variable behavior, and an optional class prefix.
Project aliases
Define the import roots the CLI uses for components, UI primitives, utilities, hooks, and library files.
CLI preferences
Choose TypeScript, React Server Components, RTL support, icon library, menu color, and menu accent.
Settings worth checking twice
- Style and base color
- Existing components are not automatically rewritten when these initialization choices change. Pick them before installing a large component set.
- Tailwind CSS version
- Tailwind CSS v4 uses an empty config path. Version 3 needs the actual tailwind.config.js or tailwind.config.ts location.
- Alias destinations
- The aliases must agree with tsconfig paths or package imports. They tell the CLI both where to write files and how to rewrite imports.
- Registry URL templates
- A namespace key begins with @ and its URL contains {name}. The CLI substitutes the requested registry item at install time.
Where to put the generated file
Download components.json and place it at the root of the project where you run shadcn commands. In a monorepo, each workspace that receives generated components needs its own configuration with aliases appropriate to that workspace.
The official init command remains the safest option when you want the CLI to inspect a real project. After placing a hand-built file, run a small install and review the generated path and imports before adding a larger block.
Technical references: components.json, monorepo setup, and namespaced registries.
Shadcn Search is independent and is not affiliated with or endorsed by shadcn/ui.
Frequently asked questions
Inspect a registry before adding its items
The Shadcn Dependency Graph maps registry references and npm packages without installing or executing component code.
Open the Shadcn Dependency Graph