# Components

Each component takes an intent and decides the element from it.

## From intent to element

[`heading.page`](https://www.prongs.dev/docs/intents/heading/page.md) (the intent you choose) → [`<Text>`](https://www.prongs.dev/docs/components/text.md) (the component its domain needs) → `<h1>` (the element it renders). The domain decides the component; using an intent on the wrong component fails `tsc`.

## The components

- [`<Text>`](https://www.prongs.dev/docs/components/text.md): Headings, running text and feedback messages. The intent decides the element (`<h1>`, `<p>`, `<span>`, `<pre>`) and the look. Renders [`heading.*`](https://www.prongs.dev/docs/intents/heading.md), [`text.*`](https://www.prongs.dev/docs/intents/text.md), [`feedback.*`](https://www.prongs.dev/docs/intents/feedback.md).
- [`<Action>`](https://www.prongs.dev/docs/components/action.md): Everything the user presses: commands, links, navigation and choices. With `href` it renders a link, without one a `<button>`. Renders [`action.*`](https://www.prongs.dev/docs/intents/action.md), [`nav.*`](https://www.prongs.dev/docs/intents/nav.md), [`choice.*`](https://www.prongs.dev/docs/intents/choice.md).
- [`<Field>`](https://www.prongs.dev/docs/components/field.md): What the user types or picks in a form. The intent decides the element (`<input>`, `<textarea>`, `<select>`) and sets `type`, `inputMode` and `autoComplete`. Renders [`field.*`](https://www.prongs.dev/docs/intents/field.md).
- [`<Layout>`](https://www.prongs.dev/docs/components/layout.md): Page regions and groups. The intent decides the element (`<main>`, `<section>`, `<form>`, `<ul>`, `<li>`) and the arrangement. Renders [`layout.*`](https://www.prongs.dev/docs/intents/layout.md).
- [`<Media>`](https://www.prongs.dev/docs/components/media.md): Images that identify a person or illustrate content, and frames that show another page ([`media.embed`](https://www.prongs.dev/docs/intents/media/embed.md)). Without a source it shows text instead, like initials. Renders [`media.*`](https://www.prongs.dev/docs/intents/media.md).
- [`<Dialog>`](https://www.prongs.dev/docs/components/dialog.md): Modal interruptions on the native `<dialog>`: focus stays inside, Escape closes it and the page behind is inert. Renders [`dialog.*`](https://www.prongs.dev/docs/intents/dialog.md).
- [`<Popover>`](https://www.prongs.dev/docs/components/popover.md): Things that open next to the button that opened them, without blocking the page: menus, pickers, extra detail. Built on the native `popover` attribute, so a click outside or Escape closes it. Renders [`popover.*`](https://www.prongs.dev/docs/intents/popover.md).

## What they share

Rules that hold for all seven. Each component page repeats only what is different.

| | |
|---|---|
| Styling | No `className` or `style` (Layout takes a `className` for layout only). If it needs to look different, it is a different intent. |
| State | `pressed` and `current` props, or `data-*` attributes the intent styles. Never a switched class. |
| Data-driven values | Through `vars`, as CSS variables the intent reads. |
| Layout props | `align`, `width`, `hideBelow`, `showBelow`, `truncate`, `nowrap`: where it sits, never how it looks. Layout takes `align`, `hideBelow` and `showBelow`. |
| data-intent | Every element carries its intent, for analytics and tests. Never for styling. |

## They are your code

```bash
npx prongs add   # copies them into components/prongs
```

Copied in, not installed. These pages describe the components as they arrive; if you change one, its props here may no longer match yours.