1,048 Get Started

v1.037+ Components, 10 Statistical & SaaS Blocks, Light & Dark Mode

Agentic components, statistical blocks & SaaS dashboards.

Buttons, data tables, statistical widgets, calendars, command palettes, and full-page templates—crafted with Tailwind CSS v4 & Radix UI.

Install for free Browse all components

Live Accent:

main/ethereal-ui

100%

hero-ui.png

1.8 MB

84%

payroll.csv

TSX

tokens.ts

4.2 KB

Generate a dark & light mode KPI card...

Composer attachments

File tiles landing one by one above the prompt, each with live upload progress.

Ran 3 registry queries18ms

What teams need in a design system

SourcesRadixTW v4ARIA

𝕏Searched for zero-runtime CSS tokens

Indexing 37 accessible primitives...

Command & search stream

Real-time search traces, keyboard command palette, and source citations.

Context window820k / 1M (82%)

Plan usage limits - Enterprise (5x)

5-hour burstResets in 2 hr 46 min 38%

Weekly - all modelsResets Tue 9:00 PM 64%

Usage & quota statistics

Context window usage with multi-segment token breakdown and plan limits.

Total Results

48 customers

All (1 selected)

JCJohn Clarkson

$4,200

SJSarah Jenkins

$2,850

MVMarcus Vance

$1,920

Filter, sort, and select complex datasets in a responsive enterprise table.

Excellent+4.2%

98

Uptime SLA49/50

Cache Hit29/30

Important alerts

12 this week

High P99 Latency

us-east-1 spiked to 142ms

Rate Limit 85%

Auto-scaling worker pool

Statistical & health widgets

Health widgets with live charts, activity rings, KPI counters, and alerts.

SRSaeful Rohman

PRO

Quick Search⌘K

Collapsible navigation with quick search, badges, and account controls.

Saeful Rohman

@saefulrdevs • Lead Architect

Follow

$7,402

MRR Impact

1,428

Commits

99.4%

Test Pass

Contributor & metric profile

Contributor activity, token stats, and streak insights at a glance.

Executing step 3 of 5...60%

Read workspace configuration

Install light & dark semantic tokens

Compile 37 Radix UI primitives

4Mount statistical dashboard blocks

5Run Husky lint & production build

Agent workflow progress

Live multi-step progress tracker and interactive completion states.

Generate KPI blockAdd dark modeExport CSV

⑂ main•project-sea ▾

Prompt composer

Rich multi-line prompt input with branch context, attachments, and quick chips.

✦Thinking1.2s

⌕Searching the docs37 matches

▤Reading token filesglobals.css

✎Writing the answerStreaming...

Streaming reasoning trace

Step-by-step reasoning states and live skeleton transitions for AI & SaaS apps.

Featured System01 / 04

Design Token Engine

Zero-Runtime Light & Dark Theme Architecture

Explore →

Media & feature carousel

Smooth multi-slide carousels and rich spotlight cards with keyboard controls.

August 2026 New event

12Sync

13

14Release

15Review

16

17Audit

18

19Demo

20

21Ship

Event calendar & scheduler

Monthly and range calendars with event pills, keyboard navigation, and popovers.

ENTERPRISE STATISTICAL BLOCKS

Real-time KPI Cards, Sparklines & Telemetry Blocks

Interactive statistical blocks ready to drop into any SaaS analytics or executive dashboard.

Net Settled Revenue +18.4%

$128,430

Across 428 enterprise subscriptions

Active Workspace Users

24,892

94.2% daily retention score

Enterprise Tier68%

Global Edge P95 Latency99.99% SLA

19ms

24 edge regions operational

30 days agoToday

Release ScheduleNov 2026

Nov 14: v1.0 Audit14:00 UTC

Interactive Workspace Preview

Full-Page Dashboard Templates

Switch between Executive Analytics, Customers Data Table, Workspace Settings, and Base Primitives live.

Open full templates →

Analytics Overview

Track recurring revenue, subscriber retention, and account expansion.

Monthly Recurring Revenue+14.2%

$128,430

Compared to $112.4k last month

Active Subscribers+8.4%

4,892

312 new trials converted

Net Revenue Retention+2.1%

118.6%

Enterprise cohort expansion

Logo Churn Rate-0.4%

1.24%

Lowest in 4 quarters

Revenue & Subscriber Growth

