Catalogue des composants
Validation Soft UI Audio Evodie — Manrope, tokens noir / or / rose crème / bleu ciel. Clair et sombre via ThemeToggle.
Thème clair / sombre
ThemeProvider + ThemeToggle. Persistance localStorage, respect du système au premier chargement.
Mode actuel : clair
Or, rose crème et bleu ciel restent les accents dans les deux modes.Responsive
Breakpoints Soft UI : mobile <768 · tablette 768–1279 · desktop ≥1280.
Comportements
- Mobile — MobileNav bas, sidebar masquée, TopBar compact + recherche expandable, Dialog en bottom sheet
- Tablette — sidebar rail, grille 2–3, player avec timeline
- Desktop — shell flottant, grille 4–5, player complet
Tokens couleur
Une seule accent dominante par zone. Neutres majoritaires.
page
shell / card
primary
brand (or)
creative
collaboration
muted
danger
Typography
Famille unique : Manrope.
Heading 1 — page
Heading 2 — section
Heading 3 — carte
Body — texte principal de l’interface.
Meta — BPM, prix secondaire, timestampsLogo
Badge
Input / Field / Search / Textarea / Checkbox
Field
Label + hint + error
Visible sur la fiche produit
Montant requis
SearchInput
Forme pill — header marketplace
Checkbox / CheckboxField / CheckboxCard
Soft UI — accents, ligne libellée, carte or si cochée
Toast / Empty / Error / Skeleton / Spinner / PageLoading
Aucun beat
Publie ton premier beat pour apparaître ici.
Échec du chargement
Impossible de récupérer le catalogue.
Dialog / Dropdown / Tooltip / Tabs
Onglet beats
Avatar / Card / Separator / LocaleSwitcher / Scroller
Scroller
Thumb pill Soft UI — taille sm / md
Ligne de contenu scrollable 1
Ligne de contenu scrollable 2
Ligne de contenu scrollable 3
Ligne de contenu scrollable 4
Ligne de contenu scrollable 5
Ligne de contenu scrollable 6
Ligne de contenu scrollable 7
Ligne de contenu scrollable 8
Ligne de contenu scrollable 9
Ligne de contenu scrollable 10
Ligne de contenu scrollable 11
Ligne de contenu scrollable 12
Cartes catalogue
Modèles Soft UI : beat (flat), kit dossier fermé + cover plein cadre, détail (CoverStage), partage.
Shells
AppShell, Sidebar, TopBar — valider via le bouton Démo AppShell.
Composants shell
AppShell · Sidebar · TopBar · MiniPlayerBar · LocaleSwitcher · CartButton
MiniPlayerBar
Gold Flow
Evodie Lab · preview 30sPanier multi-articles
Zustand + Drawer + LineItem + Summary.
CartButton + Drawer
LineItem + Summary (inline)
0 item(s)