Getting Started
UI Library
- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
Donut chart built on Recharts. Accepts any categorical data with a name and value per slice. Colors are driven by the ChartConfig — each key maps to a CSS custom property so themes apply automatically.
Basic Usage
With Title and Description
Browser Distribution
Browser usage share across all sessions
With Legend
Browser Distribution
Hover slices or read the legend below
Variants
Card Variant
Outline Variant
Ghost Variant
Minimal Variant
Demographic Grid
Four charts in a 2×2 grid — the pattern used in Bridge for group demographic breakdowns.
Gender
Age Range
Employment
Housing