# The Component Model

A page's `components` array is a tree. Every entry has a `type` — one of 96 built-in component types — and a set of properties. Components do not each invent their own vocabulary: they compose from a small set of shared modules, so the same cross-cutting properties mean the same thing everywhere they appear.

```yaml
components:
  - type: container
    props: { className: 'max-w-4xl mx-auto' }
    children:
      - { type: text, tag: h1, content: 'Tasks' }
      - type: data-table
        dataSource: { table: tasks }
```

## Shared Modules

| Module         | Present on                 | What it does                                                                                     |
| -------------- | -------------------------- | ------------------------------------------------------------------------------------------------ |
| `props`        | Every component            | Key-value bag rendered as HTML attributes — `className`, `variant`, and component-specific keys. |
| `children`     | Every component            | Nested component definitions, or plain strings. Arbitrary depth.                                 |
| `content`      | Content and layout         | Inline text or markdown, with reference substitution.                                            |
| `dataSource`   | Data-bound components      | Binds to a table or a system endpoint. See [Data Binding](/en/docs/pages-data-binding).          |
| `visibility`   | Most components            | Conditional display based on auth state.                                                         |
| `responsive`   | Most components            | Per-breakpoint property overrides.                                                               |
| `interactions` | Interactive components     | Click, hover, scroll and entrance behavior. See [Interactions](/en/docs/interactions).           |
| `action`       | Form and button components | What running the component does — `crud`, `auth`, `navigate`, `automation`.                      |
| `i18n`         | Content components         | Per-language content variants.                                                                   |

`props` and `children` are universal. The rest are opt-in per type: a `divider` carries `props` and `children` and nothing else, while a `hero` adds `content`, `interactions`, `responsive`, `visibility` and `i18n`. Each reference page states what its components actually accept.

:::callout
**Unknown keys are dropped, not rejected.** A misspelled module name — `onClick` instead of `interactions.click`, `inline` instead of `inlineScripts` — passes validation and then does nothing. When a declared behavior silently fails to appear, check the key against the reference page before checking the runtime.
:::

## Reference Substitution

`content` and `props` values resolve four reference families at render time:

`$record.<field>` (the bound record), `$vars.<key>` (page variables), `$currentUser.<path>` (session context), and `$t:<key>` (translations). A page rendered from `markdown` adds `$frontmatter.*`. See [Data Binding](/en/docs/pages-data-binding#reference-families) for what each resolves to.

## Categories

The 96 types are documented by category, each on its own page.

| Category                                             | Types                                                                                                                         |
| ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| [Layout](/en/docs/layout-components)                 | hero, container, flex, grid, responsive-grid, card, sidebar, modal, split-pane, tab-panel                                     |
| [Structural](/en/docs/structural-components)         | divider, spacer                                                                                                               |
| [Content](/en/docs/content-components)               | text, code, icon, toc, pageSearch, searchInput                                                                                |
| [Media](/en/docs/media-components)                   | image, video, audio, iframe, carousel, aspect-ratio                                                                           |
| [Display](/en/docs/display-components)               | accordion, command, empty-state, list-item, record-field, resizable, scroll-area, speech-bubble, static-table, tabs, timeline |
| [Navigation](/en/docs/navigation-components)         | navigation-menu, dropdown-menu, context-menu, menubar, breadcrumb, pagination                                                 |
| [Overlays](/en/docs/overlay-components)              | dialog, alert-dialog, drawer, record-drawer, popover, hover-card, tooltip, toast                                              |
| [Feedback](/en/docs/feedback-components)             | progress, spinner, skeleton                                                                                                   |
| [Interactive](/en/docs/interactive-components)       | button, button-group, link, alert, badge, theme-toggle                                                                        |
| [Data](/en/docs/data-components)                     | data-table, list, gallery, kanban, calendar, chart, kpi, data-timeline, data-form, form                                       |
| [Form Controls](/en/docs/form-controls)              | input, textarea, select, combobox, checkbox, radio-group, switch, toggle, toggle-group, field                                 |
| [Advanced Controls](/en/docs/form-controls-advanced) | slider, date-picker, time-picker, number-input, file-upload, input-otp                                                        |
| [Specialty](/en/docs/specialty-components)           | wizard, reorderable-list, language-switcher, status-indicator                                                                 |
| [Social](/en/docs/social-components)                 | comments, commentCount, ai-chat                                                                                               |
| [Custom](/en/docs/interactivity-scripts#customhtml)  | customHTML                                                                                                                    |

## Related Pages

- [Pages Overview](/en/docs/pages-overview) — where the `components` array lives.
- [Data Binding](/en/docs/pages-data-binding) — the `dataSource` module.
- [Interactions](/en/docs/interactions) — the `interactions` and `action` modules.
- [Responsive Design](/en/docs/responsive-design) — the `responsive` module.
- [Theme](/en/docs/theme) — the tokens component styling consumes.