components.json
The file init writes and every add reads.
init writes this file to the root of your project. add reads it to decide
where files go and what their imports should say. It is the whole of the
configuration — there is nothing else to set.
{
"rsc": true,
"tsx": true,
"tailwind": {
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui"
}
}Unknown keys are rejected rather than ignored, so a typo surfaces as an error instead of silently doing nothing.
rsc
Whether to keep the "use client" directive on client components. Defaults to
false. init detects it as true for a Next.js project with an app
directory.
tsx
Whether the project is TypeScript. Defaults to true, and init detects it
from the presence of a tsconfig.json. add does not yet support false.
tailwind
There is no config path here on purpose. Tailwind v4 is configured from CSS,
so the stylesheet is the only thing the CLI needs to find.
| Key | Type | Default | Purpose |
|---|---|---|---|
css | string | required | The stylesheet theme variables are written into. |
baseColor | string | required | Which palette the theme block uses. See Theming. |
cssVariables | boolean | true | Whether components are styled against CSS variables. |
prefix | string | '' | A prefix on generated Tailwind class names. |
aliases
Import aliases as your project already uses them. Every file the CLI writes has its imports rewritten to match these, which is what lets components drop into an existing layout instead of dictating one.
| Key | Required | Example |
|---|---|---|
components | Yes | @/components |
utils | Yes | @/lib/utils |
ui | Yes | @/components/ui |
lib | No | @/lib |
hooks | No | @/hooks |
init derives all three required aliases from one prefix, which it reads from
the first paths entry in your tsconfig.json and falls back to @ without
one. Answering ~ at the prompt produces ~/components, ~/lib/utils, and
~/components/ui.
Nothing stops you editing these by hand afterwards. add resolves them through
your tsconfig.json paths, and refuses to write outside the project root.