Lançamento: em breve. Quem está na lista de espera entra primeiro. - Entre na lista de espera →
MarvelousUI
PT-BR
Entrar na lista
Novo Servidor MCP para Claude Code, Cursor & Copilot

Sem preocupações. Deixe a UI com a gente.

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 servidor MCP para que seu agente de IA instale exatamente o componente certo.

Baixe o Free pack

Acesso antecipado no dia do lançamento. Sem spam, cancele a inscrição com um clique · Privacidade.

claude · ~/my-saas

> Adicione uma seção de estatísticas com um card brilhante e um número que vai subindo

Buscando no Marvelous UI

marvelous-ui search_components "stats card glow count up"

→ border-beam, card, number-ticker

marvelous-ui install_components framework: "react"

✓ 3 componentes + tokens copiados para src/marvelous/ · 0 dependências npm adicionadas

✓ Stats.tsx criado. Modo escuro, teclado e movimento reduzido resolvidos.

Uma só biblioteca. Para qualquer stack que você venha a adotar.

ReactNext.jsVueNuxtSvelteSvelteKitAngularAstroSolidQwikLitLaravel BladeRailsDjangoWordPressHTML puro
componentes e efeitos no lançamento
dependências em tempo de execução
~ KBtamanho mediano por componente (gzip)
respeitam o movimento reduzido e o modo escuro

Por que Marvelous

Construído sobre a plataforma. Não sobre um framework que vai ser reescrito no ano que vem.

Nativo para IA, de verdade

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.

Ver as ferramentas MCP →

Independente de framework

Custom Elements nativos + CSS em camadas. Troque de stack e mantenha sua UI.

Sua marca em uma linha

Design tokens OKLCH. Arraste o controle: esta página inteira muda de tema ao vivo.

Acessível por padrão

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.

Veja os componentes →

O código é seu

Arquivos legíveis vão direto para o seu repositório. Sem caixa-preta, sem aprisionamento.

Ao vivo, não capturas de tela

Toque em tudo. Esta página é feita 100% com Marvelous UI.

Interfaces que as pessoas realmente lembram.

<mv-text-reveal>

Faça brilhar

<mv-sparkles-text>

Degradê aurora

.mv-gradient-text

Respostas em segundos

<mv-text-highlight> · hover

$

Padrão de pontos · clique aqui
Partículas · mova o cursor
Meteoros
Grade retrô
Granulado animado
Partículas · atração

Spotlight

Uma luz segue seu cursor por todo o grupo.

Border beam

Um cometa percorre a borda.

Shine

Reflexos cônicos giratórios.

Electric

Uma borda crepitante, desenhada em JS.

Neon glow

Borda em degradê + halo.

Gradient

Uma borda em degradê em movimento.
<mv-confetti-button>
data-effect
PagoPendenteAo vivo
.mv-badge · data-pulse
<mv-theme-toggle> · circular reveal
<mv-thinking-orb> · AI states
toast() · swipe to dismiss

Rótulos, dicas e estados de erro, tudo em CSS.

$24 / mês

$19 / mês, cobrado anualmente

Também na caixa: dialog, drawer, popover, menu, combobox, paleta de comandos, seletor de data, calendário, tabela, OTP, upload de arquivos, stepper, toast, tooltip, gráfico… as partes chatas, bem feitas.

+ 280 outros

Veja a documentação de cada componente →

Light ✦

As pequenas coisas que todo app reescreve. Uma tag para cada uma, acessíveis por padrão.

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>
  • Fatura nº 4821 paga
  • Deploy em produção
  • Aiko entrou na equipe
<mv-relative-time>
Gorro de lã merino $38
2
<mv-count-bump>

Exclusivos

Mecânicas que você já conhece de cor. Reconstruídas como UI que resolve problemas reais.

150 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.

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.

Playground

Arraste. Solte. Publique.

Comece de uma página em branco ou de um template, arraste seções e componentes, edite o texto e escolha a cor da sua marca. Exporte código HTML, React, Vue, Svelte ou Astro limpo com um clique.

  • 14 seções de página inteira
  • 9 elementos animados
  • 3 templates de página

Navbar, hero, recursos em bento e spotlight, estatísticas, preços, depoimentos, FAQ, newsletter, chamada para ação, footer: prontos para encaixar, feitos só com a biblioteca.

Abra o Playground, é grátis

