Référence des composants
Une page par composant : ce qu'il fait, comment l'installer, et toutes ses props avec leur type et leur valeur par défaut.
Ces pages sont écrites par le code. Les props viennent des types, les descriptions de leurs commentaires, la commande d'installation du registre. Aucune n'est recopiée à la main, donc aucune ne peut vieillir sans que le code vieillisse avec elle.
Pour voir un composant vivant — ses états, ses variantes, un bac à sable — le catalogue le montre. Pour le voir en situation dans un écran complet, la démonstration.
Primitives
| Composant | Ce qu'il fait | Installation |
|---|---|---|
| AspectRatio | Une boîte au rapport imposé. | sia-ui add aspect-ratio |
| Avatar | Le portrait d'une personne, ou ce qui le remplace. | sia-ui add avatar |
| Badge | Une étiquette d'état, courte et dense. | sia-ui add badge |
| Button | L'action, sous toutes ses formes. | sia-ui add button |
| Card | Une surface qui regroupe ce qui va ensemble. | sia-ui add card |
| Checkbox | Une case, ou un groupe de cases. | sia-ui add checkbox |
| Container | La largeur de lecture, et l'espacement vertical. | sia-ui add container |
| Divider | Un trait entre deux choses. | sia-ui add divider |
| IconButton | Une action réduite à son icône. | sia-ui add icon-button |
| Icons | Le jeu d'icônes commun. | sia-ui add icons |
| Input | La saisie d'une ligne de texte. | sia-ui add input |
| Overlay | Ce qui flotte à côté d'un élément. | sia-ui add overlay |
| RadioGroup | Un choix parmi plusieurs, tous visibles. | sia-ui add radio-group |
| Skeleton | La forme de ce qui n'est pas encore là. | sia-ui add skeleton |
| Spinner | Une attente sans durée connue. | sia-ui add spinner |
| Switch | Une bascule à effet immédiat. | sia-ui add switch |
| Textarea | La saisie de plusieurs lignes. | sia-ui add textarea |
| Typography | Un titre. | sia-ui add typography |
Composants
| Composant | Ce qu'il fait | Installation |
|---|---|---|
| Accordion | Des sections dépliables. | sia-ui add accordion |
| AccountMenu | Le menu du compte connecté : un avatar qui ouvre un menu à en-tête de profil. | sia-ui add account-menu |
| Alert | Un message qui reste à l'écran. | sia-ui add alert |
| AmountDisplay | Un montant, lisible d'un coup d'œil. | sia-ui add amount-display |
| Autocomplete | Un champ qui propose, sans imposer. | sia-ui add autocomplete |
| BrandIcon | Le logo d'un service tiers — Vercel, Supabase, GitHub — sans dépendance. | sia-ui add brand-icon |
| Breadcrumb | Le chemin parcouru. | sia-ui add breadcrumb |
| Calendar | Un mois de dates, sélectionnables une à une ou par plage. | sia-ui add calendar |
| Chart | Un graphique sans dépendance. | sia-ui add chart |
| ColorModeToggle | Le bouton de bascule clair / sombre. | sia-ui add color-mode-toggle |
| ColorPicker | Le choix d'une couleur. | sia-ui add color-picker |
| Countdown | Un Timer qui descend. | sia-ui add countdown |
| CurrencyInput | La saisie d'un montant. | sia-ui add currency-input |
| DataTable | Un tableau de données. | sia-ui add data-table |
| DatePicker | Une date, choisie au calendrier ou saisie au clavier. | sia-ui add date-picker |
| DateRangePicker | Un début et une fin, choisis ensemble. | sia-ui add date-range-picker |
| DateTimePicker | Une date et une heure, dans un seul champ. | sia-ui add date-time-picker |
| Descriptions | Des paires libellé / valeur, en colonnes. | sia-ui add descriptions |
| Drawer | Accessible side panel with focus management and portal rendering. | sia-ui add drawer |
| DropdownMenu | Un menu accroché à un bouton. | sia-ui add dropdown-menu |
| DurationDisplay | Une durée, en mots ou en pendule. | sia-ui add duration-display |
| EventCalendar | Un calendrier d'événements : mois, semaine, agenda. | sia-ui add event-calendar |
| Field | Le champ, et tout ce qui l'entoure. | sia-ui add field |
| FileUpload | Un dépôt de fichiers, par clic ou par glisser. | sia-ui add file-upload |
| HoverCard | Un aperçu au survol. | sia-ui add hover-card |
| ImageUpload | Un dépôt de fichier qui montre ce qu'on vient de choisir. | sia-ui add image-upload |
| InputNumber | Une saisie numérique avec incrément. | sia-ui add input-number |
| JsonEditor | Une zone de saisie qui connaît la forme de ce qu'on y écrit. | sia-ui add json-editor |
| JsonView | Un JSON en lecture seule, que l'on déplie. | sia-ui add json-view |
| Label | Le nom d'un champ. | sia-ui add label |
| LiveIndicator | Dit si l'écran se met à jour tout seul. | sia-ui add live-indicator |
| LogStream | Un journal d'exécution qui se lit en direct. | sia-ui add log-stream |
| MarkdownEditor | Une saisie Markdown, avec son aperçu. | sia-ui add markdown-editor |
| MiniCalendar | Le même calendrier, en plus petit. | sia-ui add mini-calendar |
| Modal | Une boîte qui interrompt. | sia-ui add modal |
| MonthPicker | Un mois, sans le jour. | sia-ui add month-picker |
| MultiSelect | Plusieurs choix dans une liste. | sia-ui add multi-select |
| OtpInput | Un code à usage unique, chiffre par chiffre. | sia-ui add otp-input |
| Pagination | La navigation entre les pages. | sia-ui add pagination |
| PasswordInput | Un champ de mot de passe. | sia-ui add password-input |
| PhoneInput | Les pays servis par défaut. | sia-ui add phone-input |
| Popover | Un panneau attaché à un élément, avec du contenu qu'on peut viser. | sia-ui add popover |
| Progress | L'avancement d'une tâche. | sia-ui add progress |
| QrCode | Un code à scanner. | sia-ui add qr-code |
| Rating | Une note, en étoiles. | sia-ui add rating |
| ReferenceSelect | Un choix parmi des objets métier, pas parmi des mots. | sia-ui add reference-select |
| RelativeTime | Une date, dite par rapport à maintenant. | sia-ui add relative-time |
| ResizablePanel | Deux zones, et une poignée entre elles. | sia-ui add resizable-panel |
| RichTextEditor | Une saisie de texte mis en forme. | sia-ui add rich-text-editor |
| ScrollArea | Une zone défilante sobre. | sia-ui add scroll-area |
| SearchInput | Une recherche, avec son délai. | sia-ui add search-input |
| SecretFields | Des secrets en écriture seule : les noms se lisent, les valeurs jamais. | sia-ui add secret-fields |
| Select | Un choix parmi une liste. | sia-ui add select |
| Slider | Rendu DOM du slider. | sia-ui add slider |
| Statistic | Un nombre qu'on lit d'un coup d'œil. | sia-ui add statistic |
| Steps | Une progression en étapes. | sia-ui add steps |
| Tabs | Des vues qui se remplacent au même endroit. | sia-ui add tabs |
| TagsInput | Une liste de mots, saisis à la volée. | sia-ui add tags-input |
| Timeline | Une suite d'événements, dans l'ordre. | sia-ui add timeline |
| TimePicker | Une heure, au pas voulu. | sia-ui add time-picker |
| Timer | Un temps qui s'écoule, dans un sens ou dans l'autre. | sia-ui add timer |
| TimeRangePicker | Une heure de début et une heure de fin. | sia-ui add time-range-picker |
| Toast | La pile visible. | sia-ui add toast |
| Toggle | Un bouton à deux états. | sia-ui add toggle |
| Tooltip | Bulle d'aide positionnée hors du flux. | sia-ui add tooltip |
| Tour | Une visite guidée de l'écran. | sia-ui add tour |
| Transfer | Deux listes, et ce qui passe de l'une à l'autre. | sia-ui add transfer |
| Tree | Une arborescence qu'on déplie. | sia-ui add tree |
| TreeSelect | Un choix dans une arborescence. | sia-ui add tree-select |
| WeekPicker | Une semaine, désignée par son numéro. | sia-ui add week-picker |
| YearPicker | Une année, choisie dans une plage. | sia-ui add year-picker |
Patterns
| Composant | Ce qu'il fait | Installation |
|---|---|---|
| ActivityLog | Un journal d'activité, filtrable et paginé par le serveur. | sia-ui add activity-log |
| AppShell | La coquille d'une application. | sia-ui add app-shell |
| AsyncState | Les trois états d'un chargement, au même endroit. | sia-ui add async-state |
| AuditMeta | Qui a fait quoi, et quand. | sia-ui add audit-meta |
| AuthLayout | La page qui précède l'application : connexion, inscription, mot de passe oublié. | sia-ui add auth-layout |
| CommandPalette | Tout ce que l'application sait faire, au clavier. | sia-ui add command-palette |
| ConfirmDialog | La question qu'on pose avant de détruire. | sia-ui add confirm-dialog |
| CrudPage | Une page de liste, avec ses quatre opérations. | sia-ui add crud-page |
| DateRangeFilter | Une période, avec ses raccourcis. | sia-ui add date-range-filter |
| EmptyState | Ce qu'on montre quand il n'y a rien. | sia-ui add empty-state |
| EntityMeta | Les traces d'un objet : créé le, modifié par, identifiant. | sia-ui add entity-meta |
| ErrorState | Un échec, et de quoi en sortir. | sia-ui add error-state |
| EventManager | Un calendrier où l'on gère ses événements. | sia-ui add event-manager |
| FiltersBar | La barre au-dessus d'une liste : recherche, filtres, actions. | sia-ui add filters-bar |
| Form | Un formulaire décrit par ses champs. | sia-ui add form |
| JobProgress | Le suivi d'une opération asynchrone : un déploiement, un import, un export. | sia-ui add job-progress |
| KpiGrid | Une rangée d'indicateurs. | sia-ui add kpi-grid |
| PageHeader | Le titre d'un écran, et ses actions. | sia-ui add page-header |
| PermissionGate | Ce qui n'apparaît qu'avec le droit correspondant. | sia-ui add permission-gate |
| RequireSession | Ce qui se trouve derrière une session valide. | sia-ui add require-session |
| Resource | Déclarer une ressource. | sia-ui add resource |
| Sidebar | La navigation principale. | sia-ui add sidebar |
| StatCard | Un indicateur, dans une carte. | sia-ui add stat-card |
| UnsavedChangesGuard | L'avertissement avant de quitter une saisie en cours. | sia-ui add unsaved-changes-guard |