HELIOS UI · GUIDE

Let's begin

Everything you need to go from zero to a working Helios UI project, on one page: what the system is, how to install it, how your AI agent fits in, and where color and type come from.

React Design Systemfor Agentic Interfaces

Helios UI brings reusable React components, interactive data charts, complete application templates and shared design tokens into one system.

Steps

Provided data

total steps

Steps: illustrative source-shaped fixture data
Category	Value
Mon	5,600
Tue	2,200
Wed	1,900
Thu	6,300
Fri	7,100
Sat	5,300
Sun	3,200

Sleep score

Provided data

Sleep score: illustrative source-shaped fixture data
Category	Value
Duration: 7h 50m	49
Bedtime: 20m earlier	29
Interruptions: 5m wake up	20

Most active days

32,459total steps

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

Illustrative activity for Jul, 2026
Date	Steps
2026-07-01	2335
2026-07-02	2898
2026-07-03	3461
2026-07-04	4024
2026-07-05	4587
2026-07-06	4216
2026-07-07	4779
2026-07-08	1490
2026-07-09	2053
2026-07-10	2616
2026-07-11	0
2026-07-12	0
2026-07-13	0
2026-07-14	0
2026-07-15	0
2026-07-16	0
2026-07-17	0
2026-07-18	0
2026-07-19	0
2026-07-20	0
2026-07-21	0
2026-07-22	0
2026-07-23	0
2026-07-24	0
2026-07-25	0
2026-07-26	0
2026-07-27	0
2026-07-28	0
2026-07-29	0
2026-07-30	0
2026-07-31	0

Activity

Provided data

Activity: illustrative source-shaped fixture data
Category	Value
Move	1,592 kcal
Exercise	1h 45m
Running	5.2 km

Your changes have been saved

The latest version is ready for your team.

Notification tone

Notification position

With avatarWith actionsDismiss after 5 seconds

Why Helios UI

You own the source

Copy editable React and Tailwind source with its dependencies. Keep the implementation in your project and change the parts you need.

Built for AI agents

A local MCP server supplies component source, props and semantic tokens so your agent can work with the actual implementation.

Accessible by default

Shared React Aria primitives provide keyboard navigation, focus management and accessible semantics across the library.

Design and code together

Helios branding and recorded foundations connect to reusable examples. The Figma library is maintained separately and stays unchanged here.

Dark mode built in

Semantic tokens resolve light and dark appearances. Change the theme or accent to see the same components adapt.

Data-dense from day one

Interactive chart cards, tables and complete dashboard templates bring real data states and reusable controls together.

Installation

Download the React source archive and install it in a React 19 application. The package includes typed exports, styles, source files and public assets.

Local React package

npm install ./helios-ui-react-0.1.0.tgz

// Import once from your application entry:
import '@helios-ui/react/styles.css';
import {NativeScope, NativeButton} from '@helios-ui/react';

Full installation guide

MCP server

Connect Cursor, VS Code, Claude Code or Codex to the local Helios UI MCP server. Search the catalog, inspect real props and dependencies, and retrieve the source used in the preview.

Connect your agent

Free and Helios UI Pro

Explore all included components and templates in this local preview. Proposed Pro plans use rounded INR pricing; checkout and paid-license activation remain closed.

Free preview

Working React examples, shared semantic tokens, light and dark themes, source downloads and local MCP tools.

Browse components

Helios UI Pro

Preview proposed updates, developer seats and access plans. No action charges you or activates a subscription.

View INR plan previews

Color

Semantic foreground, text, background, border, graph and state roles keep the interface consistent. Light and dark values share the same component API.

Explore color roles

Typography

A shared type scale provides display, title, headline, body and caption roles with four weights. Use the same roles in charts, forms and full application screens.

Build consistent interfaces.A clear hierarchy for every screen.

Readable details, useful labels and balanced spacing.

Inter · 13 roles · 4 weights

Explore typography