Grátis para experimentar. A exportação de código está incluída em todos os planos.

Para Claude Code · Cursor · Copilot · Windsurf

Seu agente para de chutar. Ele lê o manual.

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.

  • search_components busca de texto completo em nomes, tags e APIs
  • get_component API, notas de acessibilidade, marcação de demo canônica
  • install_components copia arquivos + dependências e devolve o trecho de código para o seu framework
  • get_design_tokens para que seu CSS personalizado combine com o seu tema
Claude CodeCopiar comando
claude mcp add marvelous-ui -- node ./marvelous/mcp/server.mjs
Cursor · .cursor/mcp.jsonCopiar configuração
{
  "mcpServers": {
    "marvelous-ui": {
      "command": "node",
      "args": ["./marvelous/mcp/server.mjs"]
    }
  }
}

Prefere não usar IA? A CLI faz o mesmo: node marvelous/scripts/add.mjs dialog tabs --out src/ui

A comparação honesta

A maioria dos kits de UI animados é só para React. O seu não deveria ser.

RecursoKit de UI típico para ReactMarvelous UI
Funciona em Vue, Svelte, Angular, Astro, HTML✕✓
Dependências em tempo de execuçãoframer-motion, three, gsap…nenhuma
Servidor MCP para agentes de IAraramente✓ incluído
Componentes originais que você não encontra em outro lugarraramente150 Exclusives
Modo escuro + movimento reduzido em tudovaria✓ em cada componente
Seu CSS sempre vence (camadas de especificidade zero)✕✓
Preçosmuitas vezes, assinatura anualpagamento único, seu para sempre

Preços

Preços simples. Pague uma vez, use para sempre.

Todos os planos incluem todos os componentes, o servidor MCP, a CLI e 12 meses de novos componentes, atualizações e exportações do Playground.

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).

Free pack

Comece grátis. 20 componentes, sem e-mail, sem conta.

Os componentes básicos do dia a dia, com o mesmo código, a mesma CLI e o mesmo servidor MCP dos planos pagos. Licença MIT: baixe o zip, leia o código-fonte e publique.

  • Button
  • Badge
  • Card
  • Input
  • Textarea
  • Field
  • Select
  • Checkbox
  • Radio
  • Switch
  • Dialog
  • Popover
  • Tooltip
  • Tabs
  • Accordion
  • Toast
  • Menu
  • Separator
  • Kbd
  • Skeleton
Baixe o Free pack

ZIP · download direto · inclui o servidor MCP, a CLI e a documentação

Conecte o MCP ao seu agenteCopiar comandos
cd marvelous-ui-free && npm install
node scripts/init-agent.mjs ../my-app

Cria o AGENTS.md e a configuração MCP para Claude Code, Cursor, VS Code e Gemini CLI. Codex, Windsurf, Zed: veja docs/MCP.md no zip.

Quer o resto?

Qualquer plano libera a biblioteca inteira.

  • Todos os mais de 300 componentes e efeitos
  • Originais exclusivos, que você não encontra em nenhum outro lugar
  • Blocos de página inteira: hero, preços, FAQ, footer…
  • Exportação do Playground para HTML, React, Vue, Svelte, Astro

Done for you

Sem tempo? Nós criamos sua landing page com ela. Em 5 dias.

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.

Escreva para nós

FAQ

Suas perguntas, respondidas.

Funciona mesmo com React / Vue / Svelte / Angular?

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.

O que são os Exclusives e os kits?

Os Exclusives são 150 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

O que acontece depois do primeiro ano?

Você paga uma vez e fica com tudo o que baixou, para todos os projetos, para sempre. Os primeiros 12 meses de novos componentes, atualizações e exportações do Playground estão incluídos. Depois disso, renovar é opcional (de US$ 59 a US$ 359 por ano, conforme o plano). Se você parar, nada do que você criou ou baixou é tirado de você.

Posso usar em projetos de clientes e produtos SaaS?

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.

O que o meu cliente recebe quando eu entrego um projeto?

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

Funciona com Tailwind?

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.

SSR? Next.js, Nuxt, SvelteKit, Astro?

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.

É acessível?

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.

E se eu não gostar?

Mande um e-mail em até 14 dias. Se você ainda não baixou o Pro pack, 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

Recebo uma fatura para a minha empresa?

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.

Pare de refazer os mesmos componentes a cada projeto.

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