components.json
The config newtui init writes: where your aliases point, which stylesheet holds the tokens, and which registry to read.
components.json sits at the root of your project. It is the same file
shadcn/ui reads, so a project using both CLIs keeps one config rather than two.
newtui init writes it; every later add and diff reads it.
You never have to write it by hand, but every field is documented here because the CLI’s behaviour follows from it.
{
"$schema": "https://newtui.dev/schema.json",
"style": "default",
"typescript": true,
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"ui": "@/components/ui",
"utils": "@/lib/utils",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide",
"registry": "https://newtui.dev/r"
}
style
The registry style to read from. There is one, default, and the field exists
so a second one can be added without breaking installed projects.
typescript, tsx and rsc
typescript: false makes the CLI strip types as it writes, so a JavaScript
project gets JavaScript files. See JavaScript.
tsx decides the extension of the files written. rsc decides whether the
"use client" directive at the top of an interactive component is kept: answer
yes at init on the App Router, no on a client-rendered app, and add strips
the directive as it writes.
tsx and rsc are React-only and absent from a Vue config. What a Vue project
carries instead is the bundler it was detected as — Nuxt or Vite — which decides
where the global stylesheet lives.
tailwind
| Field | What it does |
|---|---|
config |
Path to tailwind.config.ts. Unused on Tailwind v4, which has no JS config. |
css |
The global stylesheet init appended the --newt-* tokens to. add never touches it again. |
baseColor |
The neutral ramp the shadcn tokens use, kept for compatibility. newt/ui reads --newt-* instead. |
cssVariables |
Whether components reference variables (bg-newt-brand) or literal values. Leave it true. |
prefix |
A Tailwind class prefix, if your project uses one. |
aliases
Where files land. The CLI resolves each alias through your tsconfig.json or
jsconfig.json paths — it reads them, it never writes them — and falls back
to a src directory when one exists.
components, ui, utils, lib and hooks. A component is written to ui,
and its imports are rewritten on the way in: @/registry/bases/newt/ui/button
becomes your ui alias, @/lib/utils becomes your utils alias.
components, ui, utils, lib and composables. A component is written as
a directory under ui, and its imports are rewritten on the way in:
~~/registry/bases/newt/ui/button becomes your ui alias, @/lib/utils
becomes your utils alias.
registry
The base URL items are fetched from. It defaults to https://newtui.dev/r for
React and https://newtui.dev/vue/r for Vue. --registry on any command and
the NEWT_REGISTRY_URL environment variable both override it, which is how you
point the CLI at a registry of your own.