Composants

Les 54 composants, rendus. Le catalogue est lu depuis le barrel au moment du build et les props viennent des interfaces Props exportées — pas d'une liste recopiée, parce que le README de muse a affiché trois décomptes différents en même temps pour avoir voulu faire autrement.

Mise en page

Stack

Une colonne, à l'un des quatre barreaux. C'est le parent qui possède l'espace.

bound
tight
content
section
Inline

Une ligne qui passe à la ligne par défaut — sinon elle déborde ou écrase ses cibles tactiles.

Section

Un bloc titré. `card` optionnel : une section qui contient une grille de cartes n'en est pas une.

Stockage

Sur tous vos espaces.

12,4 Go utilisés
87,6 Go restants
Page · PageHeader

La colonne de page : centrage, largeur maximale, padding extérieur, rythme entre sections. Cette page en est une.

Tout ce que vous lisez est dans un <Page>, et chaque titre de section est un <Section>.

Référence des props — 5 composants
Inline 5 props

Une ligne qui passe à la ligne par défaut, à l'un des quatre barreaux. Sans retour, une barre d'actions déborde ou écrase ses cibles tactiles.

étend HTMLAttributes<HTMLDivElement>

PropType
gap Gap
align Align
wrap boolean
class string
children * Snippet
Page 4 props

La colonne de page : centrage, largeur maximale, padding extérieur et rythme entre les sections. Se place à l'intérieur du conteneur de défilement de la coquille.

étend HTMLAttributes<HTMLDivElement>

PropType
width PageWidth
gap Gap
class string
children * Snippet
PageHeader 5 props

Le bloc de titre d'une page : h1, description, actions et lien retour, avec le titre et sa description liés par le barreau `bound`.

étend HTMLAttributes<HTMLElement>

PropType
title * string
description string
actions Snippet
back { href: string; label?: string }
class string
Section 8 props

Un bloc titré dans une page. La carte est optionnelle : une section qui contient une grille de cartes n'en est pas une elle-même.

étend HTMLAttributes<HTMLElement>

PropType
title string
description string
actions Snippet
card boolean
gap Gap
bodyClass string
class string
children Snippet
Stack 3 props

Une colonne à l'un des quatre barreaux nommés. C'est le parent qui possède l'espace entre ses enfants, jamais l'enfant.

étend HTMLAttributes<HTMLDivElement>

PropType
gap Gap
class string
children * Snippet

Atomes

Button

Cinq variantes sur un axe d'emphase, trois tailles. `lg` dès qu'il partage une ligne avec un champ.

IconButton

Rond, 44px, avec le press de la maison. Toujours un aria-label.

Badge

Le vocabulaire de tons, en huit valeurs. Se dimensionne sur son texte, jamais sur sa colonne.

neutral accent info success warning danger owner admin
Alert

Ce qui reste à l'écran. Un retour qui passe est un toast.

Synchronisation en cours

Trois espaces restants.
Input · Textarea · Select

Tous en h-11. Dans un Field ils adoptent son id.

Checkbox · Radio · Switch

Les trois contrôles qui s'enveloppent dans leur propre label.

Avatar

Retombe sur l'initiale quand l'image échoue — pas sur son alt.

Camille Yann Zoé
StatusDot · Spinner · Skeleton

État de connexion, attente courte, forme à remplir.

Connecté Dégradé Hors ligne
Card · Divider

Surface sans bordure : le remplissage sépare. Le trait ne porte aucune marge.

Au-dessus du trait
En dessous
Icon

SVG inline, rendu côté serveur, sans requête réseau.

Référence des props — 18 composants
Alert 4 props

Un message qui reste à l'écran. Pour un retour qui passe, c'est un toast.

étend HTMLAttributes<HTMLDivElement>

PropType
tone Tone
title string
class string
children Snippet
Avatar 5 props

L'image d'un membre, avec repli sur l'initiale quand elle échoue à charger — pas sur son texte alternatif.

étend HTMLAttributes<HTMLSpanElement>

PropType
src string
alt string
name string
size Size
class string
Badge 3 props

Une pastille d'état ou de rôle, dimensionnée sur son texte. Huit tons, un seul vocabulaire.

étend HTMLAttributes<HTMLSpanElement>

PropType
tone Tone
class string
children * Snippet
Button 12 props

