Components

78 components translated from Figma into React and Tailwind, ready to copy into your project. Everything shares the same tokens, so it all fits together.

Foundations

The tokens everything else is built on.

Color

The full palette and semantic tokens.

DisplayTitleHeadlineBody regularMono caption

Typography

Type scale, weights, and text styles.

Base

The everyday building blocks.

Announcement

Dismissible banner for product news.

Avatar

User photo with initials fallback.

Breadcrumb

Path trail with collapsing levels.

Button

Primary, secondary, and danger actions.

Button Group

Fused row of selectable buttons.

Carousel

Slide through cards with snap, arrows and dots.

Checkbox

Animated tick, card variant, two sizes.

Chip

Compact removable filter tokens.

Close Button

The little ×, done properly.

Date Picker

Popover calendar for single dates.

Divider

Single, double, and filled content separators.

Dropdown

Composable menus - teams, models, actions.

File Upload

Drag, validate, and track upload progress.

Icon Button

Square action button, icon only.

Input

Text field with addons and validation.

Input OTP

One-time-code boxes with paste and autofill.

Link Button

Inline text action styled like a link.

Notification

Status messages with icons, avatars, and actions.

Pagination

Page numbers with truncation.

Radio

Gradient dot, card variant, two sizes.

Segmented Control

Sliding pill option switcher.

Select

Single-choice listbox with search.

Slider

Single-value and min/max range selection.

Social Button

Sign-in buttons for 24 providers, logos included.

Switch

On/off toggle with spring motion.

Table

Sortable columns, sticky header.

Tabs

Underline and pill tab lists.

Textarea

Multiline field with auto-grow and character count.

Tree View

Nested folders with selection and keyboard navigation.

Tooltip

Positioned hints on hover and focus.

Blocks

Larger assemblies, ready to drop in.

Agent Thinking

Agent thinking indicators for chat composers.

Composer Loader

Orbiting light band for a working composer.

Composer Panel

Two-row chat input with permission modes.

Composer Attachments

File tiles landing one by one above the prompt.

Auth Card

Sign-in and sign-up blocks with social login.

Web Search

Research trail with the sources an agent opened.

Task List

Streaming agent log that reveals step by step.

Agent Limits

Context window and plan usage limits.

Questionnaire

Plan-mode questions, one step at a time.

Agent Creator

Create an agent’s identity, animated avatar, and voice preferences.

Agent Progress

Collapsible progress for multi-step AI tasks.

Calendar

Full month view with event pills.

Data Grid

Editable spreadsheet with selection, filters, and live summaries.

Data Table

Filters, selection, and pagination wired up.

Notification Center

Grouped activity inbox with tabs and actions.

Settings Modal

Multi-page settings in a controlled dialog.

Sidebar

Floating app navigation with teams menu.

Stat Cards

KPI cards with delta chips or a footer band.

Charts

Data cards for dashboards.

Revenue Chart

This year against last, area over a dashed line.

Activity Rings

Concentric progress rings, Apple style.

Area Chart

Stacked, overlapping or 100% area series.

Bar List

Ranked breakdown rows with share bars and tabs.

Combo Chart

Bars and a line on independent axes.

Contributions

GitHub-style activity heatmap.

Earnings Chart

Bar chart with period comparison.

Funnel Chart

Flow funnel with tapered stages and conversion pills.

Heatmap Chart

Matrix heatmap with a theme-following ramp.

Most Active Days

Weekday bars linked to the rings.

Radar Chart

Filled, dotted, lines, and score radars.

Radial Chart

Rings, gauges, and a stacked half gauge.

Line Chart

Curved or sharp line over a soft area.

Sankey Chart

Flow diagram with tinted links and shares.

Scatter Chart

Correlation dots, bubbles when sized.

Sleep Score

Radial gauge with score breakdown.

Stage Bars

Funnel stages as rounded horizontal pills.

Steps Chart

Daily steps with goal marker.

Templates

Complete screens, wired together.

Chat Starter

Free, deployable chat on your own model key.

Multi-agent Chat

Animated agents, individual and group chat, and a live avatar editor.

AI Chat

Full chat app with code panel and composer.

AI Image Generation

Prompt thread with generation frame and gallery panel.

AI Profile

Contributions profile with heatmap and charts.

Finance Dashboard

Cash-flow sankey, spending rings, and transactions table.

Home Dashboard

KPIs, revenue trend, and customers table.

Marketing Dashboard

Acquisition funnel, spend charts, and campaigns table.

Medical Profile

Patient overview with health charts.

Project Board

Kanban workspace with ticket panels, comments, and token charts.

More Helios application examples