Component Showcase
All 20 design system components with live theming support.
Button
Variants
Sizes
States
Text Input
This field is required
Looks good!
Checkbox
Toggle
Select
Dropdown
Selection required
Tag
Colors
Outline & Dismissible
Notification
Inline
Success
Warning
Error
Info
Toast
Loading / Skeleton
Spinners
Skeleton Shapes
Table Skeleton
Tabs
Underline Variant
Overview content goes here. This tab shows a high-level summary.
Pill Variant
Showing all items.
Modal
Overflow Menu
Date Picker
Search
Form
Pagination
Data Table
Features: sorting (click headers), selection (checkboxes), inline editing (double-click Name/Email), pagination, and batch actions.
Charts
28 chart variants across 6 chart types — Bar, Line, Area, Pie/Donut, Composed, and Radial/Gauge. All charts support light, dark, and high-contrast themes.
bar/vertical
Monthly revenue — single series
bar/horizontal
Deals closed by rep
bar/grouped
Closed vs pipeline by rep
bar/stacked
Expense + profit composition
bar/stacked-percent
Normalized to 100%
bar/diverging
Gain / loss from zero baseline
bar/waterfall
Value build-up breakdown
line/single
Weekly active users
line/multi
Users vs sessions over time
line/stepped
Plan tier changes
line/dashed-target
Actual vs target
line/with-threshold
Users with SLA threshold
area/single
Support ticket volume
area/gradient
Ticket volume with gradient fill
area/stacked
Traffic by source
area/stacked-percent
Share of traffic (100%)
area/range
Confidence interval band
pie/standard
Plan distribution
pie/donut
With center metric
pie/semi
Lead source split
pie/nested
This Q vs last Q
composed/bar-line
Revenue bars + margin % line
composed/bar-area
Profit bars over revenue backdrop
composed/multi-axis
Independent Y-axes — revenue (left) and margin % (right)
radial/gauge
Quota attainment
radial/progress
Sprint completion
radial/multi-ring
KPI dashboard rings
radial/radar
Feature coverage
KPI Card
Simple
Total Revenue
Active Users
Open Tickets
Avg Response
With Trend
Revenue
Sessions
Bounce Rate
With Delta
Revenue
vs last month
Users
vs last week
Orders
no change
Items Sold
vs yesterday
With Progress
Q1 Target
72% of $67,000
Sprint Velocity
84% of 100 pts
Disk Usage
Quota
With Icon
Revenue
Active Users
Open Tickets
Uptime
List / Feed
Activity Feed
John closed deal "Acme Enterprise" for $24,000
Today at 2:14 PM
Sarah added 3 new contacts to "Globex Corp"
Today at 1:45 PM
Mike updated the Q1 forecast to $1.2M
Today at 11:30 AM
Lisa assigned ticket #482 to the engineering team
Yesterday at 4:52 PM
System backup completed successfully
Yesterday at 2:00 AM
Notification List
Deployment succeeded
v2.4.1 deployed to production
5 min ago
High CPU usage detected
Server us-east-1 at 92% for 10 minutes
12 min ago
Payment failed
Invoice #1042 charge declined
1 hour ago
New team member added
alex@company.com joined the Design team
3 hours ago
Ranked List
Acme Corporation
Enterprise
Globex Inc.
Mid-market
Initech LLC
Enterprise
Hooli Systems
Startup
Pied Piper
Startup
With Avatar
Alice Johnson
Closed 12 deals this month
Bob Smith
Updated pipeline forecast
Carol Williams
Added 5 new leads
Dave Brown
Completed onboarding
With Table
| Account | Deal | Value | Status |
|---|---|---|---|
| Acme Corp | Enterprise License | $24,000 | Won |
| Globex Inc | Pro Plan Upgrade | $12,500 | Negotiating |
| Initech | API Access | $8,200 | Won |
| Hooli | Starter Plan | $3,400 | Lost |
| Pied Piper | Custom Integration | $18,000 | Negotiating |
Breadcrumb
Header
The main header with theme toggle is shown at the top of this page.
Side Nav
The full side nav with collapsible sections is shown on the left side of this page.