L'action principale. Cinq variantes sur un axe d'emphase, trois tailles, et `size="lg"` dès qu'il partage une ligne avec un champ.

étend Omit<HTMLButtonAttributes, 'type'>

PropType
href string
target HTMLAnchorAttributes['target']
rel HTMLAnchorAttributes['rel']
download HTMLAnchorAttributes['download']
type HTMLButtonAttributes['type']
variant Variant
size Size
disabled boolean
icon string
iconRight string
class string
children Snippet
Card 5 props

La surface conteneur du système : remplissage sans bordure, `p-5`. Avec `href`, elle devient un lien et gagne le survol et l'anneau de focus.

étend HTMLAttributes<HTMLDivElement>

PropType
href string
target HTMLAnchorAttributes['target']
rel HTMLAnchorAttributes['rel']
class string
children * Snippet
Checkbox 3 props

Une case à cocher qui adopte l'identifiant de son `Field`. La boîte fait 16px ; c'est le libellé qui porte la cible tactile.

étend Omit<HTMLInputAttributes, 'type' | 'checked'>

PropType
label string
checked boolean
class string
ColorPicker 7 props

Le choix d'une couleur quelconque : sélecteur natif et champ hexadécimal. Pour choisir dans une palette fixe, c'est `SwatchPicker`.

étend Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>

PropType
value string
swatches readonly string[]
labels Record<string, string>
placeholder string
disabled boolean
name string
onChange (hex: string) => void; class?: string;
Divider 1 props

Un filet de séparation. Il ne porte aucune marge : son air vient du `gap` de son parent.

étend HTMLAttributes<HTMLHRElement>

PropType
class string
Icon 3 props

Une icône en SVG inline, rendue côté serveur et sans requête réseau. Le nom vient toujours de la map `icons`.

étend SVGAttributes<SVGSVGElement>

PropType
icon * An iconify name (`solar:settings-linear`) — usually from the `icons` map.string
size Rendered size in pixels, applied as width, height and a matching CSS box. @default 16number
class string
IconButton 3 props

Un bouton rond de 44px pour une action sans libellé. Il prend l'icône en enfant, et toujours un `aria-label`.

étend HTMLButtonAttributes

PropType
variant Variant
class string
children * Snippet
Input 2 props

Un champ de saisie en 44px de haut. Dans un `Field`, il adopte l'identifiant, la description et l'état d'erreur du champ.

étend HTMLInputAttributes

PropType
class string
value string | number
Radio 3 props

Un bouton radio. La validité appartient au groupe, pas au bouton, donc il ne porte pas `aria-invalid`.

étend HTMLInputAttributes

PropType
label string
group string
class string
Select 3 props

Une liste déroulante native, alignée sur la hauteur des autres champs.

étend HTMLSelectAttributes

PropType
class string
value string
children * Snippet
Skeleton 1 props

La silhouette d'un contenu qui va se remplir. Se cache franchement sous mouvement réduit : son absence se lit correctement.

étend HTMLAttributes<HTMLDivElement>

PropType
class string
Spinner 3 props

Une attente courte. Sous mouvement réduit il ralentit au lieu de se figer — un indicateur d'activité figé n'indique rien.

étend HTMLAttributes<HTMLSpanElement>

PropType
size Size
label string
class string
StatusDot 4 props

Un état de connexion ou de santé, en une pastille et son libellé.

étend HTMLAttributes<HTMLSpanElement>

PropType
tone Tone
label string
pulse boolean
class string
Switch 4 props

Un interrupteur. Dans une `SettingsRow` il prend `aria-label` et jamais de libellé visible : la ligne le porte déjà.

étend Omit<HTMLInputAttributes, 'type' | 'checked'>

PropType
label string
checked boolean
disabled boolean
class string
Textarea 2 props

Une zone de texte multiligne, redimensionnable verticalement, qui adopte le contexte de son `Field`.

étend HTMLTextareaAttributes

PropType
class string
value string

Molécules

Field

Rend un vrai <label for>, et les contrôles muse adoptent son id par contexte.

Utilisée pour l'invitation.
Tabs

Pastille inversée qui glisse. Avec des href, l'URL est la source de vérité.

OptionCards

Le contrôle « un parmi N » : thème, mode d'affichage, base de facturation.

StatCard

Un chiffre et son libellé. La gouttière entre eux ne descend jamais sous le padding.

