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.
Budget usage — spend with a month-end forecast marker
Contributions — a year of daily activity
Habit streak — three months, weeks start Monday
Daily sales — six months of revenue
Stock price — daily candles for a month
Crypto — hourly candles with volume bars
Moving average — candles with a 7-day average line
Credit score — bands with a marker
Storage breakdown — usage by type with free space
Budget allocation — spend so far as a marker
Revenue card — headline value, growth badge and area trend
Range select — card actions switch the chart between 7, 30 and 90 days
Churn card — inverted delta where a drop is good, with a footer insight
No data in range — prompt to widen the date range
No events yet — first-run state before any data arrives
Filtered to nothing — clear filters to bring the chart back
Bar placeholder — swaps to the real chart once data loads
Line and area placeholders — side by side in chart cards
Donut placeholder — loading state for a part-to-whole card
Period comparison — revenue against last year with % change
Stacked total — MRR by plan with a total row
Sorted list — page load by region, slowest first
Weekly retention — signup cohorts by week
Net revenue retention — monthly cohorts above 100%
Feature adoption — share using a feature by month
Revenue & growth — bars in $ with a % line on a second axis
Orders & AOV — order volume against average order value
Trials & conversion — stacked bars by plan with a conversion line
NPS change — points gained or lost per area
Budget variance — over budget shown as bad
Week over week — change under each metric
Traffic sources — channel share with the total in the centre
Storage used — side legend with free space muted
Headcount — percentage labels on each slice
Budget split — side legend with a currency total
Revenue — year → quarter → month
Active users — region → country → city
Sales by product — horizontal bars, category → product
Signup funnel — share reaching each step with drop-off
Checkout — left-aligned bars
Sales pipeline — currency values without drop-off
Web Vitals LCP — good / needs work / poor bands
CPU load — value arcs coloured by threshold
NPS — a -100 to 100 scale with four bands
(No description)
Card frame for a chart with title, headline value, delta badge, actions and footer
Empty state sized for a chart, with icon, message and action
Loading placeholder shaped like a bar, line, area or donut chart