> ## Documentation Index
> Fetch the complete documentation index at: https://archie.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> Your design values rendered on real UI — a live gallery that proves your design system holds together.

Components is a live gallery, not a form. Every family here compiles from the same values you set in [Theme](/docs/features/frontend/prototype/design/theme), [Branding](/docs/features/frontend/prototype/design/branding), [Feel](/docs/features/frontend/prototype/design/feel), [Read](/docs/features/frontend/prototype/design/read), [Color](/docs/features/frontend/prototype/design/color), and [Polish](/docs/features/frontend/prototype/design/polish) — there is nothing to configure directly on this page. It exists to show you those values working together on real UI before you commit to them.

## What's in the gallery

* **Alerts** — semantic feedback colors, used sparingly and conservatively
* **Buttons**
* **Forms**
* **Cards**
* **Pills & badges**

<img src="https://mintcdn.com/archie-e998dbf6/944gHGp2sN9dUVTM/features/design/components-gallery.png?fit=max&auto=format&n=944gHGp2sN9dUVTM&q=85&s=8eaa1e946d3e55e681aba09e749b223e" alt="Components gallery showing the Alerts family — inline alerts and toasts rendered with the current design values" width="1700" height="952" data-path="features/design/components-gallery.png" />

The preview renders in the canvas and reacts live to your colors, radius, density, type, and dark mode — change a value anywhere else in Prototype and come back here to see how it lands on real components.

## How to use it

Treat Components as a checkpoint, not a starting point. Set your theme and design values first, then open Components to catch anything that looks off — a shadow that reads too heavy on a card, a corner radius that clashes with a pill badge — before you look at full generated screens in [Screens](/docs/features/frontend/prototype/screens/overview).

## FAQ

<AccordionGroup>
  <Accordion title="Can I add or edit components here?">
    No. Components is a preview surface for the values set elsewhere in Prototype. To change how a button or card looks, adjust [Color](/docs/features/frontend/prototype/design/color) or [Polish](/docs/features/frontend/prototype/design/polish) and return here to check the result.
  </Accordion>
</AccordionGroup>