lib

Components

Building pieces for dashboards and web apps. Previews use this site's theme; in your app they use yours.

KPI

v1.0.0

A key number that animates when it changes, with a colored change (good or bad news), a sparkline and an optional goal. KpiGroup joins several into one strip.

npx shadcn@latest add @lib/kpi
MRR
$45,231+12.1%vs last month
p95 latency
182ms-8.4%vs last period
Weekly distance
32.4km+6.1 kmvs last week
81% of 40
Average pace
5:18/km-0:09faster

Stat card

v1.0.0

A KPI with its trend against the previous period.

npx shadcn@latest add @lib/stat-card
MRR
$45,231
+12.1%
vs. last month
Active customers
1,284
-2.4%
vs. last month
Churn
1.8%
-0.6%
Lower is better

Stat strip

v1.0.0

A joined row of KPIs split by hairlines, each with its trend and a small line chart.

npx shadcn@latest add @lib/stat-strip
MRR
$45,231+12.1%vs. last month
Active customers
1,284+4.2%
New trials
312+18.6%
Churn
1.8%-0.6%

Chart card

v1.0.0

A metric's latest value with its area chart over time.

npx shadcn@latest add @lib/chart-card
Monthly revenue
$45,231
Last 6 months

Data table

v1.0.0

Search, sorting, column visibility and pagination, built on TanStack Table v9.

npx shadcn@latest add @lib/data-table
PlanStatus
Ada Parkada@northwind.io
GrowthActive$490
David Coletomas@quarry.dev
ScaleActive$2,400
Mei Tanakamei@halcyon.app
StarterActive$0
Jonas Bergjonas@tessera.co
GrowthPast due$490
Priya Nairpriya@lumen.co
GrowthActive$980
8 rows
Page 1 of 2

Activity feed

v1.0.0

Recent events by teammates or customers, with relative times.

npx shadcn@latest add @lib/activity-feed
PN
Priya Nair upgraded to Growth

JB
Jonas Berg's payment failed

LD
Lea Dubois added 4 seats

SO
Sam Okafor canceled Starter

Usage meter

v1.0.0

Plan usage against limits, flagged when close to the limit.

npx shadcn@latest add @lib/usage-meter
Growth plan
Resets on October 1
Tracked revenue212K / 250K USD
API callsAlmost full48K / 50K
Seats6 / 20

Workspace switcher

v1.0.0

Sidebar menu to switch between workspaces or teams.

npx shadcn@latest add @lib/workspace-switcher

Search command

v1.0.0

Search button that opens a command palette, also with Cmd+K.

npx shadcn@latest add @lib/search-command

Search

Search or jump to…

Progress list

v1.0.0

A ranked list of values with bars, for top pages, categories or budgets.

npx shadcn@latest add @lib/progress-list
  • /pricing8,420
  • /7,910
  • /docs/getting-started5,230
  • /blog/mrr-vs-arr3,870

Sparkline

v1.0.0

A tiny trend chart to put next to a number.

npx shadcn@latest add @lib/sparkline
p95 latency
182 ms

Theme toggle

v1.0.0

Light, dark or system theme menu, built on next-themes.

npx shadcn@latest add @lib/theme-toggle

OAuth buttons

v1.0.0

Continue with Google or GitHub buttons, with brand icons.

npx shadcn@latest add @lib/oauth-buttons

Reveal

v1.0.0

Entrance animations without JavaScript: fade and rise on scroll (CSS scroll-driven) or once on load. Still for reduced motion.

npx shadcn@latest add @lib/reveal

Section frame

v1.0.0

Blueprint-style guide lines and plus marks around a section or box.

npx shadcn@latest add @lib/section-frame

Framed content

Plus marks sit on the four corners.

Grid pattern

v1.0.0

A fading grid or dot background that follows your theme.

npx shadcn@latest add @lib/grid-pattern
Lines
Dots

Marquee

v1.0.0

An endless scrolling row or column that pauses on hover.

npx shadcn@latest add @lib/marquee
StripeVercelSupabaseNotionLinearFigmaGitHub

Browser Frame

v1.0.0

A browser window with traffic lights and an address bar, for product screenshots and mockups.

npx shadcn@latest add @lib/browser-frame
app.acme.com/overview

People

v1.0.0

Demo people with portrait photos, and an avatarFor helper that finds one by name or initials.

npx shadcn@latest add @lib/people
  • APAda ParkHead of Finance
  • PNPriya NairCEO & co-founder
  • OHOmar HaddadCTO & co-founder
  • MTMei TanakaHead of Design
  • JBJonas BergStaff Engineer
  • SOSam OkaforCustomer Success

Mobile nav

v1.0.0

The menu button and slide-in panel that replace header links on small screens.

npx shadcn@latest add @lib/mobile-nav