Skip to content

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.