HelixDocsInstall it, theme it, and the ideas underneath. Every family's own API lives on its page under Components; these are the guides that cross families.Getting started

IntroductionWhat Helix is, and the packages it includes.TiersWhy the headless and styled tiers are separate packages.InstallationWhat to install, the order of the stylesheets, and how to check that the elements registered.Coding agentsInstall Helix for a coding agent, and the files an agent can read to write Helix code.Browser supportThe browser features Helix uses, and the browsers we test in.VersioningWhat a Helix version number means, and which packages are released together.MetricsHow much Helix adds to a page, measured from the built packages.

Foundations

AccessibilityWhat Helix components handle for you, what you handle, and what we do not test.ColorThe color roles, why Helix uses OKLCH, and how the engine meets contrast targets.Color modesSwitch between light and dark mode with one attribute. Each token declares both values once.Elevation and materialThe layer, shadow, and material tokens for stacking, lifting, and translucent surfaces.IconographyDraw icons from the Helix set, import glyphs directly, and build a set of your own.MotionThe duration and easing tokens, and how components handle reduced motion.RecipesStyle your own HTML with Helix data attributes and no JavaScript.Shape and bordersThe corner radius and border width tokens, and how a theme changes them.Space and sizeUse the space scale for gaps and the size tokens for the height of controls.Surfaces and separationThe four ways to separate a surface from what is behind it, and the tokens that choose between them.TypographyThe font families, the type scale, and how Helix styles headings and prose.

Theming

TokensThe two token layers, the surface tokens, and the rules the build enforces.Deriving a themeCompute a complete token set from your brand color and a few other inputs.Intent referenceEvery input the theme engine takes, and what each one changes.Overriding a componentChange a component's styles with tokens, per-component hooks, or parts, and choose which one to use.Size and densityControls take their height from the density of the region they are in. Set the density once on the region.Visual axesThe attributes that set how a component looks, the values each one accepts, and what each value draws.

Essentials

Using the elementsBind events, register the elements, and import the styles in a React app.Building on the headless tierBuild your own design system on the Helix headless tier, with your own tag names and styles.CanvasesAdd a board of cards and connections that people can move, connect, and read with any input, and save it as JSON Canvas.ChartingWhich chart to use, and how charts read their data from a table in the document.CompositionHow Helix is organized into families, parts, and groups, and which one to use.EventsThe two events each state change sends, and why one name has a prefix and the other does not.Forms and validationHow Helix controls take part in forms, render their own labels, and handle disabled fieldsets.GraphsAdd interactive graphs and isometric diagrams to your site, styled with your theme and drawn by Sigma.js, cosmos.gl, three.js, or Helix.Localization and RTLSet the locale of date, time, and number controls, translate the built-in words, lay out pages right to left, and color a rise and a fall for your market.MapsAdd interactive maps to your site, styled with your theme and drawn by MapLibre or Leaflet.Overlays and layeringHow overlays use the top layer, how they close, and where focus goes.Routing and navigationMake components navigate with real anchors, and use your framework's router with them.Server renderingHow components render on a server with no DOM, and what waits for the browser.Spatial chartsAdd charts drawn in three dimensions to your site, styled with your theme, in SVG or with three.js.State and controlHow a property you set becomes a starting value, and how to cancel or take over a change.TerminalsAdd a terminal that runs your own shell or process to your site, styled with your theme and drawn by xterm.js.

Tooling

DiagnosticsFind the Helix mistakes the browser accepts without an error, on your running pages and in your code, with a setup for Vite, React, Next.js, and CI.SandboxThe editable examples on each component page, and what you need to build an editor of your own.Theme builderEnter your theme inputs and see every token Helix computes from them.Visual testingPicture every page and component in a real browser, compare each picture with a baseline kept in git, and fail the run when one changes.