Pular para o conteúdo

MarvelousUI

Obtenha acesso

Componentes

339 componentes independentes de framework (v1.5.2): Web Components nativos e CSS em camadas, zero dependências em tempo de execução, para React, Vue, Svelte, Angular, Astro e HTML puro. Cada página traz a marcação de uso, a API completa, quando usar e notas de acessibilidade.

Agentes de IA: comecem por /llms.txt. Quem compra recebe todos os componentes com a CLI e o servidor MCP: veja os planos ou baixe o Free pack.

Primitivos 16

Avatar .mv-avatar Avatar em CSS: uma imagem sobreposta às iniciais (fallback automático quando a imagem falta ou está quebrada), tamanhos, redondo ou quadrado, iniciais coloridas, ponto de status, contador; um grupo sobreposto com um chip “+3” que se abre ao passar o mouse.
BadgeGrátis .mv-badge Badge em CSS puro: 7 variantes (tons suaves ou sólidos), ponto de status animável, ícone, botão de remover, pílula/quadrado, 3 tamanhos e um contador posicionado no canto de um avatar ou ícone.
ButtonGrátis .mv-button Botão em CSS puro sobre <button> ou <a>: 6 variantes, 4 tamanhos, estado de carregamento, grupo.
Button Effects .mv-button Sete efeitos para .mv-button via data-effect: faísca em órbita, borda arco-íris, pulso, tecla 3D, brilho que varre, seta revelada e brilho difuso.
CheckboxGrátis .mv-checkbox Checkbox nativo em CSS puro: uma marca de seleção que se desenha sozinha (reversível), estado indeterminado, tamanhos, inválido; também fornece os layouts compartilhados .mv-choice e .mv-choice-card (cards de opção destacados via :has(:checked)).
Icon <mv-icon> Um único vocabulário semântico de ícones (close, search, chevron-down…) desenhado pelo conjunto que você escolher: Lucide por padrão, Iconoir integrado, ou qualquer conjunto ou sprite que você conectar com registerIcons(), com tamanho e espessura do traço compartilhados por dois tokens.
InputGrátis .mv-input Campo de texto em CSS puro: 3 tamanhos, estados inválido (aria-invalid / :user-invalid), somente leitura e de arquivo, além de um grupo com ícones, prefixos/sufixos, botões embutidos e um botão de limpar.
KbdGrátis .mv-kbd Teclas de teclado levemente em relevo sobre <kbd>: combinações aninhadas, 3 tamanhos, uma variante plana, se adapta dentro de botões e tooltips.
RadioGrátis .mv-radio Botão de rádio nativo em CSS puro: um ponto interno que surge com efeito de mola, tamanhos, uma variante com contorno, grupos em linha ou empilhados, e cards de opção (listas de planos, blocos com badge).
Range FX <mv-range-fx> Sliders expressivos construídos sobre um único modelo acessível: a trilha vira uma onda que ondula enquanto você arrasta (wave), uma bolha de valor aparece e se inclina com a velocidade (bubble), uma régua desliza sob uma agulha fixa com inércia (ruler), uma cápsula líquida se estica (fluid), ou o rótulo fica dentro da trilha e se inverte sob o preenchimento (inline).
SelectGrátis .mv-select <select> nativo estilizado (chevron na cor do token), aprimorado progressivamente para um select personalizável (appearance: base-select): lista animada, pontos de status, ícones, descrições e marca de seleção, abertura “líquida” opcional; nos demais navegadores, um fallback limpo.
SeparatorGrátis .mv-separator Separador horizontal ou vertical em CSS puro: contínuo, tracejado, pontilhado ou esmaecido, com um rótulo centralizado (“ou”) ou alinhado, sobre <hr> ou <div>.
Slider <mv-slider> Slider em duas formas: um <input type="range" class="mv-slider"> nativo estilizado (preenchimento sincronizado) e um <mv-slider> integrado a formulários para casos avançados: dois cursores, marcações, marcas com rótulo, bolha de valor, orientação vertical, suporte completo a teclado.
SwitchGrátis .mv-switch Switch em CSS puro sobre <input type="checkbox" role="switch">: cursor que desliza com efeito de mola e se estica ao ser pressionado, ícones no cursor (personalizáveis), tamanhos, rótulo à esquerda ou à direita, card de opção.
TextareaGrátis .mv-textarea Área de texto que cresce sozinha (field-sizing: content) entre um número mínimo e máximo de linhas, com alça de redimensionamento opcional, um grupo com barra de ferramentas e um contador de caracteres <mv-char-count>.
Toggle <mv-toggle-group> Botão de alternância .mv-toggle (aria-pressed, variantes, ícone que muda com o estado) e <mv-toggle-group>, simples ou múltiplo: roving tabindex, valor, grupo unido e um controle segmentado cujo indicador desliza entre as opções.

Formulários 48

Sobreposições 12

Exibição de dados 59

Feedback 35

Layout 10

Texto animado 24

Fundos 21

Cursores 9

Rolagem 11

Mídia 9

3D 5

Transições 6

Microinterações 12

Efeitos 11

Blocos 28

Utilitários 5

Esta página foi traduzida com IA. Informar um problema de tradução