Acesse o painel da sua conta

Não tem uma conta? Registrar

Entrar em contato

Visite também nosso site craftxp.com.br

  • img
  • img
  • img
  • img
  • img
  • img

Entre em contato

Shadcn/ui e Radix UI: Construindo Interfaces de Usuário Modernas, Acessíveis e Customizáveis com React

Shadcn/ui e Radix UI: Construindo Interfaces de Usuário Modernas, Acessíveis e Customizáveis com React

O que é Shadcn/ui?

O Shadcn/ui não é uma biblioteca de componentes tradicional. Diferente de soluções como Material UI, Chakra UI ou Ant Design, o Shadcn/ui é um sistema de componentes copiáveis — você adiciona os componentes diretamente ao seu código-fonte, mantendo controle total sobre cada linha de CSS e comportamento.

Criado por shadcn (um desenvolvedor focado em experiência do desenvolvedor), o projeto explodiu em popularidade desde seu lançamento em 2023, acumulando mais de 80 mil estrelas no GitHub e se tornando a escolha padrão para novos projetos Next.js e React.

Por que Shadcn/ui é Diferente?

1. Você é o Dono do Código

Com Shadcn/ui, não há uma dependência npm pesada. Os componentes são instalados via CLI diretamente no seu projeto:

npx shadcn@latest init
npx shadcn@latest add button
npx shadcn@latest add card dialog dropdown-menu

Cada componente baixado fica em @/components/ui/ e pode ser editado livremente. Quer mudar a cor do botão? Altere o className. Quer adicionar uma animação personalizada? É só editar o arquivo.

2. Construído sobre Radix UI

Por baixo dos panos, o Shadcn/ui utiliza os primitivos headless do Radix UI — uma das bibliotecas de componentes acessíveis mais respeitadas do ecossistema React. O Radix cuida de:

  • Acessibilidade (WAI-ARIA) — Navegação por teclado, foco gerenciado, atributos ARIA corretos
  • Comportamento — Lógica de modais, dropdowns, tooltips, acordeões e tabs
  • Headless por padrão — Sem CSS embutido, você decide a aparência
// Exemplo: Um Dialog (Modal) com Shadcn/ui
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'

export function ConfirmDeleteDialog() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="destructive">Excluir Usuário</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Tem certeza?</DialogTitle>
          <DialogDescription>
            Esta ação não pode ser desfeita. O usuário será removido permanentemente.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="outline">Cancelar</Button>
          <Button variant="destructive">Confirmar Exclusão</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

Radix UI: A Fundação Acessível

O Radix UI é uma coleção de primitivos de interface headless, sem estilos e totalmente acessíveis. São mais de 30 componentes que resolvem problemas complexos de interação:

  • Dialog — Modal com gerenciamento de foco e fechamento por Escape
  • Dropdown Menu — Menus contextuais com navegação por setas
  • Popover — Elementos flutuantes com posicionamento inteligente
  • Tooltip — Dicas contextuais com delay e posicionamento
  • Tabs — Navegação por abas com teclado
  • Accordion — Seções expansíveis com suporte a múltiplos itens
  • Select — Seletores com busca e autocomplete

Personalização com Tailwind CSS e Class Variance Authority

O Shadcn/ui usa Tailwind CSS para estilização e cva (Class Variance Authority) para variantes de componentes. Isso permite criar botões com múltiplas variantes de forma limpa:

// Definindo variantes de botão com cva
const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md text-sm font-medium',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-10 px-4 py-2',
        sm: 'h-9 rounded-md px-3',
        lg: 'h-11 rounded-md px-8',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  }
)

Temas Globais com CSS Variables

Uma das características mais poderosas do Shadcn/ui é o sistema de temas baseado em variáveis CSS. Em vez de classes Tailwind hardcoded, os componentes usam tokens semânticos que podem ser redefinidos globalmente:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --destructive: 0 84.2% 60.2%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
  }
}

Isso significa que você pode alternar entre modo claro e escuro com uma única classe no <html>, e todos os componentes se adaptam automaticamente.

Como Instalar e Usar no seu Projeto Next.js

O processo de setup é simples e rápido:

# 1. Criar um projeto Next.js
npx create-next-app@latest meu-dashboard --typescript --tailwind

# 2. Inicializar o Shadcn/ui
npx shadcn@latest init

# 3. Adicionar componentes conforme necessário
npx shadcn@latest add button card input table form

# 4. Importar e usar
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

export default function Home() {
  return (
    <Card className="max-w-md mx-auto mt-20">
      <CardHeader>
        <CardTitle>Bem-vindo ao Dashboard</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Começar</Button>
      </CardContent>
    </Card>
  )
}

Ecosistema e Comunidade

O Shadcn/ui gerou um ecossistema vibrante:

  • shadcn/ui blocks — Blocos de código prontos para dashboards, landing pages e autenticação
  • Magic UI — Animações e componentes criativos baseados em Shadcn
  • Aceternity UI — Componentes com efeitos visuais impressionantes
  • Origin UI — Coleção de componentes premium gratuitos
  • Template de Next.js + Shadcn — Projetos starter oficiais da Vercel

Conclusão

O Shadcn/ui não é apenas mais uma biblioteca de componentes — é uma nova filosofia sobre como construir interfaces. Ao dar ao desenvolvedor controle total sobre o código, eliminar dependências desnecessárias e priorizar acessibilidade desde o início, ele se tornou a escolha preferida para projetos React modernos.

Combinado com o Radix UI para comportamento robusto e o Tailwind CSS para estilização flexível, o Shadcn/ui oferece o melhor dos três mundos: acessibilidade, customização e produtividade. Se você ainda não experimentou, comece hoje mesmo com npx shadcn@latest init.

Craft XP
Craft XP