Blocks
High-level, copy-ready layouts for web apps. Each block uses semantic tokens and supports dark mode automatically.
Area chart
Multi-series SVG area with legend and summary stats.
Auth Layout
Centered card with logo, sign-in, and help links.
Bar list
Ranked list with progress bars — by city, channel, or category.
Card
Container with header, body, footer, and metric variant.
Expandable Table
Row expansion with nested tables or inline sub-rows — valid table DOM for drill-down and hierarchical lists.
Data Table
Full-featured table — sticky header, selection, search, view options, and draggable column reordering.
Donut chart
SVG donut with interactive legend — portfolio and breakdown.
Empty State
Icon, title, description, and CTA for empty and error states.
Filter Bar
Search + select filters + active filter chips.
Input
Input with label, icon, password, error, and disabled states.
KPI spark cards
Metric cards with inline SVG spark lines for trends.
Layout
App-shell composition: sidebar + top nav + content. Bring your own SidebarNav and TopNav.
Notification Panel
Dropdown list of read and unread notifications.
Page Header
Title, breadcrumb, description, and actions (simple and full).
Segmented
Pill-style mutually exclusive switcher for view toggles and time ranges.
Server Table
Same UI as Data Table, with controlled sort/page/search for backend-driven tables.
Stats Grid
Metric card grid for dashboards: units, occupancy, revenue.
User Menu
Avatar dropdown with name, email, settings, and sign out.
Virtual Data Table
Virtualized table for huge datasets — same toolbar and selection model as Data Table, with smooth scrolling at 10k+ rows.