cnippet uiAlpha

Get Started

A quick guide to adding your first component.

This guide covers the essentials for adding cnippet ui components to your React application.

Prerequisites

Our components are built with Tailwind CSS v4. Make sure you have a React project set up with Tailwind CSS before you begin.

Adding Components

You can add components automatically with the CLI or manually by copying the files. Both methods work for primitives, particles, and atoms.

With the CLI

Each component page provides a command to add it to your project automatically. The CLI creates the necessary files and installs any dependencies for you.

Install all UI Components

You can install all cnippet ui primitives at once:

pnpm dlx cnippet@latest add ui

This adds all UI components to your project in one go — button, card, avatar, dialog, tabs, and more.

Recommended: Install with our optimized color tokens for the best visual results:

pnpm dlx cnippet@latest add ui @cnippet/colors-zinc

This installs both the UI components and our default zinc-based color system, which provides crisp, contrasted borders and enhanced visual depth. See the Styling guide for details about our color system.

Manually

  1. Find a component on the Components or Particles pages.
  2. Copy the code from the Code tab.
  3. Create a new file in your project (e.g., components/ui/button.tsx) and paste the code.
  4. Install any dependencies listed on the component's page.
  5. Import and use the component in your app.

Styling

Components are styled with a design token system defined by CSS variables and implemented with Tailwind CSS. The variables are the same as shadcn/ui, and fully customizable in your global stylesheet (e.g., app/globals.css).

We've introduced a few additional tokens for more granular control:

  • --destructive-foreground: Used for destructive-outline buttons, destructive menu items, badges, and field errors
  • --info and --info-foreground: For info-colored badges, toast types, and alerts
  • --success and --success-foreground: For success-colored badges, toast types, and alerts
  • --warning and --warning-foreground: For warning-colored badges, toast types, and alerts

Important: If you manually import components, you must also import these additional tokens in your CSS file. If you use the CLI, these tokens are automatically configured for you.

Migration from Radix UI

For developers migrating from Radix UI, many of our UI primitives include instructions and examples for translating equivalent Radix components to Base UI. This ensures a smooth transition while preserving accessibility, behaviors, and API patterns.