Installation

Add chatcn components to a React project that uses Tailwind CSS v4 and the shadcn CLI.

On this page

Requirements

React 19 and Tailwind CSS v4.
A project initialized with the shadcn CLI. If you have not done that yet, run npx shadcn@latest init.

Add a component

Every component installs from its own URL. The CLI copies the source into components/ui/chatcn/, adds the theme tokens to your CSS and installs the few dependencies it needs.

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/tool-call.json

Use the namespace

Register chatcn once in components.json and install by name. The {style} placeholder lets the registry serve the Base UI or Radix version that matches your project.

components.json

{
  "registries": {
    "@chatcn": "https://chatcn.dev/r/{style}/{name}.json"
  }
}

bash

npx shadcn@latest add @chatcn/tool-call

Theme

Components depend on the chatcn-theme item, which the CLI installs automatically. Its variables are namespaced --chatcn-*, so they never overwrite your shadcn theme. Dark mode follows the .dark class, the same as shadcn. See Theming to change the accent or map chatcn onto your own palette.

Fonts

Components inherit your font-sans and font-mono. The docs use Geist Sans and Geist Mono, which pair well with the type scale. Install them with npm i geist if you want the same look.