Zum Inhalt springen

MarvelousUI

Hol dir Zugang

Komponenten

339 frameworkunabhängige Komponenten (v1.5.2): native Web Components und CSS in Layers, null Laufzeitabhängigkeiten, für React, Vue, Svelte, Angular, Astro und reines HTML. Jede Seite zeigt das Markup, die vollständige API, wann du sie einsetzt, und Hinweise zur Barrierefreiheit.

KI-Agenten: Starte bei /llms.txt. Käufer erhalten alle Komponenten mit der CLI und dem MCP-Server: Pläne ansehen oder Free pack herunterladen.

Primitives 16

Avatar .mv-avatar Avatar in CSS: ein Bild über Initialen gelegt (automatischer Fallback, wenn das Bild fehlt oder defekt ist), Größen, rund oder eckig, eingefärbte Initialen, Statuspunkt, Zähler; eine überlappende Gruppe mit einem „+3“-Chip, die sich beim Hover auffächert.
BadgeGratis .mv-badge Badge in reinem CSS: 7 Varianten (sanfte oder volle Tönung), animierbarer Statuspunkt, Icon, Entfernen-Button, Pille/eckig, 3 Größen und ein Zähler an der Ecke eines Avatars oder Icons.
ButtonGratis .mv-button Button in reinem CSS auf <button> oder <a>: 6 Varianten, 4 Größen, Ladezustand, Gruppe.
Button Effects .mv-button Sieben Effekte für .mv-button über data-effect: kreisender Funke, Regenbogenrand, Puls, 3D-Taste, wandernder Glanz, eingeblendeter Pfeil und Leuchten.
CheckboxGratis .mv-checkbox Native Checkbox in reinem CSS: ein sich selbst zeichnendes (umkehrbares) Häkchen, unbestimmter Zustand, Größen, ungültig; liefert außerdem die gemeinsamen Layouts .mv-choice und .mv-choice-card (Optionskarten, hervorgehoben über :has(:checked)).
Icon <mv-icon> Ein einziges semantisches Icon-Vokabular (close, search, chevron-down…), gezeichnet von dem Set deiner Wahl: standardmäßig Lucide, Iconoir eingebaut oder jedes Set oder Sprite, das du mit registerIcons() einbindest, wobei Größe und Strichstärke über zwei Tokens geteilt werden.
InputGratis .mv-input Textfeld in reinem CSS: 3 Größen, Zustände ungültig (aria-invalid / :user-invalid), schreibgeschützt und Datei, plus eine Gruppe mit Icons, Präfixen/Suffixen, Inline-Buttons und einem Löschen-Button.
KbdGratis .mv-kbd Dezent erhabene Tastaturtasten auf <kbd>: verschachtelte Kombinationen, 3 Größen, eine flache Variante, passt sich in Buttons und Tooltips an.
RadioGratis .mv-radio Nativer Radiobutton in reinem CSS: ein innerer Punkt, der federnd erscheint, Größen, eine Outline-Variante, Gruppen nebeneinander oder untereinander und Optionskarten (Planlisten, Kacheln mit Badge).
Range FX <mv-range-fx> Ausdrucksstarke Slider auf Basis eines einzigen barrierefreien Modells: Die Schiene wird zu einer Welle, die beim Ziehen schwingt (wave), eine Wertblase springt auf und neigt sich mit der Geschwindigkeit (bubble), ein Lineal gleitet mit Trägheit unter einer festen Nadel (ruler), eine flüssige Kappe dehnt sich (fluid) oder das Label sitzt in der Schiene und invertiert sich unter der Füllung (inline).
SelectGratis .mv-select Gestyltes natives <select> (Chevron in Token-Farbe), schrittweise erweitert zu einem anpassbaren Select (appearance: base-select): animierte Liste, Statuspunkte, Icons, Beschreibungen und Häkchen, optionales „flüssiges“ Öffnen; sauberer Fallback überall sonst.
SeparatorGratis .mv-separator Horizontaler oder vertikaler Trenner in reinem CSS: durchgezogen, gestrichelt, gepunktet oder auslaufend, mit zentriertem („or“) oder ausgerichtetem Label, auf <hr> oder <div>.
Slider <mv-slider> Slider in zwei Formen: ein gestyltes natives <input type="range" class="mv-slider"> (synchronisierte Füllung) und ein formularfähiges <mv-slider> für fortgeschrittene Fälle: zwei Griffe, Teilstriche, beschriftete Markierungen, Wertblase, vertikale Ausrichtung, volle Tastaturunterstützung.
SwitchGratis .mv-switch Schalter in reinem CSS auf <input type="checkbox" role="switch">: Griff, der federnd gleitet und sich beim Drücken dehnt, Icons im Griff (anpassbar), Größen, Label links oder rechts, Optionskarte.
TextareaGratis .mv-textarea Textarea, die von selbst wächst (field-sizing: content), zwischen einer minimalen und maximalen Zeilenzahl, mit optionalem Ziehgriff zur Größenänderung, einer Gruppe mit Toolbar und einem Zeichenzähler <mv-char-count>.
Toggle <mv-toggle-group> Toggle-Button .mv-toggle (aria-pressed, Varianten, Icon, das mit dem Zustand wechselt) und <mv-toggle-group>, Einzel- oder Mehrfachauswahl: Roving Tabindex, value, verbundene Gruppe und ein Segmented Control, dessen Indikator zwischen den Optionen gleitet.

Formulare 48

Overlays 12

Datenanzeige 59

Feedback 35

Layout 10

Animierter Text 24

Hintergründe 21

Cursor 9

Scrollen 11

Medien 9

3D 5

Übergänge 6

Mikrointeraktionen 12

Effekte 11

Blöcke 28

Utilities 5

Diese Seite wurde mit KI übersetzt. Übersetzungsfehler melden