Apresentamos o RetroUI 2.0 - maior, mais ousado, melhor

Ficamos construindo no escuro por meses. Hoje acendemos a luz.

O RetroUI 2.0 chegou, e é a maior atualização que já lançamos. Isto não é uma simples mudança de número de versão: é uma evolução completa do que o RetroUI pode fazer e de como você interage com ele.

Quando lançamos o RetroUI, o objetivo era simples: dar aos desenvolvedores uma biblioteca de UI que não se parecesse com todo o resto. Designs com caráter, uma estética neobrutalista e componentes que fazem os seus projetos se destacarem. Essa visão não mudou. Mas a forma como a cumprimos? Isso evoluiu de forma drástica.

Vamos ao que interessa.

🎨 Suporte a Base UI - a fundação que você vinha pedindo

Uma das funcionalidades mais solicitadas desde o primeiro dia foi o suporte a Base UI, e ele enfim chegou.

O que é o Base UI?

O Base UI é uma biblioteca de componentes React acessíveis e sem estilo, criada pela equipe do MUI. Pense nele como a alternativa headless e agnóstica de framework ao Material UI: você recebe todo o comportamento e toda a lógica de acessibilidade sem nenhum critério visual imposto.

Por que isso importa para o RetroUI

Até agora, os componentes do RetroUI eram construídos sobre as primitivas do Radix UI (que são excelentes, que fique claro). Mas o Base UI abre novas possibilidades:

• Flexibilidade de framework: o Base UI funciona sem atritos em React, Next.js e outros frameworks modernos
• Melhor tree-shaking: bundles mais leves graças a uma otimização aprimorada
• Acessibilidade reforçada: as primitivas de acessibilidade do Base UI são mais do que testadas e cumprem as WCAG desde o primeiro momento
• Uma arquitetura à prova de futuro: pensada para os React Server Components e o ecossistema React moderno

O que isso significa para você? Os componentes do RetroUI agora são mais rápidos, mais acessíveis e mais flexíveis do que nunca. E tudo isso sem abrir mão da linguagem visual ousada e distintiva que você adora.

Copiar// Now powered by Base UI under the hood
import { Button } from '@/components/neobrutalism'
 
<Button variant="primary">
  Still bold. Still RetroUI. Now even better.
</Button>

🌐 Um só site, uma só visão - OS e Pro unidos

Aqui vai algo que nos incomodava: manter sites separados para o RetroUI OS (grátis) e o RetroUI Pro parecia... fragmentado. Como se dividíssemos a nossa comunidade em vez de uni-la.

Agora não mais.

Um site totalmente redesenhado

Reconstruímos todo o site do RetroUI do zero, fundindo OS e Pro em uma experiência coesa. Veja o que há de novo:

Uma biblioteca de componentes unificada

Explore todos os componentes, gratuitos e pro, em um só lugar. Acabaram os saltos entre sites para ver o que está disponível. Tudo está claramente marcado, então você sabe o que é grátis e o que é premium.

Uma navegação mais limpa

Encontrar o que você precisa é mais rápido e intuitivo. Componentes, blocks, templates, docs: cada coisa tem o seu lugar lógico.

Um design mais polido

Pregamos com o exemplo. O novo site é mais ousado, mais rápido e mais refinado. É uma vitrine do que o RetroUI pode fazer quando você se compromete com a estética.

Uma melhor experiência no mobile

O site antigo funcionava no mobile. O novo brilha no mobile. Design responsivo feito do jeito certo, com interações táteis que parecem nativas.

A melhor parte? Tudo funciona com componentes do RetroUI. Consumimos a nossa própria cozinha: cada componente que você vê no site é algo que pode usar nos seus projetos.

📚 Documentação que de fato ajuda

Vamos ser sinceros: a documentação costuma ficar em segundo plano. Desta vez, não.

Renovamos por completo as docs do RetroUI, com funcionalidades que facilitam a sua vida:

Copiar como Markdown

Está trabalhando na documentação do seu próprio projeto? Escrevendo um artigo sobre o RetroUI? Agora você pode copiar o código de um componente como Markdown com um único clique.

Ideal para:

