Components
Same catalog as the Felix design system: atoms, molecules, organisms. Import from @felix/ui.
Atoms
- Amount
- Avatar
- Badge
- Bubble
- Button
- Checkbox
- CoinLoader
- Dots
- IconButton
- Input
- Label
- Logo
- Marker
- Progress
- RadioGroup
- Separator
- Skeleton
- Slider
- Spinner
- Switch
- Text
- Textarea
Molecules
- Accordion
- Alert
- Attachment
- Breadcrumb
- Calendar
- Card
- ChoiceCard
- Collapse
- DatePicker
- Dialog
- Drawer
- DropdownMenu
- HoverCard
- Message
- NavigationMenu
- Pagination
- Popover
- Select
- Sheet
- SidebarFooter
- Stepper
- Table
- Tabs
- Toast
- Tooltip
Charts
Trends over time
- Spline line · single / dual
- Gradient spline area
- Step progression
- Stream wave
- Min/max range band
- Pill bars + spline
- Dual-axis · revenue / occupancy
- Financial candlesticks
- Telemetry sparklines
- Line
- Area
- Sparkline
- Series filter + bars + trend
Comparison
- Pill bars · column / row
- Stacked tones
- Dumbbell · plan / actual
- Bullet targets
- Waterfall steps
- Polar radial pillars
- Radar web
- Grouped radial arcs
- Column bar
- Horizontal bar
- Grouped bar
- Stacked bar
- Waterfall
- Radar
Parts of a whole
Distribution and relationships
- Scatter matrix
- Bubble clusters
- Histogram · attendance distribution
- Box plot · revenue spread
- Scatter
- Bubble
- Histogram
Activity and time grids
- Activity heatmap · Emerald
- Activity heatmap · Sky
- Activity heatmap · Violet
- Dot-matrix heatmap
- Day × hour · studio occupancy
- Cohort · member retention
- Gantt · studio timeline
- Heatmap
KPIs and progress
Flows and funnels
- Sankey flow
- Stage funnel
- Funnel
- Dependent task cards
- Process graph
- Animated Mermaid
- Decision tree — queued agent choices, curved links, keyboard commit
- Conversion funnel (Sankey)