Cnippet UI

Accessible, copy-paste React components built on Base UI + Tailwind CSS.
Like shadcn/ui — but powered by Base UI instead of Radix.

· · ·

Built on — fully accessible, copy-paste friendly, and production-ready.

Why Cnippet UI?

Featureshadcn/uiCnippet UI
Primitive layerRadix UIBase UI (MUI team)
StylingTailwind CSSTailwind CSS v4
Copy-pasteYesYes
AccessibleYesYes (WAI-ARIA / WCAG 2.1 AA)
AI-friendly codePartialOptimized for LLMs
Bundle sizeMediumMinimal (tree-shakeable)

Quick Start

bash
# Add a single componentnpx shadcn@latest add @cnippet/button
# Add all components at oncenpx shadcn@latest add @cnippet/ui
# With optimized color tokens (recommended)npx shadcn@latest add @cnippet/ui @cnippet/colors-zinc

Then import:

tsx
import { Button } from '@/components/ui/button'
export default function App() {  return <Button variant="solid">Click me</Button>}

40+ Components · 8 Categories

Actions

ComponentDescription
ButtonPrimary action trigger with multiple variants
SwitchToggle between two states
ToggleSingle pressable toggle button
Toggle GroupGroup of toggle buttons with single/multi selection
ToolbarContainer for grouping action controls

Data Display

ComponentDescription
AccordionExpandable/collapsible content sections
ChartData visualization (area, bar, line, and more)
CollapsibleShow/hide content with a trigger
EmptyEmpty state placeholder
TableStructured data display

Feedback

ComponentDescription
AlertContextual feedback messages
BadgeStatus indicators and labels
KbdKeyboard shortcut display
ProgressProgress indicator bar
SkeletonLoading placeholder
SpinnerLoading spinner
ToastTemporary notification messages

Forms

ComponentDescription
CheckboxSingle checkbox input
Checkbox GroupGroup of related checkboxes
FieldForm field wrapper with label and error
FieldsetGrouping of related form fields
FormForm container with validation
InputText input field
Input GroupInput with prefix/suffix addons
LabelForm label
MeterScalar measurement display
Number FieldNumeric input with increment/decrement
Radio GroupSingle-select radio options
SliderRange value selector
TextareaMulti-line text input

Layout

ComponentDescription
AvatarUser profile image/initials
CardContained content surface
FrameMedia frame/container
GroupFlex layout grouping
Preview CardHover preview card
Scroll AreaCustom scrollbar container
SeparatorVisual divider

Navigation

ComponentDescription
BreadcrumbPage hierarchy navigation
MenuDropdown action menu
PaginationPage navigation controls
TabsTabbed content navigation

Overlays

ComponentDescription
Alert DialogConfirmation dialog requiring user action
Context MenuRight-click context menu
DialogModal dialog window
PopoverFloating content panel
SheetSlide-in side panel
TooltipHover information display

Pickers

ComponentDescription
AutocompleteInput with suggestion dropdown
CalendarDate selection calendar
ComboboxSearchable select input
SelectDropdown selection

Architecture

cnippet ui uses a layered approach:

  • Primitives — Unstyled, accessible building blocks powered by Base UI (the foundation)
  • Particles — Pre-assembled components like auth forms, tables, and date pickers (the patterns)
  • Atoms — API-enhanced particles that integrate with external data and services (the integrations)

This is a app within a monorepo, documented with .

Styling

Components use a design token system based on CSS variables, compatible with shadcn/ui tokens. Additional tokens:

  • --destructive-foreground — Destructive action foreground
  • --info / --info-foreground — Info state colors
  • --success / --success-foreground — Success state colors
  • --warning / --warning-foreground — Warning state colors

See the for full details.

Migrating from shadcn/ui

cnippet ui is inspired by shadcn/ui. If you're migrating from Radix UI or shadcn/ui, each component includes comparison notes and examples for translating equivalents to Base UI, preserving accessibility, behaviors, and API patterns.

Contributing

Contributions are welcome! Please read to get started.

Built on the Shoulders of Giants

cnippet ui would not exist without these incredible projects:

  • — The accessible primitive layer
  • — Inspiration for the copy-paste model
  • — Utility-first styling
  • — Documentation framework
  • — Original accessible primitives inspiration

Development

bash
git clone https://github.com/cnippet-dev/ui-cnippet.gitcd cnippet-uibun installbun dev

Open to view the documentation site.

License

MIT — see for details.