Introduction
A modern UI component library built on Base UI. Designed for developers and AI.
cnippet is a developer ecosystem designed to accelerate web development. It provides an integrated suite of tools spanning UI components, pre-built page blocks, integration guides, and structured learning resources.
The ecosystem is organized across four surfaces:
- ui.cnippet.dev — Open-source component library. Core components (accordion, dialog, toast, etc.), motion components (text effects, scroll animations, carousel, etc.), and chart components (area, bar, line, and more).
- blocks.cnippet.dev — Sections, full pages, and complete templates to assemble production-ready experiences fast.
- next.cnippet.dev — Step-by-step integration guides for authentication, payments, DevOps, and other production workflows.
- learn.cnippet.dev — Structured learning paths for React, Next.js, TypeScript, and more.
At the heart of cnippet is cnippet ui: accessible and composable components for React. Built on Base UI and styled with Tailwind CSS, everything is copy-paste friendly so you fully own the code.
We chose Base UI for its robust, accessible, and unopinionated primitives. It handles the hard parts — accessibility, keyboard navigation, and focus management — without imposing any styles. This gives us the freedom to build a design system that is both beautiful and flexible.
cnippet ui is currently in early development. We're building the components, blocks, and guides in the open and actively shipping new releases. Base UI itself is also in beta, so you may encounter breaking changes as both projects evolve. We recommend using this in projects where you're comfortable adapting to changes.
How It Works
Our approach is simple: you should own your code. Inspired by the copy-paste ethos of shadcn/ui.
Instead of installing a package, you get the source code. This means:
- No abstractions: Full control over how components look and behave.
- Endless customization: Need to change something? Just edit the file.
- Learn by doing: See how components are built and adapt them to your needs.
Like shadcn/ui, but with Base UI
If you've used shadcn/ui, you'll feel right at home. The main difference is the foundation: shadcn/ui uses Radix UI, while cnippet ui uses Base UI.
Each of our components comes with detailed comparisons with Radix / shadcn to make migration as smooth as possible.
Design Principles
- Accessibility First: All components meet WCAG 2.1 AA standards.
- Unstyled by Default: Complete control over visual design via Tailwind CSS.
- Tree-Shakeable: Only import what you use, keeping bundle sizes minimal.
- TypeScript Native: Full type safety with comprehensive IntelliSense support.
- SSR Compatible: All components work with Next.js App Router and Server Components.
Built for Humans and AI
Our components are written to be clear, readable, and predictable, so that language models can understand, reason about, and modify them.
Get Involved
We're always looking for contributors. Whether it's a bug report, a new feature, or a documentation update, we appreciate your help.
Check out our contribution guidelines on GitHub to get started.