Neu MCP-Server für Claude Code, Cursor & Copilot

Keine Sorge. Wir haben die UI im Griff.

300+ animierte, barrierefreie Komponenten und Effekte für React, Vue, Svelte, Angular, Astro oder reines HTML. Native Web Components, keine Abhängigkeiten und ein MCP-Server, damit dein KI-Agent genau die richtige installiert.

Free pack herunterladen

Früher Zugang am Tag des Starts. Kein Spam, Abmelden mit einem Klick · Datenschutz.

claude · ~/my-saas

> Füge eine Statistik-Sektion mit einer leuchtenden Karte und einer hochzählenden Zahl hinzu

Suche in Marvelous UI

marvelous-ui search_components "stats card glow count up"

→ border-beam, card, number-ticker

marvelous-ui install_components framework: "react"

✓ 3 Komponenten + Tokens nach src/marvelous/ kopiert · 0 npm-Abhängigkeiten hinzugefügt

✓ Stats.tsx erstellt. Dark Mode, Tastatur und reduzierte Bewegung berücksichtigt.

Eine Bibliothek. Für jeden Stack, zu dem du je wechselst.

ReactNext.jsVueNuxtSvelteSvelteKitAngularAstroSolidQwikLitLaravel BladeRailsDjangoWordPressReines HTML

Komponenten & Effekte zum Launch

Laufzeitabhängigkeiten

~ KBMediangröße pro Komponente (gzip)

beachten reduzierte Bewegung & Dark Mode

Warum Marvelous

Gebaut auf der Plattform. Nicht auf einem Framework, das nächstes Jahr neu geschrieben wird.

Wirklich KI-nativ

Ein integrierter MCP-Server lässt jeden Agenten den Katalog durchsuchen, jede API lesen und Komponenten samt Abhängigkeiten installieren. Keine halluzinierten Props.

Zu den MCP-Tools →

<!-- React, Vue, Svelte… or none -->
<mv-tabs>…</mv-tabs>
<mv-confetti-button>
  <button>Ship it</button>
</mv-confetti-button>

Frameworkunabhängig

Native Custom Elements + CSS in Layers. Wechsle den Stack, behalte deine UI.

Deine Marke in einer Zeile

OKLCH-Design-Tokens. Zieh am Regler: Die ganze Seite wechselt live ihr Theme.

Von Haus aus barrierefrei

ARIA-Rollen, volle Tastaturbedienung, sichtbarer Fokus, reduzierte Bewegung. Nicht erst im Nachhinein.

Zu den Komponenten →

Der Code gehört dir

Lesbare Dateien landen in deinem Repo. Keine Blackbox, kein Lock-in.

Live statt Screenshots

Probier alles aus. Diese Seite ist zu 100 % mit Marvelous UI gebaut.

Interfaces, an die sich Menschen wirklich erinnern.

<mv-text-reveal>

Bring es zum Strahlen

<mv-sparkles-text>

Aurora-Verlauf

.mv-gradient-text

Antworten in Sekunden

<mv-text-highlight> · hover

Punktmuster · klick mich

Partikel · beweg den Cursor

Meteors

Retro-Raster

Animierte Körnung

Partikel · Anziehung

Spotlight

Ein Licht folgt deinem Cursor über die ganze Gruppe.

Border beam

Ein Komet läuft den Rand entlang.

Shine

Rotierende konische Reflexe.

Electric

Ein knisternder Rand, in JS gezeichnet.

Neon glow

Verlaufsrand + Halo.

Gradient

Ein wandernder Verlaufsrand.

<mv-confetti-button>

data-effect

BezahltAusstehendLive

.mv-badge · data-pulse

<mv-theme-toggle> · circular reveal

<mv-thinking-orb> · AI states

toast() · swipe to dismiss

E-Mail

Labels, Hinweise und Fehlerzustände, alles in CSS.

$24 / Monat

$19 / Monat, jährlich abgerechnet