+14.2%

Net settled volume across active subscriptions

Oct 08

Oct 12

Oct 16

Oct 20

Oct 24

Oct 28

Nov 01

Nov 06

Monthly API Usage768,000 / 1,000,000 reqs

77%

Resets in 9 days • Pay-as-you-go enabled

Recent Activity

LO

Linear Orbit Inc. upgraded to Enterprise Annual

+$4,200 MRR • Invoice #INV-2094 paid

12m ago

RL

Raycast Labs added 12 team seats

Pro Plan expansion •Prorated billing applied

42m ago

ER

Weekly financial summary exported

Generated by Elena Rostova

2h ago

Top Accounts

Sorted by monthly recurring revenue

LO

Linear Orbit Inc.

linearorbit.io

Enterprise

$4,200+18.4%

RL

Raycast Labs GmbH

raycastlabs.de

Enterprise

$3,150+12.1%

NA

Northstar Analytics

northstar.co

Scale

$1,950+9.4%

Base Primitives

37 Accessible Components

Every component is documented individually with live Light & Dark mode previews, variant sections, and CLI/Manual installation.

Open Component Docs →

Accordion

Vertically stacked collapsible panels for FAQs, settings sections, and progressive disclosure.

/components/accordion →

Announcement

A compact pill banner with a highlight badge and directional arrow for product launches and changelogs.

/components/announcement →

Avatar

A photo or initials avatar in four sizes (20 / 24 / 32 / 36px) with neutral and blue initial tints - used across tables, breadcrumbs, menus, and the sidebar.

/components/avatar →

Badge

Compact status indicators and semantic labels with optional dot indicators for tables, cards, and navigation items.

/components/badge →

Breadcrumb

Displays the current page hierarchy within a workspace so users can navigate back to parent views.

/components/breadcrumb →

Button

Interactive button primitive with six semantic variants, four sizes, and built-in loading spinner support.

/components/button →

Button Group

Groups related action buttons or view toggles into a unified segmented container.

/components/button-group →

Carousel

A stepped card switcher for cycling through metric highlights, onboarding steps, or media slides.

/components/carousel →

Checkbox

Accessible Radix UI checkbox control for forms, bulk table row selection, and filter lists.

/components/checkbox →

Chip

Interactive pill tags with optional remove buttons for active filters, multi-select inputs, and categories.

/components/chip →

Close Button

Standardized dismiss button for modals, drawers, alerts, and toast notifications.

/components/close-button →

Color Picker

Hex color input paired with preset brand swatches for workspace customization and chart series coloring.

/components/color-picker →

Combobox

Searchable dropdown selector with instant filtering, checkmarks, and optional right-aligned metadata badges.

/components/combobox →

Command Palette

Keyboard-first Cmd+K search modal with categorized results and shortcut hints.

/components/command-palette →

Context Menu

Right-click contextual action menu with keyboard shortcut labels and destructive item styling.

/components/context-menu →

Date Calendar

Inline month calendar grid for selecting single dates or scheduling events.

/components/date-calendar →

Date Picker

Popover date-range selector with common analytics reporting presets (Last 7 days, Last 30 days, YTD).

/components/date-picker →

Divider

Horizontal structural hairline with an optional centered section label.

/components/divider →

Drawer

Slide-over side panel anchored to the left or right viewport edge for inspecting table rows or forms.

/components/drawer →

Dropdown

Accessible menu overlay triggered by a button for row actions, profile menus, and quick settings.

/components/dropdown →

File Upload

Drag-and-drop file upload zone with file size formatting and upload progress bars.

/components/file-upload →

Icon Button

Compact square button designed specifically for toolbar icons, table actions, and navigation controls.

/components/icon-button →

Input

Single-line text input supporting leading/trailing icons and fixed text prefixes or suffixes.

/components/input →

Modal

Centered dialog window with backdrop blur, focus trapping, and accessible keyboard dismissal.

/components/modal →

Pagination

Page number navigation bar with previous and next buttons for multi-page tables and lists.

/components/pagination →

Popover

Floating card anchored to a trigger button for quick settings, filters, and inline forms.

/components/popover →

Progress

Linear and circular progress bars for quota consumption, onboarding completion, and file uploads.

/components/progress →

Radio Group

Mutually exclusive card selection group for billing plans, roles, and configuration options.

/components/radio-group →

Select

