# helixui > An AI-friendly React design system. Tokens are JSON in W3C DTCG format with descriptions; every component is one self-describing `spec.md` (props, slots, tokens, a11y, examples). A static manifest ships with every build. Built so a model can answer "what tokens exist?" or "how do I use Button?" from a single fetch. _helixui.llms/v1 · generated 2026-06-18 · build `444df7f` · canonical at https://helixui.ai_ ## Read this first - [DESIGN.md](https://helixui.ai/DESIGN.md): helixui's own design statement. Principles, visual character, voice, component surface in one file. The single best entry point for any AI tool. - [DESIGN_MD_FORMAT.md](https://helixui.ai/DESIGN_MD_FORMAT.md): The endorsed schema for project-level DESIGN.md files that adopt helixui. Use `helixui-prompt init-design` to scaffold. - MCP server: `npx @helixui/mcp` (or `claude mcp add helixui -- npx -y @helixui/mcp`). Live tools — search components, validate JSX, fix JSX, express DNA — backed by these same artifacts. Best for an agent that can run tools rather than only fetch URLs. ## Site - [Marketing landing](https://helixui.ai/): Why helixui and what it looks like. ## Docs overview - [helixui docs](https://helixui.ai/docs/): Tokens, components, and AI-friendly references for helixui. ## Principles - [Principles](https://helixui.ai/docs/principles): The eight non-negotiable decisions that define helixui as a system rather than a pile of components. ## Compatibility - [Compatibility matrix](https://helixui.ai/docs/compatibility): Exact Node, React, framework, and browser versions helixui has been tested against. Use it before betting your roadmap on us. ## Tokens - [CSS-variable IntelliSense](https://helixui.ai/docs/tokens/intellisense): Get autocomplete and type-safety on every `--helixui-*` CSS variable — in TypeScript, in CSS files, and in your editor. - [Motion](https://helixui.ai/docs/tokens/motion): Duration and easing tokens, plus the motion utility classes shipped in @helixui/core. - [Tokens overview](https://helixui.ai/docs/tokens/overview): How helixui design tokens are structured. ## DNA — theme engine - [DNA — the helixui theme engine](https://helixui.ai/docs/dna/overview): A theme genome you can clone, mutate, breed, and evolve. Eight genes, dominant/recessive alleles, expressed into CSS custom properties at runtime. ## Components - [ActionSheet](https://helixui.ai/docs/components/action-sheet): An iOS-style modal sheet that slides up from the bottom edge with a list of actions. Different from Sheet — Sheet is a side drawer, ActionSheet is a vertical action menu. - [AppShell](https://helixui.ai/docs/components/app-shell): A responsive application layout — sticky header, persistent sidebar on desktop, sidebar hidden on mobile (caller composes a Sheet drawer). - [AttachmentTile](https://helixui.ai/docs/components/attachment-tile): A compact tile for a file attachment — thumbnail or icon + name + size + optional remove or upload progress. - [AvatarGroup](https://helixui.ai/docs/components/avatar-group): A row of overlapping avatars with an optional overflow chip — `+N` for hidden members. - [Avatar](https://helixui.ai/docs/components/avatar): A user or entity image with text fallback when the image is missing or fails to load. - [Badge](https://helixui.ai/docs/components/badge): A small inline label for status, counts, or categories. - [Banner](https://helixui.ai/docs/components/banner): A persistent page-level alert. Stronger than Callout, less interruptive than Toast or Dialog. - [BottomNav](https://helixui.ai/docs/components/bottom-nav): A fixed bottom tab bar — primary navigation pattern on mobile. Items can be links or buttons; supports an active state, optional icon, and a number/dot badge. - [Box](https://helixui.ai/docs/components/box): A neutral container with padding and margin shorthands wired to space tokens. - [Breadcrumb](https://helixui.ai/docs/components/breadcrumb): A trail of pages above the current page. The last item is treated as the current page. - [Button](https://helixui.ai/docs/components/button): Triggers an action when clicked. - [Calendar](https://helixui.ai/docs/components/calendar): A month-view date picker. Internationalized via @internationalized/date — supports any calendar system, not just Gregorian. - [Callout](https://helixui.ai/docs/components/callout): An inline message banner — info, success, warning, danger, or neutral. - [Card](https://helixui.ai/docs/components/card): A surface container with three elevation styles. - [Carousel](https://helixui.ai/docs/components/carousel): A horizontal scroll-snap row of items. Native scroll on mobile (swipe); hidden arrows on hover for desktop; optional dots showing pagination. - [Chart](https://helixui.ai/docs/components/chart): Unified chart surface backed by either Chart.js or Recharts. Both engines accept the same `` shape (labels + datasets); the adapter translates to engine-native formats internally. Both engines lazy-load and are declared as optional peer dependencies — install only what you use. - [ChatComposer](https://helixui.ai/docs/components/chat-composer): A multi-line message composer with auto-resize, Enter-to-send (Shift+Enter for newline), and slots for attachments and toolbar buttons. - [ChatHeader](https://helixui.ai/docs/components/chat-header): The top bar of a single conversation — avatar, title, subtitle, right-aligned actions. - [ChatList](https://helixui.ai/docs/components/chat-list): A scrolling container for ChatMessages with sticky-to-bottom auto-scroll. When the user has scrolled up to read history, new messages do NOT yank them back. - [ChatMessage](https://helixui.ai/docs/components/chat-message): A single message in a chat — user / assistant / system role, bubble or inline (Slack-style) variant, optional avatar / name / time / footer. - [Checkbox](https://helixui.ai/docs/components/checkbox): A binary checkbox with indeterminate state. - [CodeBlock](https://helixui.ai/docs/components/code-block): A fenced code display with language label and copy button. Built-in tokenizer for ts / js / py / json / bash; bring your own highlighter for others. - [CodeEditor](https://helixui.ai/docs/components/code-editor): An editable code surface backed by either CodeMirror 6 or Monaco. Pick the engine via a single prop. Both engines lazy-load and are declared as optional peer dependencies — install only what you use. - [Collapsible](https://helixui.ai/docs/components/collapsible): A toggleable disclosure panel — show or hide a chunk of content behind a header. - [CollapsingHeader](https://helixui.ai/docs/components/collapsing-header): An iOS-style header that fades from a large hero title at the top to a compact title with actions when the page is scrolled. - [ColorPicker](https://helixui.ai/docs/components/color-picker): An HSB color picker — saturation/brightness area, hue slider, and hex input. Available inline or in a popover. - [CommandPalette](https://helixui.ai/docs/components/command-palette): A Cmd+K command palette — searchable list of actions in a modal, with keyboard navigation and grouping. - [CurrencyInput](https://helixui.ai/docs/components/currency-input): Locale-aware currency input. Formats on blur, parses on the fly. Uses Intl.NumberFormat for symbols, separators, and precision. - [DataTable](https://helixui.ai/docs/components/data-table): A full-featured table primitive — sortable, filterable, selectable, paginated. Works for read-only display and for selection-driven workflows. Zero external dependencies. - [DateField](https://helixui.ai/docs/components/date-field): Segmented date input — month / day / year (or whatever the user's locale prefers). Built on react-aria-components. - [DatePicker](https://helixui.ai/docs/components/date-picker): Segmented date input plus a popover calendar. Pick a date by typing, arrow keys, or clicking the grid. - [DateRangePicker](https://helixui.ai/docs/components/date-range-picker): Two segmented date inputs (start + end) plus a popover range calendar. - [DateTimePicker](https://helixui.ai/docs/components/date-time-picker): Date + time picker — segmented date input, time field, and a popover calendar. For meeting times, appointment slots, scheduled posts. - [Dialog](https://helixui.ai/docs/components/dialog): A modal that traps focus and dims the page behind it. Use for tasks that require completion before continuing. - [HelixUIDNAProvider](https://helixui.ai/docs/components/dna-provider): Applies a `DNA` (helixui theme genome) to a wrapping div. Every component inside re-renders under the genome's accent / chroma / radius / density / typography / surface / motion / lightness genes via cascading CSS variables — no JS rerender beyond a style mutation. - [EmptyState](https://helixui.ai/docs/components/empty-state): A centered placeholder for "no data yet" — icon, title, description, and an action. - [FAB](https://helixui.ai/docs/components/fab): Floating action button — circular by default, or pill (`extended`) with an icon + label. Fixed-positioned at the bottom-right by default; place yourself with `positioned={false}`. - [Field](https://helixui.ai/docs/components/field): A vertical layout for label + control + description + error message. Use with non-RAC controls; RAC inputs (TextInput, Checkbox, etc.) already accept `label`/`description`/`errorMessage` props. - [FileUpload](https://helixui.ai/docs/components/file-upload): Drag-and-drop file upload with progress, errors, and accept/size filtering. Pair with your own upload pipeline. - [Flex](https://helixui.ai/docs/components/flex): A flexbox container with direction, alignment, and gap as first-class props. - [FloatingBar](https://helixui.ai/docs/components/floating-bar): A pinned action bar that floats over content — typically used for bulk actions on selected items. - [Form](https://helixui.ai/docs/components/form): A `
` wrapper from react-aria-components that surfaces validation errors per-field via the `validationErrors` prop. - [Grid](https://helixui.ai/docs/components/grid): A CSS grid container. Pass a number for equal columns, or any raw track string. - [IconButton](https://helixui.ai/docs/components/icon-button): A square button containing only an icon. Requires an accessible label. - [InputGroup](https://helixui.ai/docs/components/input-group): A horizontal layout for multiple controls. With `attached`, children share a single rounded border. - [List](https://helixui.ai/docs/components/list): A denser data list — feed, inbox, settings rows. Each item has media / primary / secondary / trailing slots. - [Menu](https://helixui.ai/docs/components/menu): A floating list of commands attached to a trigger. - [MultiSelect](https://helixui.ai/docs/components/multi-select): A combobox that accepts multiple values, displayed as removable tags inline. - [NavigationMenu](https://helixui.ai/docs/components/navigation-menu): A vertical navigation list with collapsible sections. Use for app sidebars and side navs. - [NumberField](https://helixui.ai/docs/components/number-field): A numeric input with locale-aware parsing, optional +/- steppers, min/max/step, and validation. - [NumericKeypad](https://helixui.ai/docs/components/numeric-keypad): An iOS/Android-style 3×4 numeric keypad with optional letter sub-labels (ABC, DEF, …). Use for PIN entry, banking apps, or custom input flows where the system keyboard is unwanted. - [PageHeader](https://helixui.ai/docs/components/page-header): The top of a page — title, description, breadcrumb, and a right-aligned actions slot. - [Pagination](https://helixui.ai/docs/components/pagination): Page-by-page navigation with previous/next buttons, page numbers, and ellipses. - [PinInput](https://helixui.ai/docs/components/pin-input): A row of single-character cells for PIN / OTP entry. Auto-advances on type, supports paste-to-fill, backspace-to-previous, arrow navigation, and SMS one-time-code autofill. - [Popover](https://helixui.ai/docs/components/popover): A floating panel anchored to a trigger. Use for ephemeral content that doesn't justify a Dialog. - [PresenceDot](https://helixui.ai/docs/components/presence-dot): A small status dot — online / away / busy / offline. Use standalone or attached to an Avatar. - [PriceTag](https://helixui.ai/docs/components/price-tag): A formatted currency price label with optional strike-through original price and sale-percentage chip. - [ProgressBar](https://helixui.ai/docs/components/progress-bar): Linear progress indicator. Determinate when given a `value`; indeterminate (looping shimmer) when `value` is omitted. - [PromptSuggestions](https://helixui.ai/docs/components/prompt-suggestions): A row (chips) or grid (cards) of suggested prompts. Used at the start of an empty AI conversation or as follow-up suggestions after a response. - [PullToRefresh](https://helixui.ai/docs/components/pull-to-refresh): A scroll container that detects a downward pull at the top of its content and runs an async refresh callback when released past a threshold. - [RadioCard](https://helixui.ai/docs/components/radio-card): A radio option styled as a card. Use inside a RadioGroup when each option needs more space (icon, title, description). - [RadioGroup](https://helixui.ai/docs/components/radio-group): A list of mutually exclusive options. Use Radio components as children. - [Rating](https://helixui.ai/docs/components/rating): A star rating control. Interactive by default — click or tap to set; supports half-star precision and a read-only display mode. - [RichTextEditor](https://helixui.ai/docs/components/rich-text-editor): WYSIWYG editor backed by TipTap (built on ProseMirror). Lazy-loads the engine and every extension; declared as optional peer dependencies. Ships a default toolbar but exposes an imperative handle for fully custom UI. - [SafeArea](https://helixui.ai/docs/components/safe-area): A wrapper that reserves space for the device's safe-area insets — notch, status bar, home indicator. Reads `env(safe-area-inset-*)` and applies the value as padding (default) or margin to the chosen edges. - [SegmentedControl](https://helixui.ai/docs/components/segmented-control): A grouped row of toggle buttons for picking between a small number of mutually exclusive views. - [Select](https://helixui.ai/docs/components/select): A single-value picker rendered as a popover listbox. - [Sheet](https://helixui.ai/docs/components/sheet): A modal panel that slides in from a screen edge. Use for navigation, filters, or longer task flows on mobile. - [Sidebar](https://helixui.ai/docs/components/sidebar): A vertical navigation rail with grouped items. Designed for AppShell's sidebar slot, also usable inside a Sheet on mobile. - [Skeleton](https://helixui.ai/docs/components/skeleton): A shimmering placeholder for content that's still loading. - [Slider](https://helixui.ai/docs/components/slider): A horizontal slider for a single value or a range. Pass an array `value`/`defaultValue` to get a range slider with two thumbs. - [Sparkline](https://helixui.ai/docs/components/sparkline): Tiny inline trend visualization rendered as pure SVG. No peer dependencies. Pairs with `` for KPI tiles, with `` cells for per-row trends, or with `` for full-size views. - [Spinner](https://helixui.ai/docs/components/spinner): An indeterminate loading indicator. - [Stack](https://helixui.ai/docs/components/stack): Arrange children in a column (default) or row, with token-aware gap. - [StatCard](https://helixui.ai/docs/components/stat-card): A KPI display — label, big value, a delta vs previous period, and an optional description line. - [Stepper](https://helixui.ai/docs/components/stepper): A horizontal or vertical sequence of steps with done / current / pending / failed status. Use for onboarding flows, multi-step forms, or check-out funnels. - [StreamingIndicator](https://helixui.ai/docs/components/streaming-indicator): An inline marker placed at the end of streaming LLM text — blinking caret, pulsing block, or three dots. - [SwipeableListItem](https://helixui.ai/docs/components/swipeable-list-item): A list row that reveals leading or trailing actions when the user swipes left or right. Pass the row content as `children`; pass actions for either edge. - [Switch](https://helixui.ai/docs/components/switch): A two-state toggle. Use when a setting takes effect immediately; use Checkbox in forms. - [Table](https://helixui.ai/docs/components/table): An interactive data table with selection, sorting, keyboard navigation, and a screen-reader-friendly grid. - [Tabs](https://helixui.ai/docs/components/tabs): Switch between related views without navigating away. - [TextInput](https://helixui.ai/docs/components/text-input): A single-line text input with built-in label, description, error, and prefix/suffix slots. - [Text](https://helixui.ai/docs/components/text): Typography primitive — render any element with token-driven size, weight, tone, alignment. - [Textarea](https://helixui.ai/docs/components/textarea): A multi-line text input with optional label, description, and error. - [ThemeProvider](https://helixui.ai/docs/components/theme-provider): Sets the current theme. HelixUI tokens are scoped to `[data-theme=\"light\"|\"dark\"]`; ThemeProvider applies that attribute and exposes a `useTheme` hook. - [ThinkingBlock](https://helixui.ai/docs/components/thinking-block): A collapsed reasoning / chain-of-thought block. Use to present an LLM's intermediate thought process in a non-distracting way. - [Toast](https://helixui.ai/docs/components/toast): Transient messages that announce a background result. Mount `` once; call `toast.success(...)` from anywhere. - [ToolCall](https://helixui.ai/docs/components/tool-call): A collapsible card representing a single tool / function call from an LLM — name, status, optional summary line, and expandable input / output sections. - [Tooltip](https://helixui.ai/docs/components/tooltip): A short, on-hover/on-focus label for a control. Use for icon-only buttons or to expand abbreviations. - [TypingIndicator](https://helixui.ai/docs/components/typing-indicator): Three bouncing dots inside a pill — shown while a participant is composing a message. ## Slides — PPTX export - [Authoring guide](https://helixui.ai/docs/slides/authoring): Patterns for building real decks with @helixui/slides — title slides, agendas, charts, comparisons, and data-driven generation. - [Components](https://helixui.ai/docs/slides/components): Every primitive in @helixui/slides — props, defaults, and a one-line example. - [Exporting to PPTX](https://helixui.ai/docs/slides/exporting): How @helixui/slides converts your React deck into a native .pptx — the lazy peer dep, the tree walker, image inlining, and the metadata you can attach. - [Overview — @helixui/slides](https://helixui.ai/docs/slides/overview): PPTX-compatible slide primitives plus a lazy pptxgenjs exporter. Build presentations declaratively in React; render to the web; export to .pptx. ## Document — DOCX export - [Authoring guide](https://helixui.ai/docs/document/authoring): Patterns for building real documents — invoices, briefs, RFCs, changelogs — with @helixui/document. - [Components](https://helixui.ai/docs/document/components): Every primitive in @helixui/document at a glance — props, defaults, and what they map to in the exported .docx file. - [Exporting](https://helixui.ai/docs/document/exporting): How exportToDocx works — async export, file metadata, blob output, image inlining, fonts. - [Overview — @helixui/document](https://helixui.ai/docs/document/overview): DOCX-compatible document primitives plus a lazy `docx` exporter. Build Word documents declaratively in React; render to the web; export to .docx. ## Integrations - [AGENTS.md (generic agents)](https://helixui.ai/docs/integrations/agents-md): Drop-in AGENTS.md template for any AI tool that follows the agentsmd.dev convention — Aider, OpenHands, Sweep, Devin, and others. - [Claude Code](https://helixui.ai/docs/integrations/claude-code): Wire @helixui/mcp into Claude Code so Claude can search components, validate JSX, and breed DNAs from inside your terminal. - [GitHub Copilot](https://helixui.ai/docs/integrations/copilot): Drop a copilot-instructions.md into your repo so GitHub Copilot generates helixui-aware code. - [Cursor](https://helixui.ai/docs/integrations/cursor): Wire helixui into Cursor — .cursorrules template + MCP wiring so Cursor generates helixui components with correct tokens on the first try. - [Figma — Token Studio](https://helixui.ai/docs/integrations/figma-token-studio): helixui's DTCG tokens import directly into Token Studio for Figma. Designers get every color, spacing, radius, and font scale without us shipping a Figma library. - [AI tool integrations](https://helixui.ai/docs/integrations/overview): helixui is built so AI coding agents can read it as easily as you can. This section is the wiring guide for each tool — Claude Code, Cursor, GitHub Copilot, Windsurf, and more. - [React Server Components](https://helixui.ai/docs/integrations/rsc): helixui's relationship with RSC, the Next.js App Router, Remix, Astro Islands, and the rest of the framework matrix. Where it works, where it works with a tweak, and where you have to opt out. - [Tailwind CSS](https://helixui.ai/docs/integrations/tailwind): helixui and Tailwind coexist cleanly. helixui owns components and tokens; Tailwind owns layout utilities. Here's the wiring. - [Windsurf](https://helixui.ai/docs/integrations/windsurf): Wire helixui into Codeium Windsurf via its built-in MCP support. ## Recipes - [Forms with react-hook-form + Zod](https://helixui.ai/docs/recipes/forms): helixui's canonical form story. Type-safe validation, accessible errors, optimistic submits. - [Recipes](https://helixui.ai/docs/recipes): How to compose helixui for common needs. Recipes are *strategies*; blocks are code you copy. - [Multi-format exports — one tree, three surfaces](https://helixui.ai/docs/recipes/multi-format-exports): Build a quarterly report as a React tree. Render it on the web, export to PPTX for the customer call, export to DOCX for the legal review. Same source. - [Theme switching at runtime](https://helixui.ai/docs/recipes/theme-switching): Wire HelixUIDNAProvider to a user preference (localStorage / cookies / your account API) without a layout flash. ## Blocks - [Comment thread](https://helixui.ai/docs/blocks/comment-thread): Avatar + meta + nested replies. ~60 lines. - [Confirmation dialog](https://helixui.ai/docs/blocks/confirmation-dialog): "Are you sure?" with a destructive variant. ~40 lines. - [Empty state](https://helixui.ai/docs/blocks/empty-state): Friendly explanation + a single primary action. ~30 lines. - [Blocks](https://helixui.ai/docs/blocks): Copy-pasteable composition patterns. Each block is < 100 lines, themed with helixui tokens, and ready to drop into your project. - [Notification list](https://helixui.ai/docs/blocks/notification-list): Live-region container + per-entry timer + dismiss action. ~50 lines. - [Pricing card](https://helixui.ai/docs/blocks/pricing-card): A single tier card — name, price, feature list, CTA. ~50 lines. - [Search result row](https://helixui.ai/docs/blocks/search-result-row): Multi-line result with breadcrumb, title, and snippet. ~40 lines. - [Settings row](https://helixui.ai/docs/blocks/settings-row): Title / description / control trio for /settings pages. ~25 lines. - [Sign-in form](https://helixui.ai/docs/blocks/sign-in-form): Email + password + OAuth buttons + "forgot password" link. ~80 lines. - [Sign-up form](https://helixui.ai/docs/blocks/sign-up-form): Email + password + confirm + ToS checkbox. ~70 lines. - [Stat strip](https://helixui.ai/docs/blocks/stat-strip): 3-4 KPI tiles for a dashboard header. ~30 lines. ## For AI tools - [DESIGN.md — DNA-first design statements](https://helixui.ai/docs/ai/design-md): helixui follows the canonical Google DESIGN.md spec (Apache-2.0). DNA — helixui's 8-gene theme genome — *generates* the canonical token blocks deterministically. Write 5 lines of DNA shorthand; helixui expands them into a full DESIGN.md. - [helixui prompt DSL](https://helixui.ai/docs/ai/dsl): A tiny indentation-based shorthand for describing helixui UI in text. Compresses common JSX patterns by ~50% — designed for prompt-injection and human ↔ LLM conversation. - [Using llms.txt with AI tools](https://helixui.ai/docs/ai/llms-txt): How to point Claude, Cursor, or another LLM client at helixui. - [Why helixui is AI-friendly](https://helixui.ai/docs/ai/overview): The two design choices that make helixui easy for LLMs to reason about. ## Comparisons - [How helixui compares](https://helixui.ai/docs/comparisons): Quick framing against Radix, shadcn/ui, MUI, and Mantine — what helixui does differently and where the other libraries are still the right call. ## Built with helixui - [Built with helixui](https://helixui.ai/docs/builtwith): A growing directory of projects, sites, and products built with helixui. ## Blog - [The first design system AI agents actually understand](https://helixui.ai/docs/blog/ai-first-design-system): Most "AI-friendly" design systems hand the model a docs URL and pray. helixui gives the model an MCP server, a manifest, and a spec per component. Here's the difference. - [Week 0 — open-sourcing helixui](https://helixui.ai/docs/blog/devlog/2026-05-25-week-0): First entry in the helixui devlog. What's in the box, what we broke this week, what we punted. - [Devlog](https://helixui.ai/docs/blog/devlog): A biweekly informal log of what shipped, what broke, and what's next. Catch us in public. - [helixui blog](https://helixui.ai/docs/blog): Posts about why helixui exists, how it works, and what we're learning as we build it. - [Markdown to .pptx in one React tree](https://helixui.ai/docs/blog/markdown-to-pptx): A pitch deck shouldn't be a separate artifact from your docs. helixui lets you render the same React tree to the web and export to PowerPoint. - [spec.md — one file, three audiences](https://helixui.ai/docs/blog/spec-md): Every helixui component owns a sibling spec.md. The docs site, the LLM manifest, and the MCP server all read it. Here's the contract. - [Themes are genomes](https://helixui.ai/docs/blog/themes-are-genomes): Most design systems treat theming as a switch. helixui treats it as a 22-gene genome with dominance, recessives, and mutations. Here's why. - [Why we built helixui](https://helixui.ai/docs/blog/why-helixui): Most design systems were built before LLMs read code. helixui is what one looks like when AI agents are first-class consumers from day one. ## Icons - [Icons](https://helixui.ai/docs/icons/overview): helixui's hand-authored icon set — 238 outline + 28 filled SVG icons on a 24×24 grid, currentColor, fully tree-shakable. ## Contributing - [Adding a component](https://helixui.ai/docs/contributing/adding-a-component): Five steps from scaffold to a shipped, documented, AI-readable helixui component. - [The two contracts](https://helixui.ai/docs/contributing/contracts): Tokens are DTCG JSON. Components own a spec.md. Every contribution must respect both. - [Capturing demo frames](https://helixui.ai/docs/contributing/demo-frames): Generate GIF / video frames for marketing materials automatically with Playwright. The same script that captures frames also exercises the live demos in CI. - [Contributing to helixui](https://helixui.ai/docs/contributing/overview): How to set the repo up, what we ask of pull requests, and the two contracts every contribution must respect. - [Pull request conventions](https://helixui.ai/docs/contributing/pull-requests): Branch from main, one logical change per PR, typecheck and format clean. - [Repo layout](https://helixui.ai/docs/contributing/repo-layout): Every package and app in the helixui monorepo, and what each one owns. - [Reporting bugs](https://helixui.ai/docs/contributing/reporting-bugs): How to file a useful issue against helixui, and where to report security problems. ## Components (prompt-ready, one file each) 90 components. Each `.md` is a compact, prompt-injection-ready reference (import line, props, anatomy, layout, composition, prompt→JSX examples). See also [/components.md](https://helixui.ai/components.md) for all of them in one file. ### shell - [AppShell](https://helixui.ai/components/app-shell.md): A responsive application layout — sticky header, persistent sidebar on desktop, sidebar hidden on mobile (caller composes a Sheet drawer). - [CollapsingHeader](https://helixui.ai/components/collapsing-header.md): An iOS-style header that fades from a large hero title at the top to a compact title with actions when the page is scrolled. - [HelixUIDNAProvider](https://helixui.ai/components/dna-provider.md): Applies a `DNA` (helixui theme genome) to a wrapping div. Every component inside re-renders under the genome's accent / chroma / radius / density / typography / surface / motion / lightness genes via cascading CSS variables — no JS rerender beyond a style mutation. - [PageHeader](https://helixui.ai/components/page-header.md): The top of a page — title, description, breadcrumb, and a right-aligned actions slot. - [PullToRefresh](https://helixui.ai/components/pull-to-refresh.md): A scroll container that detects a downward pull at the top of its content and runs an async refresh callback when released past a threshold. - [SafeArea](https://helixui.ai/components/safe-area.md): A wrapper that reserves space for the device's safe-area insets — notch, status bar, home indicator. Reads `env(safe-area-inset-*)` and applies the value as padding (default) or margin to the chosen edges. - [ThemeProvider](https://helixui.ai/components/theme-provider.md): Sets the current theme. HelixUI tokens are scoped to `[data-theme=\"light\"|\"dark\"]`; ThemeProvider applies that attribute and exposes a `useTheme` hook. ### navigation - [BottomNav](https://helixui.ai/components/bottom-nav.md): A fixed bottom tab bar — primary navigation pattern on mobile. Items can be links or buttons; supports an active state, optional icon, and a number/dot badge. - [Breadcrumb](https://helixui.ai/components/breadcrumb.md): A trail of pages above the current page. The last item is treated as the current page. - [NavigationMenu](https://helixui.ai/components/navigation-menu.md): A vertical navigation list with collapsible sections. Use for app sidebars and side navs. - [Pagination](https://helixui.ai/components/pagination.md): Page-by-page navigation with previous/next buttons, page numbers, and ellipses. - [Sidebar](https://helixui.ai/components/sidebar.md): A vertical navigation rail with grouped items. Designed for AppShell's sidebar slot, also usable inside a Sheet on mobile. - [Stepper](https://helixui.ai/components/stepper.md): A horizontal or vertical sequence of steps with done / current / pending / failed status. Use for onboarding flows, multi-step forms, or check-out funnels. - [Tabs](https://helixui.ai/components/tabs.md): Switch between related views without navigating away. ### layout - [Box](https://helixui.ai/components/box.md): A neutral container with padding and margin shorthands wired to space tokens. - [Flex](https://helixui.ai/components/flex.md): A flexbox container with direction, alignment, and gap as first-class props. - [Grid](https://helixui.ai/components/grid.md): A CSS grid container. Pass a number for equal columns, or any raw track string. - [Stack](https://helixui.ai/components/stack.md): Arrange children in a column (default) or row, with token-aware gap. ### primitive - [Text](https://helixui.ai/components/text.md): Typography primitive — render any element with token-driven size, weight, tone, alignment. ### surface - [Card](https://helixui.ai/components/card.md): A surface container with three elevation styles. - [Collapsible](https://helixui.ai/components/collapsible.md): A toggleable disclosure panel — show or hide a chunk of content behind a header. ### overlay - [ActionSheet](https://helixui.ai/components/action-sheet.md): An iOS-style modal sheet that slides up from the bottom edge with a list of actions. Different from Sheet — Sheet is a side drawer, ActionSheet is a vertical action menu. - [CommandPalette](https://helixui.ai/components/command-palette.md): A Cmd+K command palette — searchable list of actions in a modal, with keyboard navigation and grouping. - [Dialog](https://helixui.ai/components/dialog.md): A modal that traps focus and dims the page behind it. Use for tasks that require completion before continuing. - [FAB](https://helixui.ai/components/fab.md): Floating action button — circular by default, or pill (`extended`) with an icon + label. Fixed-positioned at the bottom-right by default; place yourself with `positioned={false}`. - [FloatingBar](https://helixui.ai/components/floating-bar.md): A pinned action bar that floats over content — typically used for bulk actions on selected items. - [Menu](https://helixui.ai/components/menu.md): A floating list of commands attached to a trigger. - [Popover](https://helixui.ai/components/popover.md): A floating panel anchored to a trigger. Use for ephemeral content that doesn't justify a Dialog. - [Sheet](https://helixui.ai/components/sheet.md): A modal panel that slides in from a screen edge. Use for navigation, filters, or longer task flows on mobile. - [Tooltip](https://helixui.ai/components/tooltip.md): A short, on-hover/on-focus label for a control. Use for icon-only buttons or to expand abbreviations. ### form - [Button](https://helixui.ai/components/button.md): Triggers an action when clicked. - [Calendar](https://helixui.ai/components/calendar.md): A month-view date picker. Internationalized via @internationalized/date — supports any calendar system, not just Gregorian. - [Checkbox](https://helixui.ai/components/checkbox.md): A binary checkbox with indeterminate state. - [CodeEditor](https://helixui.ai/components/code-editor.md): An editable code surface backed by either CodeMirror 6 or Monaco. Pick the engine via a single prop. Both engines lazy-load and are declared as optional peer dependencies — install only what you use. - [ColorPicker](https://helixui.ai/components/color-picker.md): An HSB color picker — saturation/brightness area, hue slider, and hex input. Available inline or in a popover. - [CurrencyInput](https://helixui.ai/components/currency-input.md): Locale-aware currency input. Formats on blur, parses on the fly. Uses Intl.NumberFormat for symbols, separators, and precision. - [DateField](https://helixui.ai/components/date-field.md): Segmented date input — month / day / year (or whatever the user's locale prefers). Built on react-aria-components. - [DatePicker](https://helixui.ai/components/date-picker.md): Segmented date input plus a popover calendar. Pick a date by typing, arrow keys, or clicking the grid. - [DateRangePicker](https://helixui.ai/components/date-range-picker.md): Two segmented date inputs (start + end) plus a popover range calendar. - [DateTimePicker](https://helixui.ai/components/date-time-picker.md): Date + time picker — segmented date input, time field, and a popover calendar. For meeting times, appointment slots, scheduled posts. - [Field](https://helixui.ai/components/field.md): A vertical layout for label + control + description + error message. Use with non-RAC controls; RAC inputs (TextInput, Checkbox, etc.) already accept `label`/`description`/`errorMessage` props. - [FileUpload](https://helixui.ai/components/file-upload.md): Drag-and-drop file upload with progress, errors, and accept/size filtering. Pair with your own upload pipeline. - [Form](https://helixui.ai/components/form.md): A `` wrapper from react-aria-components that surfaces validation errors per-field via the `validationErrors` prop. - [IconButton](https://helixui.ai/components/icon-button.md): A square button containing only an icon. Requires an accessible label. - [InputGroup](https://helixui.ai/components/input-group.md): A horizontal layout for multiple controls. With `attached`, children share a single rounded border. - [MultiSelect](https://helixui.ai/components/multi-select.md): A combobox that accepts multiple values, displayed as removable tags inline. - [NumberField](https://helixui.ai/components/number-field.md): A numeric input with locale-aware parsing, optional +/- steppers, min/max/step, and validation. - [NumericKeypad](https://helixui.ai/components/numeric-keypad.md): An iOS/Android-style 3×4 numeric keypad with optional letter sub-labels (ABC, DEF, …). Use for PIN entry, banking apps, or custom input flows where the system keyboard is unwanted. - [PinInput](https://helixui.ai/components/pin-input.md): A row of single-character cells for PIN / OTP entry. Auto-advances on type, supports paste-to-fill, backspace-to-previous, arrow navigation, and SMS one-time-code autofill. - [RadioCard](https://helixui.ai/components/radio-card.md): A radio option styled as a card. Use inside a RadioGroup when each option needs more space (icon, title, description). - [RadioGroup](https://helixui.ai/components/radio-group.md): A list of mutually exclusive options. Use Radio components as children. - [Rating](https://helixui.ai/components/rating.md): A star rating control. Interactive by default — click or tap to set; supports half-star precision and a read-only display mode. - [RichTextEditor](https://helixui.ai/components/rich-text-editor.md): WYSIWYG editor backed by TipTap (built on ProseMirror). Lazy-loads the engine and every extension; declared as optional peer dependencies. Ships a default toolbar but exposes an imperative handle for fully custom UI. - [SegmentedControl](https://helixui.ai/components/segmented-control.md): A grouped row of toggle buttons for picking between a small number of mutually exclusive views. - [Select](https://helixui.ai/components/select.md): A single-value picker rendered as a popover listbox. - [Slider](https://helixui.ai/components/slider.md): A horizontal slider for a single value or a range. Pass an array `value`/`defaultValue` to get a range slider with two thumbs. - [Switch](https://helixui.ai/components/switch.md): A two-state toggle. Use when a setting takes effect immediately; use Checkbox in forms. - [TextInput](https://helixui.ai/components/text-input.md): A single-line text input with built-in label, description, error, and prefix/suffix slots. - [Textarea](https://helixui.ai/components/textarea.md): A multi-line text input with optional label, description, and error. ### feedback - [Badge](https://helixui.ai/components/badge.md): A small inline label for status, counts, or categories. - [Banner](https://helixui.ai/components/banner.md): A persistent page-level alert. Stronger than Callout, less interruptive than Toast or Dialog. - [Callout](https://helixui.ai/components/callout.md): An inline message banner — info, success, warning, danger, or neutral. - [EmptyState](https://helixui.ai/components/empty-state.md): A centered placeholder for "no data yet" — icon, title, description, and an action. - [PresenceDot](https://helixui.ai/components/presence-dot.md): A small status dot — online / away / busy / offline. Use standalone or attached to an Avatar. - [ProgressBar](https://helixui.ai/components/progress-bar.md): Linear progress indicator. Determinate when given a `value`; indeterminate (looping shimmer) when `value` is omitted. - [Skeleton](https://helixui.ai/components/skeleton.md): A shimmering placeholder for content that's still loading. - [Spinner](https://helixui.ai/components/spinner.md): An indeterminate loading indicator. - [Toast](https://helixui.ai/components/toast.md): Transient messages that announce a background result. Mount `` once; call `toast.success(...)` from anywhere. ### data - [Chart](https://helixui.ai/components/chart.md): Unified chart surface backed by either Chart.js or Recharts. Both engines accept the same `` shape (labels + datasets); the adapter translates to engine-native formats internally. Both engines lazy-load and are declared as optional peer dependencies — install only what you use. - [CodeBlock](https://helixui.ai/components/code-block.md): A fenced code display with language label and copy button. Built-in tokenizer for ts / js / py / json / bash; bring your own highlighter for others. - [DataTable](https://helixui.ai/components/data-table.md): A full-featured table primitive — sortable, filterable, selectable, paginated. Works for read-only display and for selection-driven workflows. Zero external dependencies. - [List](https://helixui.ai/components/list.md): A denser data list — feed, inbox, settings rows. Each item has media / primary / secondary / trailing slots. - [Sparkline](https://helixui.ai/components/sparkline.md): Tiny inline trend visualization rendered as pure SVG. No peer dependencies. Pairs with `` for KPI tiles, with `` cells for per-row trends, or with `` for full-size views. - [StatCard](https://helixui.ai/components/stat-card.md): A KPI display — label, big value, a delta vs previous period, and an optional description line. - [SwipeableListItem](https://helixui.ai/components/swipeable-list-item.md): A list row that reveals leading or trailing actions when the user swipes left or right. Pass the row content as `children`; pass actions for either edge. - [Table](https://helixui.ai/components/table.md): An interactive data table with selection, sorting, keyboard navigation, and a screen-reader-friendly grid. ### media - [AttachmentTile](https://helixui.ai/components/attachment-tile.md): A compact tile for a file attachment — thumbnail or icon + name + size + optional remove or upload progress. - [Avatar](https://helixui.ai/components/avatar.md): A user or entity image with text fallback when the image is missing or fails to load. - [AvatarGroup](https://helixui.ai/components/avatar-group.md): A row of overlapping avatars with an optional overflow chip — `+N` for hidden members. - [Carousel](https://helixui.ai/components/carousel.md): A horizontal scroll-snap row of items. Native scroll on mobile (swipe); hidden arrows on hover for desktop; optional dots showing pagination. ### chat - [ChatComposer](https://helixui.ai/components/chat-composer.md): A multi-line message composer with auto-resize, Enter-to-send (Shift+Enter for newline), and slots for attachments and toolbar buttons. - [ChatHeader](https://helixui.ai/components/chat-header.md): The top bar of a single conversation — avatar, title, subtitle, right-aligned actions. - [ChatList](https://helixui.ai/components/chat-list.md): A scrolling container for ChatMessages with sticky-to-bottom auto-scroll. When the user has scrolled up to read history, new messages do NOT yank them back. - [ChatMessage](https://helixui.ai/components/chat-message.md): A single message in a chat — user / assistant / system role, bubble or inline (Slack-style) variant, optional avatar / name / time / footer. - [PromptSuggestions](https://helixui.ai/components/prompt-suggestions.md): A row (chips) or grid (cards) of suggested prompts. Used at the start of an empty AI conversation or as follow-up suggestions after a response. - [StreamingIndicator](https://helixui.ai/components/streaming-indicator.md): An inline marker placed at the end of streaming LLM text — blinking caret, pulsing block, or three dots. - [ThinkingBlock](https://helixui.ai/components/thinking-block.md): A collapsed reasoning / chain-of-thought block. Use to present an LLM's intermediate thought process in a non-distracting way. - [ToolCall](https://helixui.ai/components/tool-call.md): A collapsible card representing a single tool / function call from an LLM — name, status, optional summary line, and expandable input / output sections. - [TypingIndicator](https://helixui.ai/components/typing-indicator.md): Three bouncing dots inside a pill — shown while a participant is composing a message. ### other - [PriceTag](https://helixui.ai/components/price-tag.md): A formatted currency price label with optional strike-through original price and sale-percentage chip. ## Optional - [Tokens manifest (JSON)](https://helixui.ai/tokens-manifest.json): Flat list of every token with value, type, description, layer, and per-theme resolutions. Carries a `$meta` provenance block. - [Components manifest (JSON)](https://helixui.ai/components-manifest.json): Every component with its signature, layout, anatomy, composition graph, and prompt examples. Lints against the tokens manifest. - [All components in one MD](https://helixui.ai/components.md): Condensed prompt-ready dump of every component (props, anatomy, layout, visual, composes-with, prompt examples). Use when you need the components without the prose docs. - [Per-component MD](https://helixui.ai/components/.md): One file per component, e.g. `/components/button.md`. Best for pinpointing a single component into a prompt. - [Full docs concatenated](https://helixui.ai/llms-full.txt): One file with every page body and the manifest, ready to paste as one-shot context.