Außerdem dabei: Dialog, Drawer, Popover, Menü, Combobox, Befehlspalette, Datumsauswahl, Kalender, Tabelle, OTP, Datei-Upload, Stepper, Toast, Tooltip, Diagramm… die langweiligen Teile, richtig gemacht.

+ 280 weitere

Zur Dokumentation jeder Komponente →

Light ✦

Die kleinen Dinge, die jede App neu schreibt. Je ein Tag, von Haus aus barrierefrei.

20 neue Komponenten für die Details, die selbstgebaute Versionen übersehen: Autofill, das weiter funktioniert, ein „vor 3 Minuten“, das aktuell bleibt, ein Zähler, der beim ersten Rendern nie hüpft.

Neues Passwort

<mv-password-field>

Rechnung #4821 bezahlt
Deploy in Produktion
Aiko ist dem Team beigetreten

<mv-relative-time>

Merino-Mütze $38

<mv-count-bump>

Password Field
Anzeigen und Verbergen, eine Warnung bei Feststelltaste, Regeln schon vor dem ersten Tastendruck aufgelistet.
Tag Input
Chips, die du aus einer Tabelle einfügen kannst, abgeschickt wie ein echtes Formularfeld.
Cookie Consent
Ablehnen so einfach wie Akzeptieren, und Skripte warten wirklich auf die Einwilligung.
Smart Header
Verschwindet beim Herunterscrollen, aber nie, solange Fokus oder ein Menü darin liegt.
Code Block
Kopiert den Befehl, nie den Prompt, die Ausgabe oder die Zeilennummern.
Countdown
Kein Driften, keine negativen Zahlen, das Ziel in der Ortszeit des Besuchers.
Relative Time
„vor 3 Minuten“, das aktuell bleibt, mit einem einzigen gemeinsamen Timer.
Trend Chip
„▲ +12,4 % zur Vorwoche“, vorgelesen als ein klarer Satz.
Announcement Bar
Einmal geschlossen, gemerkt, und sie verschiebt nie das Layout.
Saved State
Speichern, gespeichert, offline: Sie flackert nie und zeigt nie zu früh „Saved“.
Show More
Ein „Show more“-Schalter, den es nur gibt, wenn der Text wirklich abgeschnitten ist.
Backdrop
Mesh-, Glow-, Raster- und Körnungshintergründe mit einer Klasse, ganz ohne JavaScript.
Busy Cursor
Ein kleiner Fortschrittsring neben dem Systemcursor, solange ein Bereich arbeitet.
Cursor Snap
Eine weiche Fläche, die sich an den Link unter dem Zeiger schmiegt, der Systemcursor bleibt.
Reading Ruler
Eine einzeilige Lesehilfe, die dem Zeiger oder der Tastatur folgt.
Back to Top
Erscheint nur, wenn du wieder nach oben scrollst, und setzt den Fokus an den Seitenanfang.
Drag Scroll
Ziehen, Mausrad und Randhinweise für breite Tabellen und Kartenleisten.
Blur Up
Bildplatzhalter, die nie verrutschen, aufblitzen oder ein kaputtes Symbol zeigen.
Count Bump
Warenkorb- und Badge-Zähler, die bei Änderungen hüpfen, nie beim ersten Rendern.
Share Button
Das native Teilen-Menü oder ein Menü ganz ohne Anfragen an Dritte.

Exclusives

Mechaniken, die du längst auswendig kennst. Neu gebaut als UI, die echte Probleme löst.

150 Exclusives: Originalkomponenten, die du in keiner anderen Bibliothek findest. Die nützlichsten gibt es in 8 Kits, gruppiert nach dem Problem, das sie lösen. Viele übernehmen eine Mechanik aus einem Film, einem Spiel, einer Serie oder einem Roman und machen daraus ein nützliches Verhalten der Oberfläche. Entliehen wird nur die Mechanik, nie Artwork, Logos, Typografie oder Farben.

Formulare, die niemanden verlieren

Lange Formulare, die Abstürze, Tippfehler und Fehlerlawinen überstehen.