Native-feeling accessible dropdown menu built on Radix UI Select primitives.

/components/select →

Skeleton

Animated placeholder shapes that preview the layout of cards and tables while data is loading.

/components/skeleton →

Slider

Range input control for selecting numeric values or percentages within a defined interval.

/components/slider →

Switch

Two-state toggle switch built on Radix UI Switch for instant boolean preferences.

/components/switch →

Table

Clean, responsive tabular layout with subtle row hover states, avatars, and status badges.

/components/table →

Tabs

Layered content views supporting Segmented, Underline, and Pill trigger styles.

/components/tabs →

Textarea

Multi-line text input with optional automatic height expansion as the user types.

/components/textarea →

Toast

Non-disruptive notification card with semantic status icons (success, info, warning, error).

/components/toast →

Tooltip

Compact floating label that appears on hover or keyboard focus to explain icon controls.

/components/tooltip →

Statistical Charts

6 Interactive Statistical Charts

Zero-dependency SVG charts for Area velocity, Dual-Series Bar, Telemetry Line, Donut breakdown, Radial SLA rings, and Activity Heatmaps.

View all charts →

Area Chart

Interactive SVG Area & Line velocity chart with timeframe switching (7D / 30D / 90D), gradient fill, comparison line, and live hover crosshair.

npx ethereal-ui add area-chart →

Bar Chart

Dual-series comparative bar chart for cohort conversion, monthly revenue, and quota benchmarks with hover value tooltips.

npx ethereal-ui add bar-chart →

Line Chart

Multi-series telemetry line chart for tracking P95/P50 API latency, request throughput, and time-series benchmarks.

npx ethereal-ui add line-chart →

Donut Chart

Multi-segment SVG ring chart with interactive segment highlighting, dynamic center total, and breakdown legend.

npx ethereal-ui add donut-chart →

Radial Ring Chart

Concentric multi-ring KPI health score gauge for SLA uptime, cache efficiency, and quota completion.

npx ethereal-ui add radial-chart →

Activity Heatmap

64-day contribution and production deployment intensity matrix with interactive cell hover inspection.

npx ethereal-ui add heatmap-chart →

Enterprise Blocks

10 Dashboard & SaaS Blocks

Multi-component organisms for sidebars, KPI grids, filterable data tables, RBAC directories, and billing plans.

View all blocks →

Navigation FREE

Sidebar

Collapsible application sidebar with workspace switcher, nested sub-menus, badge counters, and user profile footer.

npx ethereal-ui add sidebar →

Navigation FREE

Header Navbar

Top application bar featuring breadcrumb navigation, Cmd+K quick search trigger, and notification bell.

npx ethereal-ui add header-navbar →

Stat Card

KPI metric card with percentage trend badge, comparison subtitle, and inline SVG sparkline.

npx ethereal-ui add stat-card →

Metric Grid

Four-column responsive KPI grid displaying core business metrics and sparkline trends.

npx ethereal-ui add metric-grid →

Data Table

Full-featured customer data table with search toolbar, status tabs, column sorting, bulk selection, pagination, and a slide-over details drawer on row click.

npx ethereal-ui add data-table →

Filter Bar

Multi-condition filter bar with search input, removable filter chips, date-range picker, and list/grid view toggle.

npx ethereal-ui add filter-bar →

Profile Form

Account profile form block with avatar upload header, prefix username input, timezone select, and auto-resizing bio.

npx ethereal-ui add profile-form →

Team Members

Workspace team directory with online presence avatars, role selector dropdowns, and member invitation flow.

npx ethereal-ui add team-members →

Security Settings

Two-factor authentication toggles (TOTP & WebAuthn passkeys) paired with an active device session list.

npx ethereal-ui add security-settings →

Billing Card

Subscription plan overview with seat/storage usage meters and default payment method management.

npx ethereal-ui add billing-card →

Page Templates

3 Full-Page SaaS Reference Views

View all templates →

Analytics Dashboard

Complete SaaS analytics dashboard combining the collapsible sidebar, 4 KPI cards, revenue chart, activity feed, and top accounts table.

Open interactive template →

Customer Directory

Full-page customer management view featuring the filter bar, sortable data table, and slide-over customer details drawer.

Open interactive template →

Workspace Settings

Tabbed organization settings portal covering profile details, team members, billing usage, API keys, and security.

Open interactive template →