Introduction

cnippet ui is an open-source component library for React built in three layers:

• UI — 55+ core components (button, card, dialog, toast, and more), each with multiple style variants. This is what's available today.
• Motion (coming soon) — Animation-first components built on Motion. Drop-in replacements for core components with entrance, exit, and interaction animations.
• Chart (coming soon) — A dedicated chart collection built on Recharts. Themed automatically to your CSS variables with zero configuration.

Everything is copy-paste friendly — you own the code completely, built on Base UI primitives and styled with Tailwind CSS.

We chose Base UI for its robust, accessible, and unopinionated primitives. It handles accessibility, keyboard navigation, and focus management without imposing styles. This gives you full freedom to build a design system that fits your needs.

Why Base UI over Radix?

Both are excellent, but Base UI offers a few distinctive advantages:

• No extra markup – Radix often adds wrapper divs; Base UI renders only the elements you need.
• Modern React APIs – Built with hooks and context, no legacy patterns.
• Smaller runtime – Tighter code means less JavaScript shipped to the browser.
• Active development – Backed by MUI team, with frequent updates and a clear roadmap.

How It Works

Inspired by the copy-paste ethos of shadcn/ui, you don't install a monolithic package – you copy the source code directly into your project. This means:

• No abstractions – Full control over how components look and behave.
• Endless customization – Need a different animation? Edit the file.
• Learn by doing – See how accessible components are built under the hood.
• Zero vendor lock‑in – Your code stays yours, forever.

What's Included

UI — Available Now

55+ production-ready components, each fully accessible, typed, and shipped with multiple style variants:

All components are built with Tailwind CSS v4 and support dark mode out of the box.

Motion — Coming Soon

Animated variants of core UI components using Motion. Each motion component is a drop-in replacement — same API, same props, with built-in entrance, exit, and interaction animations. No animation knowledge required.

Chart — Coming Soon

A dedicated chart collection built on Recharts. Chart colors are mapped to your CSS variables automatically, so every chart matches your theme without any extra config. Supports area, bar, line, pie, radar, and radial bar charts.

cnippet ui vs. shadcn/ui

Bottom line: If you already use shadcn/ui, you'll feel at home. If you're starting fresh, cnippet ui gives you a modern, lightweight foundation.

Design Principles

• Accessibility First – All components meet WCAG 2.1 AA standards. Keyboard navigation, screen reader announcements, and focus management are built-in.
• Unstyled by Default – We provide a clean, minimal design with Tailwind, but you can override every class.
• Tree-Shakeable – Only the components you copy end up in your bundle. No unused code.
• TypeScript Native – Full type definitions included. IntelliSense works out of the box.
• SSR Compatible – Works with Next.js App Router, Remix, and any React 18+ framework.

A Real Example

Here's how you'd add a button and a dialog to your Next.js app:

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

Then use them:

Copyimport { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogPanel,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
 
export default function Home() {
  return (
    <Dialog>
      <DialogTrigger render={<Button />}>Open Dialog</DialogTrigger>
      <DialogPopup>
        <DialogTitle>Dialog Title</DialogTitle>
        <DialogPanel>Your content here</DialogPanel>
      </DialogPopup>
    </Dialog>
  )
}

That's it. No configuration, no providers – just copy, paste, and customize.