300+ animierte, barrierefreie Komponenten und Effekte für React, Vue, Svelte, Angular, Astro oder reines HTML. Native Web Components, keine Abhängigkeiten und ein
npx marvelous-ui-library@latest init
Free ohne Schlüssel. Pro gekauft? Füge deinen Lizenzschlüssel ein, wenn danach gefragt wird.
Früher Zugang am Tag des Starts. Kein Spam, Abmelden mit einem Klick · Datenschutz.
Einmal zahlen, für immer behalten · 14 Tage Rückerstattung (Bedingungen)
Eine Bibliothek. Für jeden Stack, zu dem du je wechselst.
Führe ihn in deinem Projekt aus. Wähle die Installation im Projekt oder für deinen Benutzer. Drücke danach die Eingabetaste für das Free Pack oder füge deinen Lizenzschlüssel ein, um Pro zu installieren.
Free ohne Schlüssel. Pro mit deinem Lizenzschlüssel.
npx marvelous-ui-library@latest init
Danach: npx marvelous-ui-library@latest add dialog tabs
Wenn eine neue Version erscheint: npx marvelous-ui-library@latest update
Kein Node.js? Lade das Pro pack mit deinem Lizenzschlüssel herunter.
$
Bring es zum
Pro-Plan
Version 2.4 ausliefern
Sie geht für alle Nutzer gleichzeitig live.
„Lumen redesign“ löschen
Alle 48 Dateien und ihr Verlauf werden mitgelöscht.
<mv-hold-button>Jede Komponente mit animierter Vorschau, Markup für die Verwendung, vollständiger API und Hinweisen zur Barrierefreiheit. Nach Kategorie, Kit, Exklusiv oder Free pack filtern.
Ein integrierter MCP-Server lässt jeden Agenten den Katalog durchsuchen, jede API lesen und Komponenten samt Abhängigkeiten installieren. Keine halluzinierten Props.
Native Custom Elements + CSS in Layers. Wechsle den Stack, behalte deine UI.
OKLCH-Design-Tokens. Zieh am Regler: Die ganze Seite wechselt live ihr Theme.
ARIA-Rollen, volle Tastaturbedienung, sichtbarer Fokus, reduzierte Bewegung. Nicht erst im Nachhinein.
Jede Komponentenseite hat ihre Hinweise zur Barrierefreiheit: was die Komponente für Tastatur, Screenreader und reduzierte Bewegung tut.
Lesbare Dateien landen in deinem Repo. Keine Blackbox, kein Lock-in.
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.
<mv-password-field>
<mv-relative-time>
<mv-count-bump>
Anzeigen und Verbergen, eine Warnung bei Feststelltaste, Regeln schon vor dem ersten Tastendruck aufgelistet.
Chips, die du aus einer Tabelle einfügen kannst, abgeschickt wie ein echtes Formularfeld.
Ablehnen so einfach wie Akzeptieren, und Skripte warten wirklich auf die Einwilligung.
Verschwindet beim Herunterscrollen, aber nie, solange Fokus oder ein Menü darin liegt.
Kopiert den Befehl, nie den Prompt, die Ausgabe oder die Zeilennummern.
Kein Driften, keine negativen Zahlen, das Ziel in der Ortszeit des Besuchers.
„vor 3 Minuten“, das aktuell bleibt, mit einem einzigen gemeinsamen Timer.
„▲ +12,4 % zur Vorwoche“, vorgelesen als ein klarer Satz.
Einmal geschlossen, gemerkt, und sie verschiebt nie das Layout.
Speichern, gespeichert, offline: Sie flackert nie und zeigt nie zu früh „Saved“.
Ein „Show more“-Schalter, den es nur gibt, wenn der Text wirklich abgeschnitten ist.
Mesh-, Glow-, Raster- und Körnungshintergründe mit einer Klasse, ganz ohne JavaScript.
Ein kleiner Fortschrittsring neben dem Systemcursor, solange ein Bereich arbeitet.
Eine weiche Fläche, die sich an den Link unter dem Zeiger schmiegt, der Systemcursor bleibt.
Eine einzeilige Lesehilfe, die dem Zeiger oder der Tastatur folgt.
Erscheint nur, wenn du wieder nach oben scrollst, und setzt den Fokus an den Seitenanfang.
Ziehen, Mausrad und Randhinweise für breite Tabellen und Kartenleisten.
Bildplatzhalter, die nie verrutschen, aufblitzen oder ein kaputtes Symbol zeigen.
Warenkorb- und Badge-Zähler, die bei Änderungen hüpfen, nie beim ersten Rendern.
Das native Teilen-Menü oder ein Menü ganz ohne Anfragen an Dritte.
155 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.
Lange Formulare, die Abstürze, Tippfehler und Fehlerlawinen überstehen.
Hürden, die dem echten Risiko eines Löschens, eines Widerrufs oder eines Geheimnisses entsprechen.
Wartezeiten, Ablehnungen und Sperren, die sagen, was wirklich passiert.
Quellen, Interpretation und Urheberschaft sichtbar gemacht, Aussage für Aussage.
Doppelgänger vor dem Klick erkannt, Einbettungen stumm, bis man sie hereinbittet.
Alarme, die sich Vertrauen verdienen und abklingen, und fehlende Signale, die Alarm schlagen.
Kennzahlen, die zeigen, wie sie berechnet werden, wie aktuell sie sind und in welcher Größenordnung sie liegen.
Anvisieren per Tastatur, Rückwege und Erkundung für dichte Apps.
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.
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. Funktioniert mit Claude Code, Codex, Cursor, Copilot und jedem MCP-fähigen Agenten.
search_components Volltextsuche über Namen, Tags und APIsget_component API, Hinweise zur Barrierefreiheit, kanonisches Demo-Markupinstall_components kopiert Dateien + Abhängigkeiten und liefert das Snippet für dein Frameworkget_design_tokens damit eigenes CSS zu deinem Theme passtDer Installationsbefehl enthält den MCP-Server und Agent-Anweisungen.
Die Projektinstallation richtet unterstützte Agenten in diesem Repository ein. Die Benutzerinstallation erkennt Codex, Claude Code, Cursor und OpenCode und verbindet deine Auswahl für alle Projekte. Wähle alle erkannten Agenten, einige davon oder nutze die CLI ohne Agenten. Mit uninstall entfernst du die Agent-Verbindungen und die Bibliothek.
| Funktion | Typisches React-UI-Kit | Marvelous UI |
|---|---|---|
| Funktioniert mit Vue, Svelte, Angular, Astro, HTML | Nein | Ja |
| Laufzeitabhängigkeiten | framer-motion, three, gsap… | keine |
| MCP-Server für KI-Agenten | selten | inklusive |
| Originalkomponenten, die du sonst nirgends findest | selten | 155 Exclusives |
| Dark Mode + reduzierte Bewegung überall | unterschiedlich | jede Komponente |
| Dein CSS gewinnt immer gegen unseres | Nein | Ja |
| Preise | oft Jahresabo | einmalig, für immer deins |
Jeder Plan enthält alle Komponenten, den MCP-Server, die CLI und Playground-Exporte. Lifetime fügt alle künftigen Komponenten und Updates hinzu, ohne Verlängerung.
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).
Die grundlegenden Komponenten für den Alltag, mit derselben CLI und demselben MCP-Server wie die kostenpflichtigen Pläne. Kein Konto und kein Lizenzschlüssel nötig. MIT-lizenziert: Quellcode lesen und einsetzen.
ZIP · direkter Download · mit MCP-Server, CLI und Dokumentation
Dein Download hat begonnen. Willst du auch den Launch-Preis?
Freiwillig, das Free pack braucht das nie. Eine einzige E-Mail am Tag des Starts, mit dem Launch-Preis. Kein Spam, Abmelden mit einem Klick · Datenschutz.
Der Installationsbefehl richtet das Free Pack ein, wenn du keinen Lizenzschlüssel eingibst. Das ZIP steht oben weiterhin für die manuelle Nutzung bereit.
Jeder Plan schaltet die ganze Bibliothek frei.
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.
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.
Exclusives sind 155 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
Lifetime wird einmal bezahlt: jede neue Komponente, jedes Update und jeder Playground-Export, solange Marvelous UI veröffentlicht wird, ohne Verlängerung. Ab dem 15. Okt. kannst du auch ein Jahres- oder Monatsabo abschließen und bekommst dasselbe, solange es läuft. Wenn du aufhörst, behältst du jede heruntergeladene Version, für jedes Projekt, für immer. Führe npx marvelous-ui-library@latest update aus, wenn du ein Projekt aktualisieren möchtest; deine lokalen Änderungen werden nicht überschrieben.
Die CLI speichert geprüfte Pro-Archive lokal. Mit npx marvelous-ui-library@latest restore kannst du eine bezogene Version erneut installieren, auch nachdem ein Abo geendet hat.
Bis zum 14. Okt. gibt es Lifetime zum Launchpreis: 120 $ statt 399 $ für Solo. Es ist dieselbe Lifetime-Lizenz wie nach dem Launch, mit allen künftigen Updates und ohne Verlängerung, nur günstiger. Abos starten am 15. Okt.
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.
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
Ja. Bau deine Website kostenlos: Starte mit einer Vorlage, zieh Sektionen und Komponenten hinein, bearbeite den Text und wähl deine Markenfarbe. Veröffentliche sie, wenn du bereit bist: Jeder Plan gibt dir eine statische HTML-Website, bereit zum Hochladen bei Netlify oder Cloudflare Pages, oder ihren Quellcode in HTML, React, Vue, Svelte oder Astro. Wir hosten sie nicht: Sie läuft eigenständig, ohne etwas zu verlängern, damit sie online bleibt. Behalte den Quellcode für immer: Du erhältst den Code deiner Website gemäß der Lizenz.
Ja. Die Komponenten sind einfache HTML-Tags, CSS-Dateien und JavaScript-Module, sie funktionieren also in jedem serverseitig gerenderten Template: CSS und Skripte einmal laden, dann die Tags schreiben. Kopiere die Dateien mit der CLI (sie braucht Node.js) oder aus dem ZIP: dem Free pack, oder dem Pro pack von der Download-Seite.
Bestens. Alle Selektoren stecken in :where() innerhalb von @layer mv.*, deine Utilities überschreiben sie also immer. Einmal die Reihenfolge der Layers festlegen, fertig.
Jedes Modul ist SSR-sicher (kein Zugriff auf window/document auf oberster Ebene). Die Komponenten werden im Client aktiviert.
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.
Schreib uns innerhalb von 14 Tagen. Wenn du das Pro pack noch nicht heruntergeladen hast (mit der CLI oder von der Download-Seite), 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
Ja. Die Bezahlung läuft über unseren Merchant of Record, der eine umsatzsteuerkonforme Rechnung mit deinen Firmendaten ausstellt.
Keine Sorge. Wir haben die UI im Griff. Start: bald.
Diese Seite wurde mit KI übersetzt. Übersetzungsfehler melden