HELIOS UI · GUIDE

Let's begin

Everything you need to go from zero to a working Helios UI project, on one page: what the system is, how to install it, how your AI agent fits in, and where color and type come from.

React Design Systemfor Agentic Interfaces

Helios UI brings reusable React components, interactive data charts, complete application templates and shared design tokens into one system.

Steps

Provided data

total steps

Steps: illustrative source-shaped fixture data
Category	Value
Mon	5,600
Tue	2,200
Wed	1,900
Thu	6,300
Fri	7,100
Sat	5,300
Sun	3,200

Sleep score

Provided data

Sleep score: illustrative source-shaped fixture data
Category	Value
Duration: 7h 50m	49
Bedtime: 20m earlier	29
Interruptions: 5m wake up	20

Most active days

32,459total steps

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

Illustrative activity for Jul, 2026
Date	Steps
2026-07-01	2335
2026-07-02	2898
2026-07-03	3461
2026-07-04	4024
2026-07-05	4587
2026-07-06	4216
2026-07-07	4779
2026-07-08	1490
2026-07-09	2053
2026-07-10	2616
2026-07-11	0
2026-07-12	0
2026-07-13	0
2026-07-14	0
2026-07-15	0
2026-07-16	0
2026-07-17	0
2026-07-18	0
2026-07-19	0
2026-07-20	0
2026-07-21	0
2026-07-22	0
2026-07-23	0
2026-07-24	0
2026-07-25	0
2026-07-26	0
2026-07-27	0
2026-07-28	0
2026-07-29	0
2026-07-30	0
2026-07-31	0

Activity

Provided data

Activity: illustrative source-shaped fixture data
Category	Value
Move	1,592 kcal
Exercise	1h 45m
Running	5.2 km

Your changes have been saved

The latest version is ready for your team.

Notification tone

Notification position

With avatarWith actionsDismiss after 5 seconds

Why Helios UI

You own the source

Copy editable React and Tailwind source with its dependencies. Keep the implementation in your project and change the parts you need.

Built for AI agents

A local MCP server supplies component source, props and semantic tokens so your agent can work with the actual implementation.

Accessible by default

Shared React Aria primitives provide keyboard navigation, focus management and accessible semantics across the library.

Design and code together

Helios branding and recorded foundations connect to reusable examples. The Figma library is maintained separately and stays unchanged here.

Dark mode built in

Semantic tokens resolve light and dark appearances. Change the theme or accent to see the same components adapt.

Data-dense from day one

Interactive chart cards, tables and complete dashboard templates bring real data states and reusable controls together.

Installation

Download the React source archive and install it in a React 19 application. The package includes typed exports, styles, source files and public assets.

Local React package

npm install ./helios-ui-react-0.1.0.tgz

// Import once from your application entry:
import '@helios-ui/react/styles.css';
import {NativeScope, NativeButton} from '@helios-ui/react';

Full installation guide

MCP server

Connect Cursor, VS Code, Claude Code or Codex to the local Helios UI MCP server. Search the catalog, inspect real props and dependencies, and retrieve the source used in the preview.

Connect your agent

Free and Helios UI Pro

Explore all included components and templates in this local preview. Proposed Pro plans use rounded INR pricing; checkout and paid-license activation remain closed.

Free preview

Working React examples, shared semantic tokens, light and dark themes, source downloads and local MCP tools.

Browse components

Helios UI Pro

Preview proposed updates, developer seats and access plans. No action charges you or activates a subscription.

View INR plan previews

Color

Semantic foreground, text, background, border, graph and state roles keep the interface consistent. Light and dark values share the same component API.

Explore color roles

Typography

A shared type scale provides display, title, headline, body and caption roles with four weights. Use the same roles in charts, forms and full application screens.

Build consistent interfaces.A clear hierarchy for every screen.

Readable details, useful labels and balanced spacing.

Inter · 13 roles · 4 weights

Explore typography