--- title: Components description: Your UI kit as real HTML and CSS, linked to your Foundations, with variants, a design panel and AI edits. --- > Source: https://www.heyarchetype.com/docs/brand/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](/docs/brand/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: | Tab | Use it for | | --- | --- | | **Code** | A repository's real components, imported by your own coding agent over MCP. See [From code](/docs/import/code). | | **Paste** | HTML and optional CSS you already have. You can also press **Upload files** to load .html and .css files. | | **Figma** | Component sets from a .fig export. This opens the importer in **Settings → Import**. See [From Figma](/docs/import/figma). | | **Marketplace** | Ready-made libraries: shadcn/ui, Mantine, Radix Themes, Chakra UI, BeautifulUI, Material Design 3 and Ant Design. | 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](/docs/billing/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](/docs/developers/components). ## 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](/docs/workspace/states). ## Next steps :::cards - [Component sync](/docs/developers/components): Keep components in step with your codebase. - [Templates](/docs/brand/templates): Build finished layouts from your components. - [MCP tools](/docs/agents/tools): See how agents fetch a component. :::