Projets actifs 12
Heures ce mois 148,5
Membres 7
SecretField

Masque à longueur fixe, révélation qui se recache, copie avec accusé.

fc_r••••••••f6a7
SettingsSection · SettingsRow

La forme standard d'une page de réglages, dans toute la suite.

Notifications

Ce qui arrive dans votre boîte.

Résumé hebdomadaire

Chaque lundi matin.

Mentions

Quand quelqu'un vous cite.

SwatchPicker · ColorPicker

Choisir dans une palette fixe, ou choisir n'importe quelle couleur.

SpaceSwitcher

Le sélecteur d'espace du rail. Se retourne quand il manque de place sous lui.

NavButton

Une ligne de navigation. Se réduit à un carré de 44px dans le rail replié.

EmptyState

Une liste vide est un EmptyState, jamais un paragraphe. La hauteur est le sujet.

Aucun projet

Créez-en un pour commencer à suivre le temps.

Dropzone

Valide aussi le dépôt, pas seulement le sélecteur — le navigateur ne filtre que le second.

Référence des props — 14 composants
Dropzone 11 props

Le dépôt de fichiers. Il valide aussi le chemin du glisser-déposer, pas seulement celui du sélecteur — le navigateur ne filtre que le second.

étend HTMLLabelAttributes

PropType
files File[]
accept string
multiple boolean
maxSize number
maxFiles number
disabled boolean
label string
browseLabel Text of the browse affordance. @default 'Parcourir'string
dropAnnouncement Announced to assistive tech while a drag is over the zone. @default 'Relâchez pour ajouter les fichiers'string
hint string
onFiles (files: File[]) => void; onReject?: (rejections: Rejection[]) => void; children?: Snippet; class?: string;
EmptyState 6 props

Une liste sans contenu. La hauteur est le sujet : une carte de deux lignes se lit comme une panne, une carte haute et calme comme un choix.

étend HTMLAttributes<HTMLDivElement>

PropType
icon string
title * string
description string
bare boolean
class string
children Snippet
Field 6 props

L'étiquetage d'un contrôle. Il rend un vrai `label for`, et les contrôles muse adoptent son identifiant par contexte, sans câblage.

étend Omit<HTMLAttributes<HTMLDivElement>, 'children'>

PropType
label string
helper string
error string
for string
children * Snippet<[{ id: string; describedBy: string | undefined }]>
class string
NavButton 8 props

Une ligne de navigation. Elle se réduit à un carré de 44px quand le rail se replie.

étend HTMLAnchorAttributes | HTMLButtonAttributes

PropType
href string
icon string
label string
active boolean
collapsed boolean
textDelay number
class string
right Snippet
OptionCards 5 props

Le choix d'une option parmi N — thème, mode d'affichage, base de facturation — en cartes à icône plutôt qu'en liste.

étend Omit<HTMLAttributes<HTMLDivElement>, 'onselect'>

PropType
options Option[]
value string
name string
label string
onSelect (value: string) => void; class?: string;
SecretField 15 props

L'affichage d'un secret : masque à longueur fixe, révélation qui se recache, copie avec accusé, et `REDACTED` traité comme une absence de valeur.

étend HTMLAttributes<HTMLDivElement>

PropType
value string
label string
helper string
error string
placeholder string
editable boolean
sensitive boolean
copyable boolean
mask 'ends' | 'full'
visible boolean
autoHideMs number
disabled boolean
for string
actions Snippet
onReveal (visible: boolean) => void; onCopy?: (ok: boolean) => void; class?: string;
SettingsRow 6 props

Une ligne de réglage : libellé, description et contrôle. Le contrôle prend `aria-label`, jamais un libellé visible.

étend HTMLAttributes<HTMLDivElement>

PropType
label string
description string
for string
stacked boolean
class string
children Snippet
SettingsSection 7 props

Un bloc de réglages. C'est `Section` avec la carte activée par défaut, parce qu'un bloc de réglages est une surface qui porte des lignes.

étend HTMLAttributes<HTMLElement>

PropType
title string
description string
actions Snippet
bare boolean
bodyClass string
class string
children Snippet
SpaceSwitcher 3 props

Le sélecteur d'espace du rail. Il se retourne vers le haut quand il manque de place sous lui.

étend HTMLAttributes<HTMLDivElement>