Wiederherstellung von Formularentwürfen aus Dark Souls Videospiel
Ein Fehler nach dem anderen aus Columbo Serie
Zähler auf geschlossenen Tabs aus Minesweeper Videospiel

Sichere destruktive Aktionen und Geheimnisse

Hürden, die dem echten Risiko eines Löschens, eines Widerrufs oder eines Geheimnisses entsprechen.

Vorschau der Auswirkungen beim Entfernen aus Jenga Spiel
Geheimnisse, die nur einmal sichtbar sind aus Pandoras Krug Mythos
Bestätigung mit zwei Schlüsseln aus WarGames: Kriegsspiele Film

Ehrliche Systemzustände

Wartezeiten, Ablehnungen und Sperren, die sagen, was wirklich passiert.

Wartezeiten, die nichts vortäuschen aus Warten auf Godot Theaterstück
Ablehnungen, die den Grund nennen aus Der Prozess Roman
Warnungen bei Bearbeitungskonflikten aus Ghostbusters: Die Geisterjäger Film

KI, die du überprüfen kannst

Quellen, Interpretation und Urheberschaft sichtbar gemacht, Aussage für Aussage.

Quellen für jede einzelne Aussage aus Pinocchio Roman
Wie eine Anfrage verstanden wurde aus Per Anhalter durch die Galaxis Roman
Offenlegung der Urheberschaft aus Cyrano de Bergerac Theaterstück

Vertrauen und Datenschutz

Doppelgänger vor dem Klick erkannt, Einbettungen stumm, bis man sie hereinbittet.

Erkennung von Doppelgängern aus Rotkäppchen Märchen
Einbettungen erst nach Einwilligung aus Dracula Roman
Schutz vor dem Handeln unter der falschen Identität aus Der seltsame Fall des Dr. Jekyll und Mr. Hyde Novelle

Monitoring ohne Alarmmüdigkeit

Alarme, die sich Vertrauen verdienen und abklingen, und fehlende Signale, die Alarm schlagen.

Alarme, die sich Vertrauen verdienen aus Der Hirtenjunge und der Wolf Fabel
Alarm, wenn etwas ausbleibt aus Silberstern Kurzgeschichte
Schweregrad, der abklingt aus Metal Gear Solid Videospiel

Zahlen, die sich selbst erklären

Kennzahlen, die zeigen, wie sie berechnet werden, wie aktuell sie sind und in welcher Größenordnung sie liegen.

Wie wird das berechnet? aus Der Zauberer von Oz Film
Porträt der Aktualität von Inhalten aus Das Bildnis des Dorian Gray Roman
Zahlen in menschlichem Maßstab aus Gullivers Reisen Roman

Navigation für Power-User

Anvisieren per Tastatur, Rückwege und Erkundung für dichte Apps.

Rückweg-Faden für Drill-downs aus Theseus und der Minotaurus Mythos
Anvisieren per Tastatur aus The Legend of Zelda: Ocarina of Time Videospiel
Nebel über unerkundeten Bereichen aus Civilization Videospiel

Exclusives sind in jedem kostenpflichtigen Plan enthalten. Die Titel werden nur genannt, um die Herkunft jeder Mechanik zu beschreiben, und bleiben Eigentum ihrer jeweiligen Inhaber. Keine Verbindung zu den Rechteinhabern und keine Billigung durch sie.

Playground

Ziehen. Ablegen. Shippen.

Starte mit einer leeren Seite oder einem Template, zieh Sektionen und Komponenten hinein, bearbeite die Texte, wähle deine Markenfarbe. Exportiere mit einem Klick sauberen Code in HTML, React, Vue, Svelte oder Astro.

14 ganzseitige Sektionen
9 animierte Elemente
3 Seiten-Templates

Navbar, Heroes, Bento- und Spotlight-Features, Statistiken, Preise, Testimonials, FAQ, Newsletter, Call to Action, Footer: sofort einsetzbar, nur aus der Bibliothek gebaut.

Playground öffnen, kostenlos

Ausprobieren ist kostenlos. Der Code-Export ist in jedem Plan enthalten.

