Installation

Prerequisites

Components are distributed through the shadcn registry format. Before installing a component, make sure your project has:

• React
• Tailwind CSS v4
• shadcn/ui initialized
• a components alias that resolves to your app's component directory

For a new project, initialize shadcn first:

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest init
Copy

Adding components

CLI

Install the Button component from this registry:

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add https://tanstartercn.tsu.moe/r/button.json
Copy

The CLI copies the component source into your project and installs the npm dependencies declared by the registry item.

Then import it from the target path:

Copyimport { Button } from "@/components/ui/button";
 
export function Example() {
  return <Button variant="outline">Button</Button>;
}

Manual

Copy component source from the component docs via the Manual tab. Manual installation is useful when you want to review the source before adding it to your project.

Registry index

The registry index is available at:

Copyhttps://tanstartercn.tsu.moe/r/registry.json

Use the index to inspect available components. Install individual components with their /r/<component>.json URL.