Mais de 300 componentes e efeitos animados e acessíveis para React, Vue, Svelte, Angular, Astro ou HTML puro. Web Components nativos, zero dependências e um
npx marvelous-ui-library@latest init
Free sem chave. Comprou o Pro? Cole sua chave de licença quando ela for pedida.
Acesso antecipado no dia do lançamento. Sem spam, cancele a inscrição com um clique · Privacidade.
Pague uma vez, fique com ele para sempre · Reembolso em 14 dias (condições)
Uma só biblioteca. Para qualquer stack que você venha a adotar.
Execute-o no seu projeto. Escolha instalar no projeto ou no seu perfil de usuário. Depois, pressione Enter para instalar o Free pack ou cole sua chave de licença para instalar o Pro.
Free sem chave. Pro com sua chave de licença.
npx marvelous-ui-library@latest init
Depois: npx marvelous-ui-library@latest add dialog tabs
Quando sair uma nova versão: npx marvelous-ui-library@latest update
Sem Node.js? Baixe o Pro pack com sua chave de licença.
$
Faça
Plano Pro
Publicar a versão 2.4
Ela entra no ar para todos os usuários ao mesmo tempo.
Excluir “Lumen redesign”
Os 48 arquivos e o histórico deles vão junto.
<mv-hold-button>Cada componente com prévia animada, marcação de uso, API completa e notas de acessibilidade. Filtre por categoria, kit, Exclusivo ou Free pack.
Um servidor MCP integrado permite que qualquer agente pesquise o catálogo, leia cada API e instale componentes com suas dependências. Nada de props inventadas.
Custom Elements nativos + CSS em camadas. Troque de stack e mantenha sua UI.
Design tokens OKLCH. Arraste o controle: esta página inteira muda de tema ao vivo.
Roles ARIA, suporte completo a teclado, foco visível, movimento reduzido. Pensado desde o início, não acrescentado depois.
Cada página de componente traz notas de acessibilidade: o que ele faz para quem usa teclado, leitor de tela ou movimento reduzido.
Arquivos legíveis vão direto para o seu repositório. Sem caixa-preta, sem aprisionamento.
20 novos componentes para os detalhes que as versões feitas à mão deixam passar: um preenchimento automático que continua funcionando, um “há 3 minutos” que se mantém atualizado, uma contagem que nunca pula na primeira renderização.
<mv-password-field>
<mv-relative-time>
<mv-count-bump>
Mostrar e ocultar, um aviso de Caps Lock, as regras listadas antes da primeira tecla.
Chips que você pode colar de uma planilha, enviados como um campo de formulário de verdade.
Rejeitar é tão fácil quanto aceitar, e os scripts esperam de verdade pelo consentimento.
Some ao rolar para baixo, nunca enquanto o foco ou um menu estiver dentro dele.
Copia o comando, nunca o prompt, a saída ou os números de linha.
Sem desvio, sem números negativos, com o horário-alvo no fuso do próprio visitante.
Um “há 3 minutos” que se mantém atualizado, com um só timer compartilhado.
“▲ +12,4% vs. semana passada”, lido em voz alta como uma única frase clara.
Fechada uma vez, fica lembrada, e nunca desloca o layout.
Salvando, salvo, offline: nunca pisca e nunca diz “Salvo” cedo demais.
Um botão “Mostrar mais” que só existe quando o texto está realmente cortado.
Fundos de malha, brilho, grade e granulado com uma só classe, zero JavaScript.
Um pequeno anel de progresso ao lado do cursor do sistema enquanto uma região trabalha.
Uma placa suave que envolve o link ao passar o mouse, mantendo o cursor do sistema.
Um guia de leitura de uma linha que acompanha o ponteiro ou o teclado.
Só aparece quando você volta a subir, e leva o foco para o topo.
Arrastar, roda do mouse e indicações nas bordas para tabelas largas e trilhos de cards.
Placeholders de imagem que nunca deslocam o layout, nem piscam, nem mostram um ícone quebrado.
Contagens de carrinho e de badge que pulam quando mudam, nunca na primeira renderização.
A janela de compartilhamento nativa, ou um menu sem nenhuma requisição a terceiros.
155 Exclusives: componentes originais que você não vai encontrar em nenhuma outra biblioteca. Os mais úteis vêm em 8 kits, agrupados pelo problema que resolvem. Muitos pegam uma mecânica de um filme, um jogo, uma série ou um romance e a transformam em um comportamento útil de interface. Só a mecânica é emprestada, nunca as ilustrações, os logotipos, a tipografia ou as cores.
Formulários longos que sobrevivem a falhas, erros de digitação e paredes de mensagens de erro.
Um atrito à altura do risco real de uma exclusão, de uma revogação ou de um segredo.
Esperas, recusas e bloqueios que dizem o que está realmente acontecendo.
Fontes, interpretação e autoria visíveis, afirmação por afirmação.
Imitações detectadas antes do clique, embeds em silêncio até serem convidados a entrar.
Alertas que conquistam a confiança e se atenuam, ausências que soam o alarme.
Números que mostram como são calculados, quão atuais são e em que escala.
Mira pelo teclado, fios de retorno e descoberta para apps densos.
Os Exclusives estão incluídos em todos os planos pagos. Os títulos são citados apenas para descrever de onde vem cada mecânica e continuam sendo propriedade de seus respectivos donos. Sem afiliação nem endosso dos detentores dos direitos.
Agentes de IA são ótimos para escrever UI e péssimos para lembrar a API de uma biblioteca. O servidor MCP do Marvelous entrega a eles o catálogo, a API e a marcação de demo de cada componente, e uma ferramenta que instala os arquivos com suas dependências. Resultado: código correto de primeira, no framework que o projeto usar. Funciona com Claude Code, Codex, Cursor, Copilot e qualquer agente compatível com MCP.
search_components busca de texto completo em nomes, tags e APIsget_component API, notas de acessibilidade, marcação de demo canônicainstall_components copia arquivos + dependências e devolve o trecho de código para o seu frameworkget_design_tokens para que seu CSS personalizado combine com o seu temaO comando de instalação inclui o servidor MCP e as instruções para o agente.
A instalação no projeto configura os agentes compatíveis neste repositório. A instalação no perfil de usuário detecta Codex, Claude Code, Cursor e OpenCode e permite conectá-los a todos os seus projetos. Escolha todos os agentes detectados, alguns deles ou use a CLI sem agente. Execute uninstall para remover as conexões dos agentes e a biblioteca.
| Recurso | Kit de UI típico para React | Marvelous UI |
|---|---|---|
| Funciona em Vue, Svelte, Angular, Astro, HTML | Não | Sim |
| Dependências em tempo de execução | framer-motion, three, gsap… | nenhuma |
| Servidor MCP para agentes de IA | raramente | incluído |
| Componentes originais que você não encontra em outro lugar | raramente | 155 Exclusives |
| Modo escuro + movimento reduzido em tudo | varia | em cada componente |
| Seu CSS sempre vence o nosso | Não | Sim |
| Preços | muitas vezes, assinatura anual | pagamento único, seu para sempre |
Todos os planos incluem todos os componentes, o servidor MCP, a CLI e as exportações do Playground. A licença vitalícia acrescenta todos os componentes e atualizações futuros, sem renovação.
Preços em USD. UE e Reino Unido: IVA incluído. EUA, Canadá e Índia: imposto sobre vendas adicionado no pagamento. Vendido pelo nosso revendedor oficial (merchant of record), a Polar. Reembolso em 14 dias (condições).
Os componentes básicos do dia a dia, com a mesma CLI e o mesmo servidor MCP dos planos pagos. Não é preciso conta nem chave de licença. Licença MIT: leia o código-fonte e publique.
ZIP · download direto · inclui o servidor MCP, a CLI e a documentação
Seu download começou. Quer também o preço de lançamento?
Opcional, o Free pack nunca precisa disso. Um único e-mail no dia do lançamento, com o preço de lançamento. Sem spam, cancele a inscrição com um clique · Privacidade.
O comando de instalação instala o Free pack se você não informar uma chave de licença. O ZIP continua disponível acima para uso manual.
Qualquer plano libera a biblioteca inteira.
Uma landing page animada, acessível e pensada para converter, entregue no seu stack, com o código-fonte. A partir de US$ 2.850. 3 vagas por mês.
Criada por Quentin Fankrache, autor do Marvelous UI.
Sim. Os componentes são Custom Elements padrão, com marcação em light DOM e CSS em cascade layers. O React 19+ os suporta nativamente; o Vue precisa de uma linha (isCustomElement); o Angular precisa de CUSTOM_ELEMENTS_SCHEMA; Svelte, Astro e HTML puro funcionam como estão. O MCP ou a CLI devolve o trecho de código exato para o seu framework.
Os Exclusives são 155 componentes originais que você não vai encontrar em nenhuma outra biblioteca, incluídos em todos os planos pagos. Os kits agrupam os mais úteis pelo problema que resolvem, como formulários que não perdem ninguém ou ações destrutivas seguras. Veja os 8 kits
A licença vitalícia é paga uma única vez: todos os novos componentes, atualizações e exportações do Playground, enquanto o Marvelous UI for publicado, sem renovação. A partir de 15 de out., você também pode assinar por ano ou por mês e receber o mesmo enquanto a assinatura estiver ativa. Se você parar, fica com todas as versões que baixou, para todos os projetos, para sempre. Execute npx marvelous-ui-library@latest update quando quiser atualizar um projeto; suas alterações locais não são sobrescritas.
A CLI salva localmente os arquivos Pro verificados. Execute npx marvelous-ui-library@latest restore para reinstalar uma versão obtida, mesmo depois do fim de uma assinatura.
Até 14 de out., a licença vitalícia é vendida pelo preço de lançamento: US$ 120 em vez de US$ 399 no Solo. É a mesma licença vitalícia de depois do lançamento, com todas as atualizações futuras e sem renovação, só que mais barata. As assinaturas abrem em 15 de out..
Sim, produtos finais ilimitados, inclusive comerciais. O que você não pode fazer é revender ou redistribuir os próprios componentes como UI kit, item de marketplace de templates ou biblioteca concorrente.
Os componentes usados nesse site ou app vão junto com ele, código-fonte incluído. Seu cliente só pode usá-los para operar e manter esse produto, não em outro. Com o Unlimited, você também pode repassar esse código-fonte para que o cliente ou os outros fornecedores dele mantenham o produto. Um freelancer que trabalha nos seus projetos conta como um dos seus desenvolvedores. Leia a licença
Sim. Construa seu site de graça: comece com um template, arraste seções e componentes, edite o texto e escolha a cor da sua marca. Publique quando estiver pronto: todos os planos dão a você um site HTML estático pronto para enviar à Netlify ou ao Cloudflare Pages, ou o código-fonte dele em HTML, React, Vue, Svelte ou Astro. Nós não hospedamos o site: ele funciona sozinho, sem nada para renovar para continuar no ar. Fique com o código-fonte para sempre: você recebe o código do seu site nos termos da licença.
Sim. Os componentes são tags HTML, arquivos CSS e módulos JavaScript, então funcionam em qualquer template renderizado no servidor: carregue o CSS e os scripts uma vez e depois escreva as tags. Copie os arquivos com a CLI (ela precisa do Node.js) ou do ZIP: o Free pack, ou o Pro pack da página de download.
Perfeitamente. Todos os seletores ficam dentro de :where() em @layer mv.*, então seus utilitários sempre os sobrescrevem. Declare a ordem das camadas uma vez e pronto.
Todos os módulos são compatíveis com SSR (sem acesso a window/document no nível superior). Os componentes são ativados no cliente.
Roles ARIA, suporte completo a teclado e foco visível em cada componente interativo. Os efeitos decorativos ficam ocultos para as tecnologias assistivas e param quando o usuário prefere movimento reduzido.
Mande um e-mail em até 14 dias. Se você ainda não baixou o Pro pack (com a CLI ou pela página de download), recebe o reembolso integral, sem perguntas. Se já baixou, conte o que não funcionou e reembolsamos você, uma única vez. Antes, você pode experimentar grátis o Free pack e o Playground. Termos
Sim. O pagamento é processado pelo nosso revendedor oficial (merchant of record), que emite uma fatura em conformidade com as regras de IVA, com os dados da sua empresa.
Sem preocupações. Deixe a UI com a gente. Lançamento: em breve.
Esta página foi traduzida com IA. Informar um problema de tradução