Lancement : bientôt. La liste d’attente passe en premier. - Rejoindre la liste d’attente →
MarvelousUI
FR
Liste d’attente
Nouveau Serveur MCP pour Claude Code, Cursor & Copilot

Pas de souci. On gère l’UI.

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 serveur MCP pour que votre agent IA installe exactement le bon.

Télécharger le Free pack

Accès anticipé le jour du lancement. Pas de spam, désinscription en un clic · Confidentialité.

claude · ~/my-saas

> Ajoute une section de statistiques avec une carte lumineuse et un chiffre qui s’anime

Recherche dans Marvelous UI

marvelous-ui search_components "stats card glow count up"

→ border-beam, card, number-ticker

marvelous-ui install_components framework: "react"

✓ 3 composants + tokens copiés dans src/marvelous/ · 0 dépendance npm ajoutée

✓ Stats.tsx créé. Mode sombre, clavier et mouvement réduit gérés.

Une seule bibliothèque. Pour toutes les stacks vers lesquelles vous migrerez.

ReactNext.jsVueNuxtSvelteSvelteKitAngularAstroSolidQwikLitLaravel BladeRailsDjangoWordPressHTML pur
composants & effets au lancement
dépendances à l’exécution
~ Kotaille médiane par composant (gzip)
respectent le mouvement réduit & le mode sombre

Pourquoi Marvelous

Bâti sur la plateforme. Pas sur un framework qui sera réécrit l’an prochain.

Pensé pour l’IA, pour de vrai

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.

Voir les outils MCP →

Indépendant du framework

Custom Elements natifs + CSS en couches. Changez de stack, gardez votre UI.

Votre marque en une ligne

Design tokens OKLCH. Faites glisser le curseur : toute la page change de thème en direct.

Accessible par défaut

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.

Parcourir les composants →

Le code vous appartient

Des fichiers lisibles arrivent dans votre dépôt. Pas de boîte noire, pas d’enfermement.

En direct, pas en captures

Touchez à tout. Cette page est construite à 100 % avec Marvelous UI.

Des interfaces dont on se souvient vraiment.

<mv-text-reveal>

Faites briller

<mv-sparkles-text>

Dégradé aurore

.mv-gradient-text

Des réponses en quelques secondes

<mv-text-highlight> · hover

$

Motif de points · cliquez-moi
Particules · bougez le curseur
Meteors
Grille rétro
Grain animé
Particules · attraction

Spotlight

Une lumière suit votre curseur sur tout le groupe.

Border beam

Une comète parcourt la bordure.

Shine

Reflets coniques en rotation.

Electric

Une bordure qui crépite, dessinée en JS.

Neon glow

Bordure en dégradé + halo.

Gradient

Une bordure en dégradé animé.
<mv-confetti-button>
data-effect
PayéEn attenteEn direct
.mv-badge · data-pulse
<mv-theme-toggle> · circular reveal
<mv-thinking-orb> · AI states
toast() · swipe to dismiss

Libellés, aides et états d’erreur, tout en CSS.

$24 / mois

$19 / mois, facturé annuellement

Aussi dans la boîte : dialog, drawer, popover, menu, combobox, palette de commandes, sélecteur de date, calendrier, tableau, OTP, envoi de fichier, stepper, toast, tooltip, graphique… les parties ennuyeuses, bien faites.

+ 280 autres

Parcourir la doc de chaque composant →

Light ✦

Les petites choses que chaque app réécrit. Une balise pour chacune, accessibles par défaut.

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>
  • Facture n° 4821 payée
  • Déploiement en production
  • Aiko a rejoint l’équipe
<mv-relative-time>
Bonnet en mérinos $38
2
<mv-count-bump>

Exclusives

Des mécaniques que vous connaissez par cœur. Réinventées en UI qui résout de vrais problèmes.

150 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.

Une IA vérifiable

Sources, interprétation et auteur rendus visibles, affirmation par affirmation.

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.

Playground

Glissez. Déposez. Livrez.

Partez d’une page vierge ou d’un modèle, glissez-y des sections et des composants, modifiez le texte, choisissez la couleur de votre marque. Exportez du code HTML, React, Vue, Svelte ou Astro propre en un clic.

  • 14 sections pleine page
  • 9 éléments animés
  • 3 modèles de page

Barre de navigation, heroes, fonctionnalités en bento et en spotlight, statistiques, prix, témoignages, FAQ, newsletter, appel à l’action, footer : prêts à déposer, construits uniquement avec la bibliothèque.

Ouvrir le Playground, c’est gratuit

Gratuit pour jouer. L’export du code est inclus dans toutes les offres.

Pour Claude Code · Cursor · Copilot · Windsurf