• Criar a documentação dos seus próprios componentes
• Escrever tutoriais e guias
• Compartilhar exemplos de código em ferramentas baseadas em Markdown (Notion, GitHub, etc.)

Documentação turbinada com IA

Integramos assistência por IA diretamente nas docs. Tem uma dúvida sobre como personalizar um componente? Precisa entender a API? A IA ajuda você a encontrar respostas mais rápido do que vasculhando páginas de documentação.

Exemplos do que você pode perguntar:

• "Como faço para o componente Button usar cores personalizadas?"
• "Quais props o componente Card aceita?"
• "Mostre exemplos de uso do Modal com formulários"

É como ter um especialista em RetroUI à disposição, 24 horas por dia.

Exemplos de código aprimorados

Cada componente agora conta com:

• Prévias ao vivo com as quais você pode interagir
• Várias variantes que mostram diferentes casos de uso
• Código pronto para copiar e colar com os imports corretos
• Exemplos em TypeScript para uma tipagem mais segura
• Notas de acessibilidade que explicam como cada componente lida com a a11y

Acabaram os chutes. Acabaram os mergulhos no código-fonte. Apenas exemplos claros e úteis que fazem você avançar mais rápido.

🧱 Mais de 100 novos blocks - construa mais rápido do que nunca

Os componentes são ótimos. Mas às vezes você precisa de seções completas, não apenas botões e cards.

É aí que entram os blocks.

O que são os blocks?

Os blocks são seções pré-construídas que você solta no seu projeto: seções hero, tabelas de preços, grades de funcionalidades, depoimentos, CTAs e muito mais. São totalmente responsivos, acessíveis e prontos para personalizar.

O que há de novo na 2.0?

Adicionamos mais de 100 novos blocks em todas as categorias que você possa imaginar:

Seções hero

• Mais de 15 novas variações de hero, do minimalista ao de tela cheia
• Incluem fundos animados, layouts de tela dividida e heros com vídeo

Funcionalidades e benefícios

• Grades de funcionalidades baseadas em ícones
• Vitrines com capturas de tela
• Guias passo a passo
• Tabelas comparativas

Tabelas de preços

• De layouts simples de 2 colunas a preços complexos de 4 níveis
• Alternador de cobrança (mensal/anual)
• Matrizes de comparação de funcionalidades

Depoimentos

• Layouts em grade, carrosséis e designs em mosaico
• Depoimentos em vídeo
• Murais de logos como prova social

CTAs e conversões

• Cadastros na newsletter
• Formulários de lista de espera
• Seções de download de app
• Formulários de contato com caráter

Cabeçalhos e navegação

• Megamenus
• Padrões de navegação pensados mobile-first
• Cabeçalhos fixos com efeitos ao rolar

Rodapés

• Rodapés de várias colunas
• Rodapés minimalistas de uma única linha
• Rodapés com a newsletter integrada

Cada block é construído com a mesma estética ousada do RetroUI: bordas grossas, sombras duras, cores vibrantes e layouts assimétricos. São projetados para se destacar, não para se misturar.

Copiar// Drop in a complete hero section in seconds
import { HeroBold } from '@/components/blocks'
 
<HeroBold
  title="Your Product Name"
  subtitle="Ship faster with bold design"
  cta="Get Started"
/>

🌙 Novo template: dashboard de ferramenta dev em modo escuro

Os templates são onde tudo converge: componentes, blocks e filosofia de design unidos em uma aplicação completa.

Apresentamos o nosso template mais recente: o Dark Mode Dev Tool Dashboard.

O que é?

Um dashboard com todas as funcionalidades, pensado com o modo escuro em primeiro lugar, feito para ferramentas de desenvolvimento, plataformas SaaS e painéis de administração. É tudo o que você precisa para construir uma aplicação pronta para produção com a estética ousada do RetroUI.

O que está incluído?

Um layout de dashboard completo

• Navegação lateral com menu recolhível
• Cabeçalho superior com busca e perfil de usuário
• Design responsivo que funciona em mobile, tablet e desktop

Páginas pré-construídas