Für Claude Code · Cursor · Copilot · Windsurf

Dein Agent rät nicht mehr. Er liest das Handbuch.

KI-Agenten schreiben hervorragend UI und vergessen zuverlässig die API einer Bibliothek. Der MCP-Server von Marvelous gibt ihnen den Katalog, die API und das Demo-Markup jeder Komponente und ein Tool, das Dateien samt Abhängigkeiten installiert. Ergebnis: korrekter Code beim ersten Versuch, in welchem Framework das Projekt auch läuft.

search_components Volltextsuche über Namen, Tags und APIs
get_component API, Hinweise zur Barrierefreiheit, kanonisches Demo-Markup
install_components kopiert Dateien + Abhängigkeiten und liefert das Snippet für dein Framework
get_design_tokens damit eigenes CSS zu deinem Theme passt

Claude Code

Befehl kopieren

claude mcp add marvelous-ui -- node ./marvelous/mcp/server.mjs

Cursor · .cursor/mcp.json

Konfig kopieren

{
  "mcpServers": {
    "marvelous-ui": {
      "command": "node",
      "args": ["./marvelous/mcp/server.mjs"]
    }
  }
}

Lieber ohne KI? Die CLI kann dasselbe: node marvelous/scripts/add.mjs dialog tabs --out src/ui

Der ehrliche Vergleich

Die meisten animierten UI-Kits gibt es nur für React. Deins sollte nicht so sein.

Funktion	Typisches React-UI-Kit	Marvelous UI
Funktioniert mit Vue, Svelte, Angular, Astro, HTML	✕	✓
Laufzeitabhängigkeiten	framer-motion, three, gsap…	keine
MCP-Server für KI-Agenten	selten	✓ inklusive
Originalkomponenten, die du sonst nirgends findest	selten	150 Exclusives
Dark Mode + reduzierte Bewegung überall	unterschiedlich	✓ jede Komponente
Dein CSS gewinnt immer (Layers ohne Spezifität)	✕	✓
Preise	oft Jahresabo	einmalig, für immer deins

Preise

Einfache Preise. Einmal zahlen, für immer nutzen.

Jeder Plan enthält alle Komponenten, den MCP-Server, die CLI und 12 Monate neue Komponenten, Updates und Playground-Exporte.

Preise in USD. EU und Vereinigtes Königreich: inkl. MwSt. USA, Kanada und Indien: Umsatzsteuer wird bei der Bezahlung hinzugefügt. Verkauft von unserem Merchant of Record, Polar. 14 Tage Rückerstattung (Bedingungen).

Free pack

Starte kostenlos. 20 Komponenten, keine E-Mail, kein Konto.

Die Basiskomponenten für jeden Tag, mit demselben Code, derselben CLI und demselben MCP-Server wie in den kostenpflichtigen Plänen. MIT-Lizenz: Zip herunterladen, Quellcode lesen, shippen.

Button
Badge
Card
Input
Textarea
Field
Select
Checkbox
Radio
Switch
Dialog
Popover
Tooltip
Tabs
Accordion
Toast
Menu
Separator
Kbd
Skeleton

Free pack herunterladen

ZIP · direkter Download · mit MCP-Server, CLI und Dokumentation

Verbinde den MCP-Server mit deinem Agenten

Befehle kopieren

cd marvelous-ui-free && npm install
node scripts/init-agent.mjs ../my-app

Schreibt AGENTS.md und die MCP-Konfiguration für Claude Code, Cursor, VS Code und Gemini CLI. Codex, Windsurf, Zed: siehe docs/MCP.md im Zip.

Du willst den Rest?

Jeder Plan schaltet die ganze Bibliothek frei.

Alle 300+ Komponenten & Effekte
Exklusive Originale, die es sonst nirgends gibt
Ganzseitige Blöcke: Hero, Preise, FAQ, Footer…
Playground-Export nach HTML, React, Vue, Svelte, Astro

Done for you

Keine Zeit? Wir bauen deine Landingpage damit. In 5 Tagen.

