# Composants

> Les composants disponibles dans chaque page, sans import.

Ces composants s'emploient dans n'importe quelle page `.mdx` **sans import**.

Ils apportent la **structure** — enveloppes, séparateurs, espacements.
L'apparence se règle avec `className`.

<ForTheme framework="tailwind">

Avec le thème Tailwind, un `className` porte des utilitaires, compilés depuis
ceux qu'emploient vos pages :

```mdx
<Card className="max-w-sm">
  <CardHeader className="text-center font-bold">Titre</CardHeader>
</Card>
```

Les classes des composants vivent dans la couche `components`, sous les
utilitaires : un `className` posé à l'emploi l'emporte toujours.

</ForTheme>
<ForTheme framework="custom">

Avec le thème custom, un `className` nomme vos propres classes : il n'y a pas
d'utilitaires. Chaque fichier `.css` du dossier `theme/`, à la racine du
projet, est ajouté à la feuille, et `docpensieve dev` suit chaque changement.

```mdx
<Card className="narrow">
  <CardHeader className="centered">Titre</CardHeader>
</Card>
```

```css
/* theme/custom.css */
.narrow {
  max-inline-size: 24rem;
}

.centered {
  text-align: center;
}
```

Les classes des composants vivent dans la couche `components`, celles du
dossier de thème dans aucune : une classe à vous l'emporte toujours.

Les exemples de ces pages emploient les classes de `theme/99-docpensieve.css`,
que `init` a écrit à côté de cette documentation : supprimez les deux ensemble.

</ForTheme>

Chaque exemple est montré dans les termes du thème du site, par
[ForTheme](/versions/latest/fr/components/for-theme/) : changer `theme.framework` dans la configuration
change aussi les exemples.

## Disponibles

<Cards />

## Sans JavaScript

Aucun composant ne charge de script. Tout ce qui demande une interaction passe
donc par des éléments natifs ou par le CSS : `details` pour déplier, un lien
pour se déplacer, `animation-timeline` pour apparaître au défilement.

Quand le navigateur ne connaît pas encore l'une de ces propriétés, le composant
reste utilisable dans son état le plus simple — visible, plein, déplié. Aucun
n'attend une capacité pour fonctionner.