PropType
spaces SpaceItem[]
activeId string | null
onSelect (id: string | null) => void; personalLabel?: string; manageHref?: string; manageLabel?: string; class?: string;
StatCard 5 props

Un chiffre et son libellé. La gouttière entre les cartes ne descend jamais sous leur propre padding.

étend HTMLAttributes<HTMLDivElement>

PropType
label * string
value * string | number
delta string
children Snippet
class string
SwatchPicker 8 props

Le choix dans une palette fixe — la couleur d'identité d'un membre, d'un calendrier. Pour une couleur quelconque, c'est `ColorPicker`.

étend Omit<HTMLAttributes<HTMLDivElement>, 'onselect'>

PropType
colors readonly string[]
value string
labels Record<string, string>
showLabels boolean
size Size
name string
label string
onSelect (color: string) => void; class?: string;
Tabs 3 props

Le passage d'une section à l'autre, par une pastille inversée qui glisse. Avec des `href`, l'URL devient la source de vérité.

étend HTMLAttributes<HTMLDivElement>

PropType
items Item[]
value string
onChange (id: string) => void; panelId?: string; label?: string; class?: string;
Toast 5 props

La présentation d'un message éphémère. La file et l'auto-fermeture appartiennent à `Toaster`.

étend HTMLAttributes<HTMLDivElement>

PropType
tone ToastTone
title string
icon string | null
action ToastAction
onDismiss () => void; class?: string; children?: Snippet;
UploadProgress 2 props

L'avancement d'un envoi de fichiers, par élément, avec ses états de reprise et d'échec.

étend HTMLAttributes<HTMLDivElement>

PropType
items * Item[]
onCancel (id: string) => void; onRetry?: (id: string) => void; showTotal?: boolean; class?: string;

Organismes

Modal · Drawer · ConfirmModal

Un <dialog> natif : le navigateur les met dans sa couche supérieure, au-dessus de tout z-index.

Renommer l'espace

Le nom est visible par tous les membres.

Une feuille du bas, qui se referme au glissement.

Supprimer cet espace ?

Les projets qu'il contient partent avec lui. C'est définitif.

Table

Surface de données. Le tri et la sélection appartiennent encore au consommateur.

ProjetHeures
Refonte du site42,5
Application mobile18,0
ProfileCard

Le bloc d'identité : avatar, nom, et les actions de session.

Camille Roux
Camille Roux
camille@studio.com
Topbar

Chrome collant, utilisé sur mobile là où le rail n'existe pas.

Facile
Toaster

Un retour sans question dedans. Se met en pause au survol, ne peut pas couvrir un <dialog>.

Référence des props — 9 composants
ConfirmModal 8 props

La confirmation d'une action destructive. Jamais une `Modal` nue avec deux boutons : elle gère l'attente et reste ouverte en cas d'échec.

étend HTMLDialogAttributes

PropType
open boolean
title * string
description string
confirmLabel string
cancelLabel string
tone Tone
icon string
onConfirm () => void | Promise<void>; onCancel?: () => void; children?: Snippet; class?: string;
Drawer 9 props

Une feuille qui monte du bas, refermable au glissement. Pour un panneau de bureau, c'est une `Modal`.

étend HTMLDialogAttributes

PropType
open boolean
title string
description string
children * Snippet
footer Snippet
showHandle boolean
showClose boolean
dismissible boolean
onClose () => void; class?: string;
MobileNav 5 props

La barre-pilule flottante des écrans étroits. Quatre entrées tiennent au plancher de 360px.

étend HTMLAttributes<HTMLElement>

PropType
items NavItem[]
user User
profileHref string
profileActive boolean
class string
Modal 6 props

Un dialogue natif : le navigateur le place dans sa couche supérieure, au-dessus de tout z-index.

étend HTMLDialogAttributes

PropType
open boolean
title string
dismissible boolean
showClose boolean
size Size
onClose () => void; header?: Snippet; footer?: Snippet; children: Snippet; class?: string;
ProfileCard 10 props

Le bloc d'identité d'un membre : avatar, nom et actions de session.

étend Omit<HTMLAttributes<HTMLDivElement>, 'role'>

PropType
name * string
email string
avatar string
color string
role string
meta Meta[]
actions Snippet
children Snippet
orientation Orientation
class string
SideBar 10 props

Le rail de navigation, une carte flottante et repliable. Il porte la navigation, le sélecteur d'espace et la carte utilisateur.

