Components

Components is your UI kit: buttons, inputs, cards and anything else your product or site is built from. Each component is stored as real HTML and CSS, so an agent can reproduce it exactly instead of guessing from a description.

How a component is built#

A component has a name, a description and a set of examples. Each example is one piece of markup with its CSS, such as "Primary · MD · Hover". Examples that differ only by size or state are grouped into one variant, so "Primary · MD" and "Primary · SM · Hover" share a tile.

Colors, sizes and fonts in the CSS are written as your Foundations tokens (var(--token)). When you save a token, every component that uses it follows. When you save code, Archetype matches literal values against your Foundations and rewrites them to tokens. Values with no match are flagged as Off-palette.

Add components#

Open Components and press Add. The Add component drawer has four tabs:

Marketplace components are bound to your brand on import, so they arrive in your colors, type and radius. Open a library, untick any components you don't want, and press Import.

Starter kit#

The first card in the Marketplace is the Starter kit: 10 shadcn/ui base components (button, text input, textarea, select, checkbox, radio, toggle, tabs, badge and slider) themed to your brand. Its page lets you tune Character, Primary, Neutrals, Radius, Weight, Shadow, Spacing, Font and Mode with a live preview. Press Add 10 components when it looks right.

Browse the library#

The Components grid shows one card per component, with a count of its variants. Above the grid you can:

• Filter by status and by platform, once any component has one set.
• Show parts. Components that only appear inside others (a table cell, a step indicator) are hidden by default. The used inside others button shows them.
• Show only components synced from code, with the from code button.
• Drag cards to reorder them, and right-click a card to rename, select or delete it.

A component's page#

Click a card to see its variants. From here you can:

• Edit the name and description in place.
• Set Platforms: Universal, App, Mobile, Website, Marketing or Email. Agents are told where each component belongs.
• Switch between Variants and Matrix. The matrix lays out every example in a grid, variants down the side and sizes and states across, with gaps where a combination doesn't exist. The switch appears when a component has more than one axis.
• Right-click a variant to rename, duplicate, copy its code or delete it.

Save and Cancel appear in the header once you change something.

A variant on the canvas#

Click a variant to open it on an infinite canvas. Drag to pan and use ⌘ with the scroll wheel to zoom. The arrows in the header step to the previous or next variant.

Turn on Inspect in the top-left corner to see each element's box model: rulers, padding, margin, size and the tokens it uses.

The panel on the right has four tabs:

• Design: pick a size, state or other property at the top, then select layers to change them in the inspector, Figma-style. Drag, resize and nudge elements, double-click a label to retype it, or swap a photo for another one from your library. Changes are held until you press Save. Design is available on desktop.
• Details: description, platforms, properties, what the component is part of or uses, its icons, its role (Component or Part), its Figma link and dates.
• Code: the example's HTML and CSS, the tokens it uses and any off-palette values. Press Edit code to change it.
• Comments: a thread on the variant, with @mentions.

When you edit a part that sits inside other components, the change carries into those components too.

Ask Claude for a change#

Press Edit in a component's header to describe a change in plain words, such as "make the secondary variant outlined". Claude reads the component and your Foundations, then writes a proposal.

The proposal opens as Proposed changes, one card per example it touched. Untick any you don't want, then press Apply to (for example "Apply to 3 examples"), or press Discard to throw it away. Nothing changes until you apply. Each request uses AI credits. See AI credits.

AI edits run on desktop and need permission to edit components.

Components synced from code#

A component pushed from your repository with the CLI is owned by the code. Its page shows where it came from, the import line and the source file, and it can't be edited or AI-edited here, because the next push would overwrite the change. See Component sync.

How agents use components#

Agents first get a light index: every component's key, name and example names. Asking for one component returns each example's real HTML and CSS plus a :root block that resolves your tokens. Only components that are Complete or have no status are served. See Item states.

Next steps#