Votre agent arrête de deviner. Il lit le mode d’emploi.

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.

  • search_components recherche plein texte dans les noms, tags et API
  • get_component API, notes d’accessibilité, markup de démo de référence
  • install_components copie les fichiers + dépendances, renvoie le snippet pour votre framework
  • get_design_tokens pour que votre CSS sur mesure suive votre thème
Claude CodeCopier la commande
claude mcp add marvelous-ui -- node ./marvelous/mcp/server.mjs
Cursor · .cursor/mcp.jsonCopier la config
{
  "mcpServers": {
    "marvelous-ui": {
      "command": "node",
      "args": ["./marvelous/mcp/server.mjs"]
    }
  }
}

Vous préférez sans IA ? La CLI fait la même chose : node marvelous/scripts/add.mjs dialog tabs --out src/ui

La comparaison honnête

La plupart des kits UI animés sont réservés à React. Le vôtre ne devrait pas l’être.

FonctionnalitéKit UI React typiqueMarvelous UI
Fonctionne avec Vue, Svelte, Angular, Astro, HTML✕✓
Dépendances à l’exécutionframer-motion, three, gsap…aucune
Serveur MCP pour agents IArarement✓ inclus
Des composants originaux introuvables ailleursrarement150 Exclusives
Mode sombre + mouvement réduit partoutvariable✓ chaque composant
Votre CSS gagne toujours (couches à spécificité nulle)✕✓
Tarifssouvent un abonnement annuelpaiement unique, à vous pour toujours

Tarifs

Des prix simples. Payez une fois, utilisez à vie.

Chaque offre inclut tous les composants, le serveur MCP, la CLI et 12 mois de nouveaux composants, de mises à jour et d’exports depuis le Playground.

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).

Free pack

Commencez gratuitement. 20 composants, sans e-mail, sans compte.

Les composants de base du quotidien, avec le même code, la même CLI et le même serveur MCP que les offres payantes. Sous licence MIT : téléchargez le zip, lisez le code source, livrez.

  • Button
  • Badge
  • Card
  • Input
  • Textarea
  • Field
  • Select
  • Checkbox
  • Radio
  • Switch
  • Dialog
  • Popover
  • Tooltip
  • Tabs
  • Accordion
  • Toast
  • Menu
  • Separator
  • Kbd
  • Skeleton
Télécharger le Free pack

ZIP · téléchargement direct · inclut le serveur MCP, la CLI et la doc

Branchez le MCP sur votre agentCopier les commandes
cd marvelous-ui-free && npm install
node scripts/init-agent.mjs ../my-app

Écrit AGENTS.md et la config MCP pour Claude Code, Cursor, VS Code et Gemini CLI. Codex, Windsurf, Zed : voir docs/MCP.md dans le zip.

Vous voulez le reste ?

Chaque offre débloque toute la bibliothèque.

  • Plus de 300 composants & effets
  • Des originaux exclusifs, introuvables ailleurs
  • Blocs pleine page : hero, prix, FAQ, footer…
  • Export depuis le Playground en HTML, React, Vue, Svelte, Astro

Done for you

Pas le temps ? Nous construisons votre landing page avec. En 5 jours.

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.

Écrivez-nous

FAQ

Vos questions, nos réponses.

Ça marche vraiment avec React / Vue / Svelte / Angular ?

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.

Que sont les Exclusives et les kits ?

Les Exclusives sont 150 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

Que se passe-t-il après la première année ?

Vous payez une fois et gardez tout ce que vous avez téléchargé, pour tous vos projets, pour toujours. Les 12 premiers mois de nouveaux composants, de mises à jour et d’exports depuis le Playground sont inclus. Ensuite, le renouvellement est facultatif (de 59 $ à 359 $ par an selon l’offre). Si vous arrêtez, rien de ce que vous avez construit ou téléchargé ne vous est retiré.

Puis-je l’utiliser dans des projets clients et des produits SaaS ?

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.

Que reçoit mon client quand je livre un projet ?

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

Ça marche avec Tailwind ?

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é.

SSR ? Next.js, Nuxt, SvelteKit, Astro ?

Chaque module est compatible SSR (aucun accès à window/document au niveau supérieur). Les composants s’activent côté client.

Est-ce accessible ?

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.

Et si ça ne me plaît pas ?

Écrivez-nous sous 14 jours. Si vous n’avez pas encore téléchargé le Pro pack, 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

Puis-je avoir une facture pour mon entreprise ?

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.

Arrêtez de refaire les mêmes composants à chaque projet.

Pas de souci. On gère l’UI. Lancement : bientôt.

Cette page a été traduite par IA. Signaler un problème de traduction