étend HTMLAttributes<HTMLDivElement>

PropType
icon string
title string
pages Page[]
user User
userHref string
userActive boolean
collapsed boolean
showSearch boolean
showCollapse boolean
onSearch () => void; spaces?: SpaceItem[]; activeSpaceId?: string | null; onSpaceSelect?: (id: string | null) => void; manageSpacesHref?: string; personalSpaceLabel?: string; manageSpacesLabel?: string; class?: string;
Table 2 props

La surface d'un tableau de données. Le tri et la sélection appartiennent encore au consommateur.

étend HTMLAttributes<HTMLDivElement>

PropType
children * Snippet
class string
Toaster 2 props

La file de messages éphémères, montée une seule fois par application, à la racine.

étend HTMLAttributes<HTMLDivElement>

PropType
position 'top' | 'bottom'
class string
Topbar 2 props

Un bandeau collant, utilisé là où le rail n'existe pas.

étend HTMLAttributes<HTMLElement>

PropType
children * Snippet
class string

Graphiques

LineChart

SVG sans dépendance. Ne passez pas vos propres couleurs : la palette est validée pour le contraste.

BarChart

Empilable. Chaque coin qui fait face à une gouttière est arrondi ; la ligne de base reste carrée.

DonutChart

Jamais arrondi au stroke-linecap : ça pousse chaque part d'une demi-épaisseur au-delà de son angle.

156
  • Design 42 · 26.9%
  • Développement 96 · 61.5%
  • Réunions 18 · 11.5%
Donut chart of 3 slices totalling 156: Design 26.9%, Développement 61.5%, Réunions 11.5%
SliceValueShare
Design4226.9%
Développement9661.5%
Réunions1811.5%
Sparkline

Une tendance dans une ligne de tableau, sans axes ni légende.

Référence des props — 6 composants
BarChart 8 props

Un graphique en barres, empilable. Chaque coin face à une gouttière est arrondi ; la ligne de base reste carrée.

étend HTMLAttributes<HTMLDivElement>

PropType
series * ChartSeries[]
labels * string[]
height number
stacked boolean
horizontal boolean
showGrid boolean
showLegend boolean
yFormat (n: number) => string; yTicks?: number; animate?: boolean; emptyLabel?: string; class?: string;
ChartLegend 2 props

La légende d'un graphique. L'écart entre deux entrées bat toujours celui qui les compose.

PropType
items * ChartLegendItem[]
class string
ChartTooltip 6 props

L'infobulle d'un graphique, ramenée dans les bornes de son conteneur et du viewport.

PropType
x * number
y * number
title string
rows * ChartTipRow[]
visible * boolean
class string
DonutChart 8 props

Un anneau de proportions. Jamais arrondi au `stroke-linecap` : ça pousse chaque part au-delà de l'angle qu'elle représente.

étend HTMLAttributes<HTMLDivElement>

PropType
data * ChartSlice[]
size number
thickness number
corner number
showLegend boolean
centerLabel string
centerValue string | number
valueFormat (n: number) => string; animate?: boolean; emptyLabel?: string; class?: string;
LineChart 8 props

Une évolution dans le temps. Ne passez jamais vos propres couleurs : la palette est validée pour le contraste et le daltonisme.

étend HTMLAttributes<HTMLDivElement>

PropType
series * ChartSeries[]
labels * string[]
height number
area boolean
smooth boolean
showGrid boolean
showLegend boolean
yFormat (n: number) => string; xFormat?: (label: string, i: number) => string; yTicks?: number; animate?: boolean; emptyLabel?: string; class?: string;
Sparkline 7 props

Une tendance dans une ligne de tableau, sans axes ni légende.

étend HTMLAttributes<HTMLDivElement>

PropType
data * number[]
height number
area boolean
smooth boolean
color string
showLast boolean
valueFormat (n: number) => string; animate?: boolean; emptyLabel?: string; class?: string;

Motion

Référence des props — 2 composants
PageTransition 5 props

L'animation d'un changement de route, cadencée sur la route. Entrée seule : un vrai fondu croisé demanderait de monter les deux pages.

PropType
key * string | number
duration number
distance number
children * Snippet
class string
TextElevate 6 props

Une ligne de texte qui monte en place. Utilisée pour le titre du rail et ses libellés.

PropType
text * string
visible boolean
delay number
stagger number
duration number
class string