Plus de 300 composants et effets animés et accessibles pour React, Vue, Svelte, Angular, Astro ou HTML pur. Des Web Components natifs, zéro dépendance, et un
npx marvelous-ui-library@latest init
Free sans clé. Vous avez acheté Pro ? Collez votre clé de licence quand elle vous est demandée.
Accès anticipé le jour du lancement. Pas de spam, désinscription en un clic · Confidentialité.
Payez une fois, gardez-le pour toujours · Remboursement sous 14 jours (conditions)
Une seule bibliothèque. Pour toutes les stacks vers lesquelles vous migrerez.
Lancez-la dans votre projet. Choisissez une installation dans le projet ou partagée au niveau utilisateur. Appuyez ensuite sur Entrée pour installer le pack Free, ou collez votre clé de licence pour installer Pro.
Free sans clé. Pro avec votre clé de licence.
npx marvelous-ui-library@latest init
Ensuite : npx marvelous-ui-library@latest add dialog tabs
Quand une nouvelle version sort : npx marvelous-ui-library@latest update
Pas de Node.js ? Téléchargez le Pro pack avec votre clé de licence.
$
Faites
Offre Pro
Publier la version 2.4
Elle passe en ligne pour tous les utilisateurs à la fois.
Supprimer “Lumen redesign”
Les 48 fichiers et leur historique disparaissent avec lui.
<mv-hold-button>Chaque composant avec un aperçu animé, son balisage d'usage, l'API complète et les notes d'accessibilité. Filtrez par catégorie, kit, Exclusif ou Free pack.
Un serveur MCP intégré permet à n’importe quel agent de parcourir le catalogue, de lire chaque API et d’installer les composants avec leurs dépendances. Aucune prop inventée.
Custom Elements natifs + CSS en couches. Changez de stack, gardez votre UI.
Design tokens OKLCH. Faites glisser le curseur : toute la page change de thème en direct.
Rôles ARIA, navigation complète au clavier, focus visible, mouvement réduit. Pas une réflexion après coup.
Chaque page de composant a ses notes d’accessibilité : ce qu’il fait pour les personnes qui naviguent au clavier, utilisent un lecteur d’écran ou préfèrent un mouvement réduit.
Des fichiers lisibles arrivent dans votre dépôt. Pas de boîte noire, pas d’enfermement.
20 nouveaux composants pour les détails que les versions faites main oublient : une saisie automatique qui continue de fonctionner, un « il y a 3 minutes » qui reste à jour, un compteur qui ne sursaute jamais au premier affichage.
<mv-password-field>
<mv-relative-time>
<mv-count-bump>
Afficher et masquer, une alerte Verr. Maj, des règles affichées avant la première frappe.
Des étiquettes à coller depuis un tableur, envoyées comme un vrai champ de formulaire.
Refuser est aussi simple qu’accepter, et les scripts attendent vraiment le consentement.
Se masque au défilement vers le bas, jamais quand le focus ou un menu s’y trouve.
Copie la commande, jamais l’invite, la sortie ou les numéros de ligne.
Sans dérive, sans nombres négatifs, l’échéance à l’heure locale du visiteur.
Un « il y a 3 minutes » qui reste à jour, sur un seul minuteur partagé.
« ▲ +12,4 % vs semaine dernière », lu à voix haute en une phrase claire.
Fermée une fois, mémorisée, et elle ne décale jamais la mise en page.
Enregistrement, enregistré, hors ligne : il ne clignote jamais et n’affiche jamais « Enregistré » trop tôt.
Un bouton « Afficher plus » qui n’existe que lorsque le texte est vraiment coupé.
Des fonds en maillage, halo, grille et grain avec une seule classe, zéro JavaScript.
Un petit anneau de progression à côté du curseur système pendant qu’une zone travaille.
Une plaque douce qui épouse le lien survolé, en gardant le curseur système.
Un guide de lecture d’une ligne qui suit le pointeur ou le clavier.
N’apparaît que lorsque vous remontez, et ramène le focus en haut.
Glisser, molette et indices sur les bords pour les tableaux larges et les rangées de cartes.
Des emplacements d’image qui ne décalent rien, ne clignotent pas et n’affichent jamais d’icône cassée.
Des compteurs de panier et de badge qui sursautent quand ils changent, jamais au premier affichage.
La feuille de partage native, ou un menu sans aucune requête tierce.
155 Exclusives : des composants originaux introuvables dans aucune autre bibliothèque. Les plus utiles sont réunis en 8 kits, selon le problème qu’ils résolvent. Beaucoup reprennent une mécanique tirée d’un film, d’un jeu, d’une série ou d’un roman et en font un comportement d’interface utile. Seule la mécanique est empruntée, jamais les visuels, logos, typographies ou couleurs.
Des formulaires longs qui survivent aux crashs, aux fautes de frappe et aux murs d’erreurs.
Une friction à la mesure du vrai risque d’une suppression, d’une révocation ou d’un secret.
Des attentes, des refus et des verrous qui disent ce qui se passe vraiment.
Sources, interprétation et auteur rendus visibles, affirmation par affirmation.
Les sosies repérés avant le clic, les contenus intégrés muets tant qu’on ne les invite pas.
Des alertes qui gagnent la confiance et s’atténuent, des absences qui donnent l’alarme.
Des chiffres qui montrent comment ils sont calculés, de quand ils datent et à quelle échelle.
Ciblage au clavier, fils de retour et exploration pour les apps denses.
Les Exclusives sont incluses dans toutes les offres payantes. Les titres ne sont cités que pour indiquer l’origine de chaque mécanique et restent la propriété de leurs détenteurs respectifs. Sans affiliation avec les ayants droit ni approbation de leur part.
Les agents IA excellent à écrire de l’UI et sont très mauvais pour retenir l’API d’une bibliothèque. Le serveur MCP de Marvelous leur donne le catalogue, l’API et le markup de démo de chaque composant, et un outil qui installe les fichiers avec leurs dépendances. Résultat : du code correct du premier coup, quel que soit le framework du projet. Fonctionne avec Claude Code, Codex, Cursor, Copilot et tout agent compatible MCP.
search_components recherche plein texte dans les noms, tags et APIget_component API, notes d’accessibilité, markup de démo de référenceinstall_components copie les fichiers + dépendances, renvoie le snippet pour votre frameworkget_design_tokens pour que votre CSS sur mesure suive votre thèmeLa commande d’installation inclut le serveur MCP et les instructions pour l’agent.
L’installation dans le projet configure les agents compatibles dans ce dépôt. L’installation utilisateur détecte Codex, Claude Code, Cursor et OpenCode, puis vous laisse les connecter à tous vos projets. Choisissez tous les agents détectés, quelques-uns, ou utilisez la CLI sans agent. La commande uninstall retire les connexions des agents et la bibliothèque.
| Fonctionnalité | Kit UI React typique | Marvelous UI |
|---|---|---|
| Fonctionne avec Vue, Svelte, Angular, Astro, HTML | Non | Oui |
| Dépendances à l’exécution | framer-motion, three, gsap… | aucune |
| Serveur MCP pour agents IA | rarement | inclus |
| Des composants originaux introuvables ailleurs | rarement | 155 Exclusives |
| Mode sombre + mouvement réduit partout | variable | chaque composant |
| Votre CSS l’emporte toujours sur le nôtre | Non | Oui |
| Tarifs | souvent un abonnement annuel | paiement unique, à vous pour toujours |
Chaque offre inclut tous les composants, le serveur MCP, la CLI et les exports depuis le Playground. L’offre à vie y ajoute tous les futurs composants et toutes les mises à jour, sans renouvellement.
Prix en USD. UE et Royaume-Uni : TVA incluse. États-Unis, Canada et Inde : taxe de vente ajoutée au paiement. Vendu par notre marchand officiel (merchant of record), Polar. Remboursement sous 14 jours (conditions).
Les composants de base du quotidien, avec la même CLI et le même serveur MCP que les offres payantes. Aucun compte ni clé de licence nécessaire. Sous licence MIT : lisez le code source et livrez.
ZIP · téléchargement direct · inclut le serveur MCP, la CLI et la doc
Votre téléchargement a commencé. Le prix de lancement vous intéresse aussi ?
Facultatif, le Free pack n’en a jamais besoin. Un seul e-mail, le jour du lancement, avec le prix de lancement. Pas de spam, désinscription en un clic · Confidentialité.
La commande d’installation installe le pack Free si vous ne saisissez pas de clé de licence. Le ZIP direct reste disponible ci-dessus pour une utilisation manuelle.
Chaque offre débloque toute la bibliothèque.
Une landing page animée, accessible et pensée pour la conversion, livrée dans votre stack, avec le code source. À partir de 2 850 $. 3 créneaux par mois.
Réalisée par Quentin Fankrache, auteur de Marvelous UI.
Oui. Les composants sont des Custom Elements standard, avec un markup en light DOM et du CSS en cascade layers. React 19+ les prend en charge nativement ; Vue demande une ligne (isCustomElement) ; Angular demande CUSTOM_ELEMENTS_SCHEMA ; Svelte, Astro et le HTML pur fonctionnent tels quels. Le MCP/la CLI renvoie le snippet exact pour votre framework.
Les Exclusives sont 155 composants originaux introuvables dans aucune autre bibliothèque, inclus dans toutes les offres payantes. Les kits réunissent les plus utiles selon le problème qu’ils résolvent, comme des formulaires qui ne perdent personne ou des actions destructives sans risque. Voir les 8 kits
L’offre à vie se paie une seule fois : chaque nouveau composant, chaque mise à jour et chaque export du Playground, tant que Marvelous UI est publié, sans renouvellement. À partir du 15 oct., vous pouvez aussi vous abonner à l’année ou au mois et obtenir la même chose tant que l’abonnement court. Si vous arrêtez, vous gardez chaque version téléchargée, pour tous vos projets, pour toujours. Lancez npx marvelous-ui-library@latest update quand vous souhaitez mettre un projet à jour ; vos modifications locales ne sont pas écrasées.
La CLI conserve localement les archives Pro vérifiées. Lancez npx marvelous-ui-library@latest restore pour réinstaller une version obtenue, même après la fin d’un abonnement.
Jusqu’au 14 oct., l’offre à vie est vendue à son prix de lancement : 120 $ au lieu de 399 $ pour Solo. C’est la même licence à vie qu’après le lancement, avec toutes les mises à jour futures et sans renouvellement, simplement moins chère. Les abonnements ouvrent le 15 oct.
Oui, pour un nombre illimité de produits finis, usage commercial compris. Ce que vous ne pouvez pas faire : revendre ou redistribuer les composants eux-mêmes sous forme de kit UI, d’article de marketplace de templates ou de bibliothèque concurrente.
Les composants utilisés dans ce site ou cette app sont livrés avec, code source compris. Votre client ne peut les utiliser que pour exploiter et maintenir ce produit, pas dans un autre. Avec Unlimited, vous pouvez aussi remettre ce code source pour que le client ou ses autres prestataires maintiennent le produit. Un freelance qui travaille sur vos projets compte comme l’un de vos développeurs. Lire la licence
Oui. Construisez votre site gratuitement : partez d’un modèle, glissez-y des sections et des composants, modifiez le texte, choisissez la couleur de votre marque. Publiez-le quand vous êtes prêt : toutes les offres vous donnent un site HTML statique prêt à déposer sur Netlify ou Cloudflare Pages, ou son code source HTML, React, Vue, Svelte ou Astro. Nous ne l’hébergeons pas : il tourne seul, sans rien à renouveler pour rester en ligne. Gardez le code source pour toujours : vous recevez le code de votre site selon la licence.
Oui. Les composants sont de simples balises HTML, des fichiers CSS et des modules JavaScript : ils fonctionnent dans n’importe quel template rendu côté serveur. Chargez le CSS et les scripts une fois, puis écrivez les balises. Copiez les fichiers avec la CLI (elle demande Node.js) ou depuis le ZIP : le Free pack, ou le Pro pack depuis la page de téléchargement.
Parfaitement. Tous les sélecteurs sont enveloppés dans :where() à l’intérieur de @layer mv.*, donc vos utilitaires l’emportent toujours. Déclarez l’ordre des couches une fois et c’est réglé.
Chaque module est compatible SSR (aucun accès à window/document au niveau supérieur). Les composants s’activent côté client.
Rôles ARIA, navigation complète au clavier et focus visible sur chaque composant interactif. Les effets décoratifs sont masqués aux technologies d’assistance et s’arrêtent quand l’utilisateur préfère un mouvement réduit.
Écrivez-nous sous 14 jours. Si vous n’avez pas encore téléchargé le Pro pack (avec la CLI ou depuis la page de téléchargement), vous êtes remboursé intégralement, sans question. Si vous l’avez téléchargé, dites-nous ce qui n’a pas fonctionné et nous vous remboursons une fois. Vous pouvez d’abord essayer gratuitement le Free pack et le Playground. Conditions
Oui. Le paiement est géré par notre marchand officiel (merchant of record), qui émet une facture conforme aux règles de TVA avec les informations de votre entreprise.
Pas de souci. On gère l’UI. Lancement : bientôt.