# Le modèle de composants

Le tableau `components` d'une page est un arbre. Chaque entrée porte un `type` — parmi 96 types intégrés — et un ensemble de propriétés. Les composants n'inventent pas chacun leur vocabulaire : ils se composent d'un petit ensemble de modules partagés, de sorte que les mêmes propriétés transversales signifient la même chose partout où elles apparaissent.

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

## Modules partagés

| Module         | Présent sur                     | Rôle                                                                                                          |
| -------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| `props`        | Tous les composants             | Ensemble clé-valeur rendu en attributs HTML — `className`, `variant` et les clés propres au composant.        |
| `children`     | Tous les composants             | Définitions de composants imbriqués, ou simples chaînes. Profondeur arbitraire.                               |
| `content`      | Contenu et mise en page         | Texte ou markdown inline, avec substitution de références.                                                    |
| `dataSource`   | Composants liés aux données     | Lie à une table ou à un point de terminaison système. Voir [Liaison de données](/fr/docs/pages-data-binding). |
| `visibility`   | La plupart des composants       | Affichage conditionnel selon l'état d'authentification.                                                       |
| `responsive`   | La plupart des composants       | Surcharges de propriétés par point de rupture.                                                                |
| `interactions` | Composants interactifs          | Comportements au clic, au survol, au défilement et à l'entrée. Voir [Interactions](/fr/docs/interactions).    |
| `action`       | Composants formulaire et bouton | Ce que fait l'exécution du composant — `crud`, `auth`, `navigate`, `automation`.                              |
| `i18n`         | Composants de contenu           | Variantes de contenu par langue.                                                                              |

`props` et `children` sont universels. Les autres sont adoptés type par type : un `divider` porte `props` et `children` et rien d'autre, tandis qu'un `hero` ajoute `content`, `interactions`, `responsive`, `visibility` et `i18n`. Chaque page de référence précise ce que ses composants acceptent réellement.

:::callout
**Les clés inconnues sont ignorées, pas rejetées.** Un nom de module mal orthographié — `onClick` au lieu de `interactions.click`, `inline` au lieu de `inlineScripts` — passe la validation puis ne fait rien. Quand un comportement déclaré n'apparaît pas, vérifiez la clé sur la page de référence avant de suspecter le runtime.
:::

## Substitution de références

Les valeurs de `content` et de `props` résolvent quatre familles de références au moment du rendu :

`$record.<field>` (l'enregistrement lié), `$vars.<key>` (les variables de page), `$currentUser.<path>` (le contexte de session) et `$t:<key>` (les traductions). Une page rendue depuis `markdown` ajoute `$frontmatter.*`. Voir [Liaison de données](/fr/docs/pages-data-binding#familles-de-rfrences) pour le détail de chaque famille.

## Catégories

Les 96 types sont documentés par catégorie, chacune sur sa propre page.

| Catégorie                                                 | Types                                                                                                                         |
| --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| [Mise en page](/fr/docs/layout-components)                | hero, container, flex, grid, responsive-grid, card, sidebar, modal, split-pane, tab-panel                                     |
| [Structure](/fr/docs/structural-components)               | divider, spacer                                                                                                               |
| [Contenu](/fr/docs/content-components)                    | text, code, icon, toc, pageSearch, searchInput                                                                                |
| [Média](/fr/docs/media-components)                        | image, video, audio, iframe, carousel, aspect-ratio                                                                           |
| [Affichage](/fr/docs/display-components)                  | accordion, command, empty-state, list-item, record-field, resizable, scroll-area, speech-bubble, static-table, tabs, timeline |
| [Navigation](/fr/docs/navigation-components)              | navigation-menu, dropdown-menu, context-menu, menubar, breadcrumb, pagination                                                 |
| [Superpositions](/fr/docs/overlay-components)             | dialog, alert-dialog, drawer, record-drawer, popover, hover-card, tooltip, toast                                              |
| [Retour d'information](/fr/docs/feedback-components)      | progress, spinner, skeleton                                                                                                   |
| [Interactif](/fr/docs/interactive-components)             | button, button-group, link, alert, badge, theme-toggle                                                                        |
| [Données](/fr/docs/data-components)                       | data-table, list, gallery, kanban, calendar, chart, kpi, data-timeline, data-form, form                                       |
| [Contrôles de formulaire](/fr/docs/form-controls)         | input, textarea, select, combobox, checkbox, radio-group, switch, toggle, toggle-group, field                                 |
| [Contrôles avancés](/fr/docs/form-controls-advanced)      | slider, date-picker, time-picker, number-input, file-upload, input-otp                                                        |
| [Spécialité](/fr/docs/specialty-components)               | wizard, reorderable-list, language-switcher, status-indicator                                                                 |
| [Social](/fr/docs/social-components)                      | comments, commentCount, ai-chat                                                                                               |
| [Personnalisé](/fr/docs/interactivity-scripts#customhtml) | customHTML                                                                                                                    |

## Pages connexes

- [Présentation des pages](/fr/docs/pages-overview) — où vit le tableau `components`.
- [Liaison de données](/fr/docs/pages-data-binding) — le module `dataSource`.
- [Interactions](/fr/docs/interactions) — les modules `interactions` et `action`.
- [Design responsive](/fr/docs/responsive-design) — le module `responsive`.
- [Thème](/fr/docs/theme) — les jetons que consomme le style des composants.