Documentation
Component Builder
Components mode sits alongside Tokens mode in Studio. You compose components from atomic building blocks on an infinite canvas, bind design tokens to every visual property, define variants and states, then publish the result with a full slot API. If you are new to how tokens and resolution order work, read Key Concepts first.
Overview
Components mode is where your token system becomes a component system. Each component you build here draws directly from the tokens you defined in Tokens mode. Change a token value there and every component that references it reflects the change. The canvas is a freeform workspace: spread your components across it however makes sense for your team.
Navigating the canvas
Hold spacebar and drag to pan. Scroll to zoom, or press + and - to step in and out. The zoom percentage shows in the lower corner of the canvas. Double-click the zoom indicator to fit all content back into view. There are no boundaries, so components can be placed anywhere.
Adding atoms to a component
Open a component to enter edit mode. The insertion panel lists every available atom type: Container, Row, Column, Text, Icon, Slot, Button, and more. Click an atom type to place it on the canvas. Each atom you add appears as a new layer in the Structure panel.
Structure panel
The Structure panel shows a hierarchical list of every layer in the component. Layers are depth-indented to reflect nesting. Click the arrow next to a container to expand or collapse its children. Drag a layer to reorder it within the hierarchy. Double-click a layer name to rename it inline. Clicking any layer in the panel selects it on the canvas.
Binding tokens to properties
Select a layer to see its visual properties in the right panel. Each property — including color, spacing, typography, and shadow — has a token picker. Open the picker to search all tokens in your design system. Color tokens show a color swatch. Typography, dimension, and shadow tokens show a type indicator. Selecting a token binds it and the canvas updates immediately. Clear the binding at any time to revert to a literal value. The picker filters to the matching token type automatically, so a color property only shows color tokens.
Note: Token bindings resolve through the full resolution chain: Base, Mode, then Context. Canvas previews always reflect the active mode.
Variants and states
Each component can define named variants and interaction states. Variants describe structural differences — for example size: sm, md, lg. States describe interaction conditions: hover, disabled, and active are common examples. Use the state selector in the canvas toolbar to switch the preview. While a state is active, any property change applies only to that state's overrides and is stored separately from the default values.
Component drawer
The component drawer is a floating panel for metadata and slot documentation. Edit the component name and set the lifecycle badge: stable, beta, experimental, or deprecated. In the Slots section, add a description to each slot, mark it as required, and set whether it accepts multiple children. Slot documentation is published with the component and shown in consumer integrations.
For the rules that govern which atoms can be placed in which slots, see Composition Rules.