Cnippet UI is a production-ready, curated set of accessible and composable React components—built with Base UI and Tailwind CSS. Copy, paste, and ship stunning interfaces faster.
Inline loading text with spinner
overlay on card
Semantic color variants
Checkout steps with back and continue
Vertical onboarding checklist
Compact dot progress with step count
Jump back to finished steps
Default
Notification Delivery Channels
Plan Feature Toggles
Privacy Settings With Icons
Dark Mode Toggle Card
Required Agreement Switch
Do Not Disturb Mode
Showcase: states, sizes and descriptions
Description
Switch in different sizes
Switch group
Switch list in card with icons
Destructive switch with confirmation text
Compact settings table with switches
Switch with descriptions in card grid
Cookie Preferences Manager
Default
Audit Log
Product inventory with stock level badges and quantity
Invoice history with status badges and outstanding total
Feature comparison table with checkmarks across plan tiers
Server health monitoring with CPU and memory progress bars
Contributor leaderboard with rank, avatar, and change indicator
Card-style table
Table in CardFrame
Table in Frame
Orders table with customer info and payment status
Team members table with avatars, roles, and status
Subscriptions table with plan badges and billing info
Sortable API Endpoints
Storage Usage with Progress Bars
Default
With Badge Counts
With Icons And Line Variant
Segmented Control Tabs
Settings navigation with vertical underline tabs and profile form
Code file viewer with per-file tabs and copy button
Profile repository listing with badge counts per tab
Pricing toggle between monthly and yearly billing with plan cards
Dashboard metrics with icon tabs and stat card content panels
Showcase: default, underline and vertical