Skip to content

MarvelousUI

Get access

Components

339 framework-agnostic components (v1.4.1): native Web Components and layered CSS, zero runtime dependencies, for React, Vue, Svelte, Angular, Astro and plain HTML. Each page gives the usage markup, the full API, when to use it and accessibility notes.

AI agents: start from /llms.txt. Buyers get every component with the CLI and the MCP server: see plans, or download the Free pack.

Primitives 16

Avatar .mv-avatar CSS avatar: an image layered over initials (automatic fallback when the image is missing or broken), sizes, round or square, tinted initials, status dot, counter; an overlapping group with a “+3” chip that spreads apart on hover.
BadgeFree .mv-badge Pure-CSS badge: 7 variants (soft or solid tints), animatable status dot, icon, remove button, pill/square, 3 sizes, and a counter positioned on the corner of an avatar or icon.
ButtonFree .mv-button Pure-CSS button on <button> or <a>: 6 variants, 4 sizes, loading state, group.
Button Effects .mv-button Seven effects for .mv-button via data-effect: orbiting spark, rainbow border, pulse, 3D key, sweeping shine, revealed arrow and glow.
CheckboxFree .mv-checkbox Native pure-CSS checkbox: a self-drawing (reversible) check mark, indeterminate state, sizes, invalid; also provides the shared .mv-choice and .mv-choice-card layouts (option cards highlighted via :has(:checked)).
Icon <mv-icon> One semantic icon vocabulary (close, search, chevron-down…) drawn by the set you choose: Lucide by default, Iconoir built in, or any set or sprite you plug in with registerIcons(), with size and stroke weight shared through two tokens.
InputFree .mv-input Pure-CSS text field: 3 sizes, invalid (aria-invalid / :user-invalid), read-only and file states, plus a group with icons, prefixes/suffixes, inline buttons and a clear button.
KbdFree .mv-kbd Subtly raised keyboard keys on <kbd>: nested combinations, 3 sizes, a flat variant, adapts inside buttons and tooltips.
RadioFree .mv-radio Pure-CSS native radio button: an inner dot that springs in, sizes, an outline variant, inline or stacked groups, and option cards (plan lists, tiles with a badge).
Range FX <mv-range-fx> Expressive sliders built on one accessible model: the track turns into a wave that ripples as you drag (wave), a value bubble pops up and tilts with velocity (bubble), a ruler scrolls under a fixed needle with inertia (ruler), a liquid cap stretches (fluid), or the label lives inside the track and inverts under the fill (inline).
SelectFree .mv-select Styled native <select> (token-colored chevron), progressively enhanced into a customizable select (appearance: base-select): animated list, status dots, icons, descriptions and checkmark, optional “liquid” opening; clean fallback elsewhere.
SeparatorFree .mv-separator Pure-CSS horizontal or vertical separator: solid, dashed, dotted or faded, with a centered (“or”) or aligned label, on <hr> or <div>.
Slider <mv-slider> Slider in two forms: a styled native <input type="range" class="mv-slider"> (synced fill), and a form-associated <mv-slider> for advanced cases: dual thumbs, ticks, labeled marks, value bubble, vertical orientation, full keyboard support.
SwitchFree .mv-switch Pure-CSS switch on <input type="checkbox" role="switch">: thumb that slides on a spring and stretches when pressed, icons in the thumb (customizable), sizes, label on the left or right, option card.
TextareaFree .mv-textarea Textarea that grows on its own (field-sizing: content) between a minimum and maximum number of rows, with an optional resize handle, a group with a toolbar and an <mv-char-count> character counter.
Toggle <mv-toggle-group> Toggle button .mv-toggle (aria-pressed, variants, icon that swaps with state) and <mv-toggle-group>, single or multiple: roving tabindex, value, attached group, and a segmented control whose indicator slides between options.

Forms 48

Overlays 12

Data display 59

Feedback 35

Layout 10

Animated text 24

Backgrounds 21

Cursors 9

Scroll 11

Media 9

3D 5

Transitions 6

Micro-interactions 12

Effects 11

Blocks 28

Utilities 5