• Visão geral do dashboard com métricas e gráficos
• Gestão de usuários (lista, detalhe, edição)
• Página de configurações com exemplos de formulários
• Página de documentação de API
• Gestão de cobrança e assinaturas

O modo escuro bem feito

• Não são simples cores invertidas: foi projetado de propósito para fundos escuros
• Alto contraste para a legibilidade
• Cores de acento vibrantes que estouram sobre fundos escuros

Funcionalidades prontas para produção

• Telas de autenticação (login, cadastro, esqueci a senha)
• Estados de erro e estados vazios
• Skeletons de carregamento
• Notificações toast
• Diálogos modais e confirmações

Pensado para desenvolvedores

• Construído com TypeScript
• Estrutura de componentes documentada
• Fácil de personalizar e estender
• Segue as convenções do App Router do Next.js

Isto não é um template de brinquedo. É uma base sobre a qual construir produtos reais. Seja lançando um novo SaaS, construindo uma ferramenta interna ou criando uma plataforma para desenvolvedores, este template te dá uma vantagem de partida.

E sim, ele não se parece em nada com os demais templates de dashboard por aí. Esse é justamente o ponto.

Por que isso importa

O RetroUI 2.0 não é só sobre adicionar funcionalidades. É sobre tornar o RetroUI mais potente, mais flexível e mais útil para projetos do mundo real.

O suporte a Base UI significa melhor desempenho e acessibilidade.

O site unificado significa uma descoberta mais fácil e uma experiência melhor para todos.

As docs aprimoradas significam menos tempo procurando e mais tempo construindo.

Mais de 100 novos blocks significam que você pode despachar páginas completas em minutos, não em dias.

O template em modo escuro significa que você tem uma base sólida para o seu próximo projeto.

Em conjunto, essas novidades fazem do RetroUI 2.0 a biblioteca de UI mais completa e pronta para produção, para desenvolvedores que se recusam a construir interfaces chatas.

E agora?

É um lançamento grande, mas não paramos por aqui. Veja o que está no roadmap:

• Mais templates (variantes em modo claro, landings, e-commerce)
• Integração Figma para código para um fluxo de design a desenvolvimento mais rápido
• Novos componentes de Base UI à medida que ampliamos a biblioteca
• Uma vitrine da comunidade que destaca projetos construídos com o RetroUI
• Tutoriais em vídeo que percorrem padrões e casos de uso comuns

E também escutamos. Se há um componente que você precisa, uma funcionalidade que você quer ou um problema que te trava, conte para a gente. O RetroUI é feito para desenvolvedores, por desenvolvedores. Seus comentários dão forma ao que construímos em seguida.

Experimente o RetroUI 2.0 hoje mesmo

Pronto para começar? Veja como dar os primeiros passos:

Para novos usuários

Copiar# Install RetroUI
npx retroui-cli init
 
# Or install via npm
npm install @retroui/react

Explore os componentes, descubra os blocks e pegue o novo template. Tudo está pronto para usar no seu projeto de Next.js, React ou Vite.

Para usuários existentes

Se o RetroUI já faz parte das suas ferramentas, passar para a 2.0 é simples:

pnpmnpmyarnbun
pnpm add @retroui/react@latest
npm install @retroui/react@latest
yarn add @retroui/react@latest
bun add @retroui/react@latest
Copiar

Confira o changelog para eventuais mudanças que quebrem compatibilidade (há pouquíssimas, e documentamos uma solução para todas elas).

Obrigado

O RetroUI existe porque desenvolvedores como você estão cansados dos designs genéricos. Você quer construir coisas que se destaquem, que tenham personalidade, que pareçam diferentes.

Estamos aqui para tornar isso mais fácil.

A versão 2.0 é o fruto de meses de trabalho, centenas de commits, incontáveis iterações de design e os comentários de uma comunidade incrível. Obrigado por fazer parte desta jornada.

Agora vá e construa algo ousado. 🚀

Explore o RetroUI 2.0:

• Explorar componentes
• Descobrir os blocks
• Pegar o template
• Ler as docs
• Entrar na comunidade

Dúvidas? Comentários? Encontrou um bug? Abra uma issue no GitHub ou fale com a gente no Twitter/X.