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.Start hereCopies and plansWhat a free account can copy each day, and what Builder and templates add.

Quick startStart here

✅ You need: a React 19 project with TypeScript and Tailwind CSS v4, such as a Next.js or Vite app. Starting from scratch? Create one first, then come back here.

  1. Set up nextui

    $pnpm create nextui

    One command does the whole setup:

    • runs shadcn init if the project has no components.json yet,
    • signs you in through the browser (free) and saves a key for this machine to .env.local as NEXTUI_TOKEN,
    • registers the @nextui namespace in components.json,
    • and, if you pick one, connects your AI agent over MCP.

    Prefer to do it yourself? See Set up by hand.

  2. Install and use a component

    Copy the command from any component page, or install by name:

    $pnpm dlx shadcn@latest add @nextui/icon-buttons

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

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

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

Copies and plansStart here

Every component and block is open to any signed-in account. Copying a prompt or code on the site and installing with the CLI each count as one copy.

  • Free account: 3 copies every 24 hours. The count shows at the top right, and comes back in full 24 hours after your first copy.
  • Builder or Team: unlimited copies and installs. See Pricing.
  • Templates are not part of a plan: each is free or bought once, and subscribers get 25% off.

🔑 You can have several keys, one per machine or project: npm create nextui makes a new one each time, and API keys lists them so you can revoke any of them. All your keys share the same copies.

💡 A key in CI spends copies too. Keep it in a CI secret, never in git.

Extras: not needed to get started

Set up by handOptional

This is what npm create nextui does for you. Do it yourself if you would rather not run the setup command, for example in CI.

1. Initialize shadcn, unless the project already has a components.json. This creates the file, which tells the CLI where files go, and adds the theme colors the components use:

$pnpm dlx shadcn@latest init

2. Sign in (it is free), create a key under API keys and put it in .env.local. Never commit it.

1NEXTUI_TOKEN=nextui_…

3. Register the namespace in components.json once. It tells the CLI to send your key with every request:

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