Components
The example · Capture found 31 components. Button has three variants and four states; one cell is not made yet.
A component is a part that repeats and has a look of its own: a button, an input, a card, the header. Change it once and every page that uses it changes.
Variants and states
A component shows as one set: variants across, states down. A cell that does not exist yet says not made, and Analysis lists it. Mark a state not needed and it stops counting.
| Axis | Values | Who sets them |
|---|---|---|
| Variant | Anything you name: Solid, Outline, Ghost; Small, Large | You, or read from the site |
| State | Default · Hover · Pressed · Disabled · Loading · Empty · Error | Fixed list |
| Size | Web · Tablet · Mobile | The viewport, not a cell |
Properties
| Property | What it does | In code |
|---|---|---|
| Variant | Picks a column of the set | variant="outline" |
| Text | Words you can change per use | label="Pay" |
| Boolean | Shows or hides a part | icon={true} |
| Instance swap | Swaps one component inside for another | icon={<Cart/>} |
| Slot | A place for any content | children |
Making components
- Capture finds them. They are named from what your site calls them, or from what they are.
- New component draws one, or turns parts of a page into one.
- Fills, text, borders and radius come from your Styles, so a style change reaches them.
Code
Every component has a Code tab, written from its spec: properties become props, variants become classes, states become :hover, :disabled and the rest.
| Framework | CSS | CSS Modules | Tailwind | Inline |
|---|---|---|---|---|
| React | ||||
| Vue | ||||
| Angular | — | |||
| Svelte | — | |||
| HTML | — | |||
| Web Component | — | — |
Was this page helpful?
Yes
No
Updated Oct 22, 2026