Get Started

This guide walks you through adding cnippet ui components to your React project. You'll be up and running in less than 5 minutes.

Prerequisites

Make sure your project meets these requirements:

• React 18+ (Next.js App Router, Remix, Vite — all work)
• Tailwind CSS v4 – Install Tailwind
• Node.js 18+ – for the CLI

No existing Tailwind project? Create one quickly:

Copy# Next.js
npx create-next-app@latest my-app --typescript --tailwind
 
# Vite
npm create vite@latest my-app -- --template react-ts
cd my-app && npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p

Two ways to add components

You can add components automatically with the CLI (recommended) or manually.

Option 1: CLI (fast & automated)

The CLI creates component files, installs dependencies, and sets up CSS variables for you.

Add a single component

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @cnippet/button
Copy

This creates components/ui/button.tsx and installs any required packages (e.g., @base-ui/react).

Add multiple components

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @cnippet/button card dialog
Copy

Add all UI components at once

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @cnippet/ui
Copy

Adds all 55+ core components – perfect for starting a new project.

Add with color tokens (recommended)

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @cnippet/ui @cnippet/colors-zinc
Copy

This installs both the components and our default zinc-based color system. The CSS variables are automatically added to your globals.css. See the Styling guide for details.

What the CLI does for you:

• Creates components/ui/ folder (if missing)
• Adds the component file with correct imports
• Installs npm dependencies
• Updates your CSS with required variables (when using color tokens)
• No extra config files – your project stays clean

Option 2: Manual copy (full control)

Prefer to copy-paste manually? Here's how:

1. Browse the Components page and pick one (e.g., Button).
2. Click the Code tab to see the source.
3. Copy the entire component code.
4. Create a new file in your project, e.g., components/ui/button.tsx, and paste the code.
5. Check the component's page for any required dependencies – install them with npm/yarn/pnpm.
6. Import and use the component:

Copyimport { Button } from "@/components/ui/button"
 
export default function MyComponent() {
  return <Button variant="outline">Click me</Button>
}

Note: If you install manually, you must also add the CSS variables (explained below). The CLI does this automatically.

Styling and CSS variables

Components use Tailwind CSS classes plus a set of CSS variables for theming (colors, borders, shadows, etc.).

Base variables (compatible with shadcn/ui)

Add these to your globals.css:

Copy:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
}

Extra tokens unique to cnippet ui

For richer feedback states (badges, toasts, alerts):

Copy--info: 201 96% 32%;
--info-foreground: 210 40% 98%;
--success: 142 76% 36%;
--success-foreground: 210 40% 98%;
--warning: 38 92% 50%;
--warning-foreground: 210 40% 98%;

Dark mode support

Add a .dark class to your root element (or use next-themes) and define dark variables:

Copy.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  /* ... copy other variables with dark values ... */
}

All components include dark: modifiers out of the box.

Verify your setup

After adding a component, test it on a page:

Copyimport { Button } from "@/components/ui/button"
 
export default function TestPage() {
  return (
    <div className="p-8 space-x-4">
      <Button>Default</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="outline">Outline</Button>
    </div>
  )
}

If you see styled buttons, everything works. If styles are missing, double-check your CSS variables and Tailwind configuration.

Troubleshooting

"Cannot find module '@/components/ui/button'"

Make sure your tsconfig.json has the path alias:

Copy{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

For Next.js, also add to next.config.js (if using Turbopack):

Copyexperimental: {
  turbo: {
    resolveAlias: { '@': './' }
  }
}

Styles look broken (no borders, weird colors)

You likely missed the CSS variables. Either:

• Run npx shadcn@latest add @cnippet/ui @cnippet/colors-zinc to auto-add them, or
• Manually copy the :root and .dark variable blocks into your globals.css

CLI command fails

Ensure you're using Node.js 18+. If you use pnpm, try pnpm dlx cnippet@latest instead of npx.

I want to remove a component

Simply delete the component file and remove its imports. No package to uninstall – that's the beauty of copy-paste.

Next steps

• Browse all Components
• Learn about Styling – custom themes, dark mode, and more
• See Blocks for full page examples built with cnippet ui

Need help?

• Open an issue on GitHub
• Join the discussion – we're responsive

Happy building!