Pular para o conteúdo
A
Get Pro
Começando

Introdução

Aura UI é um design system para React com 73 componentes, 23 efeitos de profundidade, cenas 3D e 33 temas — e uma versão React Native com 24 módulos. Tudo acessível, tipado e feito para Tailwind CSS v4.

Como funciona

Os componentes leem cores, raios e sombras de variáveis CSS (--aura-*). Um tema é só um conjunto dessas variáveis, aplicado com data-theme no <html>; o modo escuro é a classe .dark. Por isso trocar de tema não re-renderiza nada — e o mesmo componente fica bonito nos 33 temas.

  • Pacote npm: instale aura-ui-components e receba atualizações com o pnpm update.
  • CLI: aura-ui-cli add button copia o arquivo para o seu repositório e o código passa a ser seu.
  • Com IA: o servidor MCP entrega catálogo, código e setup para Claude, Cursor ou VS Code montarem telas com os componentes certos.

Pacotes

aura-ui-componentsOs componentes de interface — Radix por baixo, Tailwind v4 por cima.aura-ui-effectsEfeitos de profundidade: cards 3D, aurora, beams, spotlight, marquee…aura-ui-threeCenas WebGL opcionais com React Three Fiber.aura-ui-nativeOs mesmos temas e tokens no React Native (iOS, Android e web).aura-ui-core + aura-ui-tailwindTokens, temas, ThemeProvider, cn() e o preset do Tailwind v4.aura-ui-cliCopia o código-fonte dos componentes para o seu projeto (modelo shadcn).aura-ui-mcpServidor MCP: o seu assistente de IA conhece o catálogo inteiro.

Princípios

  • Acessível por padrão — primitivas Radix, foco visível, ARIA correto e prefers-reduced-motion respeitado em todas as animações.
  • Maleável — variantes com cva, className mesclado com cn() e asChild onde faz sentido.
  • Profundidade com propósito — sombras em camadas, vidro e 3D em CSS; WebGL só quando você importar aura-ui-three.
  • Server Components — os componentes interativos já trazem "use client".

Próximo passo: instalar no seu projeto.