Helix Helix is a design system of web components. It includes: color, space, and type tokens a headless tier with the structure and behavior of each component a styled tier that adds the visual design typings for each framework, generated from both tiers The components are custom elements, so you can use them in any framework or without one. Helix computes your theme. You enter a few inputs, such as your brand color, and Helix computes every token from them. Helix measures the contrast of each text and background pair it solves, and reports any pair that misses its target. See Theming. AI agents can read it. A custom elements manifest describes every component, with typed options, documented parts, and generated React prop names, so an agent can write correct Helix code from the types alone. The build checks conventions such as inline literal unions and documented CSS parts for that reason. Install bun add @fusion.dev/helix @fusion.dev/helix-styles Import the stylesheet at your app root, then each family you use. Then you can use those elements anywhere: import '@fusion.dev/helix-styles/helix.css' import '@fusion.dev/helix/accordion' <helix-accordion separation="outlined"> <helix-accordion-item default-open> <span slot="summary">What is Helix?</span> <p>A design system of web components, themed from your brand color.</p> </helix-accordion-item> </helix-accordion> Installation explains the import order and links to a page for each framework. Packages PackageUse when@fusion.dev/helix-stylesAlways. Tokens and the base layer@fusion.dev/helixYou want Helix components as-is@fusion.dev/helix-headlessYou want the behavior and none of the styling@fusion.dev/helix-themeYou are generating or validating a theme@fusion.dev/helix-iconsYou are drawing an icon outside a component@fusion.dev/helix-mapYou are drawing a map with MapLibre, Leaflet, or a renderer of your own. See Maps@fusion.dev/helix-graphYou are drawing a graph with Sigma.js, cosmos.gl, three.js, or a renderer of your own. See Graphs@fusion.dev/helix-plotYou are drawing a spatial chart with three.js. See Spatial charts@fusion.dev/helix-coreYou are building a new Helix component React uses the elements directly. Helix ships a jsx.d.ts that types every tag. @fusion.dev/helix-core has a runtime bridge that fixes how React hydrates custom events. React covers both. See Tiers for how the packages relate and which one to use.