Installation

Set up your project once, then install any component with one command.

Start hereInstall a componentSet up once, then one command per component. This is all most people need.ProPro componentsAdd your access key once, then Pro items install like free ones.OptionalExtrasShort names, AI agents over MCP, or copying the code by hand.

Quick startStart here

✅ You need: a React 19 project with TypeScript and Tailwind CSS v4. Pick your framework below and follow only its steps. Already have an app with a components.json? Jump straight to the install step.

Your framework:

  1. Create a project

    $pnpm create next-app@latest my-app

    Accept the defaults: TypeScript, Tailwind and the @/* alias are all switched on.

  2. Initialize shadcn

    $pnpm dlx shadcn@latest init

    This creates components.json, which tells the CLI where files go, and adds the theme colors the components use.

  3. Install a component

    Copy the command from any component page, or point the CLI at its address:

    $pnpm dlx shadcn@latest add https://tinistudio.vercel.app/r/button-01.json

    The file lands in components/nextui/, and everything it needs comes along automatically: npm packages (like motion and lucide-react) and shadcn base components (like button or card).

  4. Use it

    It is now your own file, so import it like any local component and edit it freely:

    1import Button01 from "@/components/nextui/button-01";
    2
    3export default function Page() {
    4  return <Button01 />;
    5}

Pro componentsPro

Pro items install the same way. The registry only hands them out with your personal access key.

  1. Add your access key

    Create your key under Account and put it in .env.local. Never commit it.

    1NEXTUI_TOKEN=tini_…

  2. Register the namespace

    Add this to components.json. It tells the CLI to send your key with every request:

    1{
    2  "registries": {
    3    "@nextui": {
    4      "url": "https://tinistudio.vercel.app/r/{name}.json",
    5      "headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }
    6    }
    7  }
    8}

  3. Install by name

    Free and Pro items now both install by name:

    $pnpm dlx shadcn@latest add @nextui/<name>

💡 No CLI? While signed in, Pro members see the code and a copy button on every Pro page.

Extras: not needed to get started

Short namesOptional

A shorter way to type the same command. Register the @nextui namespace once in components.json:

1{
2  "registries": {
3    "@nextui": "https://tinistudio.vercel.app/r/{name}.json"
4  }
5}

Then install by name, one or several at once. You get exactly the same files as with the full address.

$pnpm dlx shadcn@latest add @nextui/button-01 @nextui/badge-01

Install with an AI agent (MCP)Optional

Let Claude Code, Cursor, VS Code or Codex browse and install @nextui items for you through the shadcn MCP server. Register the @nextui namespace as in Short names, then set up the server for your client:

$pnpm dlx shadcn@latest mcp init --client claude

Swap claude for cursor, vscode or codex. Then ask your agent, for example: "Add the pricing card from @nextui".

Copy the code by handOptional

1. Install the packages the component lists on its page. Most use these:

$pnpm add motion lucide-react

2. Open a component or block page, switch to the Code tab and copy the file into components/nextui/. If it imports a shadcn base component such as @/components/ui/button, add that too with shadcn add button.