Blocks
High-level, copy-ready layouts for web apps. Each block uses semantic tokens and supports dark mode automatically.
Card
Container with header, body, footer, and metric variant.
Input
Input with label, icon, password, error, and disabled states.
Sidebar Nav
Collapsible sidebar with logo, groups, icons, and user area.
Top Nav
Top bar: hamburger, breadcrumb, search, notifications, avatar.
App Shell
Layout: sidebar + top nav + content area.
Page Header
Title, breadcrumb, description, and actions (simple and full).
Stats Grid
Metric card grid for dashboards: units, occupancy, revenue.
Filter Bar
Search + select filters + active filter chips.
User Menu
Avatar dropdown with name, email, settings, and sign out.
Empty State
Icon, title, description, and CTA for empty and error states.
Notification Panel
Dropdown list of read and unread notifications.
Auth Layout
Centered card with logo, sign-in, and help links.
KPI spark cards
Metric cards with inline SVG spark lines for trends.
Bar list
Ranked list with progress bars — by city, channel, or category.
Donut chart
SVG donut with interactive legend — portfolio and breakdown.
Area chart
Multi-series SVG area with legend and summary stats.