Eine animierte, barrierefreie Landingpage, die auf Conversion ausgelegt ist, geliefert in deinem Stack, mit Quellcode. Ab 2.850 $. 3 Plätze pro Monat.

Gebaut von Quentin Fankrache, dem Autor von Marvelous UI.

Schreib uns

FAQ

Fragen und Antworten.

Funktioniert das wirklich mit React / Vue / Svelte / Angular?

Ja. Die Komponenten sind standardkonforme Custom Elements mit Light-DOM-Markup und CSS in Cascade Layers. React 19+ unterstützt sie nativ; Vue braucht eine Zeile (isCustomElement); Angular braucht CUSTOM_ELEMENTS_SCHEMA; Svelte, Astro und reines HTML funktionieren ohne Weiteres. MCP und CLI liefern dir das passende Snippet für dein Framework.

Was sind Exclusives und Kits?

Exclusives sind 150 Originalkomponenten, die du in keiner anderen Bibliothek findest, enthalten in jedem kostenpflichtigen Plan. Kits gruppieren die nützlichsten nach dem Problem, das sie lösen, etwa Formulare, die niemanden verlieren, oder sichere destruktive Aktionen. Zu den 8 Kits

Was passiert nach dem ersten Jahr?

Du zahlst einmal und behältst alles, was du heruntergeladen hast, für jedes Projekt, für immer. Die ersten 12 Monate neue Komponenten, Updates und Playground-Exporte sind inklusive. Danach ist eine Verlängerung optional (59 $ bis 359 $ pro Jahr, je nach Plan). Wenn du aufhörst, wird dir nichts genommen, was du gebaut oder heruntergeladen hast.

Darf ich es in Kundenprojekten und SaaS-Produkten verwenden?

Ja, in unbegrenzt vielen Endprodukten, auch kommerziell. Nicht erlaubt ist, die Komponenten selbst als UI-Kit, Template-Marketplace-Artikel oder konkurrierende Bibliothek weiterzuverkaufen oder weiterzugeben.

Was bekommt mein Kunde, wenn ich ein Projekt ausliefere?

Die Komponenten, die in dieser Website oder App verwendet werden, werden mit ihr ausgeliefert, samt Quellcode. Dein Kunde darf sie nur nutzen, um dieses Produkt zu betreiben und zu warten, nicht in einem anderen. Mit Unlimited kannst du diesen Quellcode auch übergeben, damit der Kunde oder seine anderen Dienstleister das Produkt warten. Ein Freelancer, der an deinen Projekten arbeitet, zählt als einer deiner Entwickler. Lizenz lesen

Funktioniert es mit Tailwind?

Bestens. Alle Selektoren stecken in :where() innerhalb von @layer mv.*, deine Utilities überschreiben sie also immer. Einmal die Reihenfolge der Layers festlegen, fertig.

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

Jedes Modul ist SSR-sicher (kein Zugriff auf window/document auf oberster Ebene). Die Komponenten werden im Client aktiviert.

Ist es barrierefrei?

ARIA-Rollen, volle Tastaturbedienung und sichtbarer Fokus bei jeder interaktiven Komponente. Dekorative Effekte sind vor Hilfstechnologien verborgen und stoppen, wenn der Nutzer reduzierte Bewegung bevorzugt.

Und wenn es mir nicht gefällt?

Schreib uns innerhalb von 14 Tagen. Wenn du das Pro pack noch nicht heruntergeladen hast, bekommst du den vollen Betrag zurück, ohne Rückfragen. Wenn doch, sag uns, was nicht funktioniert hat, und wir erstatten dir einmalig den Betrag. Vorher kannst du das Free pack und den Playground kostenlos ausprobieren. Bedingungen

Bekomme ich eine Rechnung für meine Firma?

Ja. Die Bezahlung läuft über unseren Merchant of Record, der eine umsatzsteuerkonforme Rechnung mit deinen Firmendaten ausstellt.

Hör auf, in jedem Projekt dieselben Komponenten neu zu bauen.

Keine Sorge. Wir haben die UI im Griff. Start: bald.