Durante anos, vivemos o ciclo do "Bootstrap/Material UI/Chakra". Você instala a lib, usa os componentes, e no dia que precisa mudar algo profundo, descobre que é impossível brigar com o estilo padrão.
Shadcn/ui mudou o jogo ao não ser uma biblioteca. É uma coleção de componentes reusáveis que você copia e cola no seu projeto.
O Conceito de "Ownership" (Posse)
Quando você usa Shadcn, o código do componente Button.tsx vive dentro da sua pasta /components.
// /components/ui/button.tsx
// Este código é SEU. Você pode alterar, deletar ou refatorar.
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
const buttonVariants = cva(...)
Isso significa que você tem controle total. Precisa que o botão tenha um loader nativo? Adicione. Precisa de uma variante "Glassmorphism"? Crie no arquivo CVA. Sem !important no CSS, sem brigar com a lib.
Radix UI: O Motor Invisível
A mágica só é possível porque o Shadcn usa Radix UI por baixo. O Radix cuida da parte difícil:
- Acessibilidade (Keyboard navigation, Screen readers).
- Gerenciamento de foco.
- Portais (para Modais/Dialogs).
O Shadcn aplica o Tailwind CSS em cima dessa lógica robusta.
Como Escalar com Shadcn
- Mantenha o Core Limpo: Evite alterar a lógica do Radix a menos que necessário.
- Use Temas: Configure suas cores no
globals.css(CSS Variables) para que o Shadcn herde automaticamente (Dark/Light mode). - Crie Abstrações: Se você usa um padrão repetitivo de
Card + Header + Content, crie um componente composto no seu projeto que usa as primitivas do Shadcn.
Conclusão
Shadcn não é uma "trend" passageira. É um retorno à sanidade no desenvolvimento frontend, devolvendo o controle do código para quem constrói o produto.
CLI e Novos Componentes
O npx shadcn-ui@latest add adiciona componentes ao projeto. Não instala um pacote — copia os arquivos para a pasta que você definir. Você pode escolher apenas os componentes que precisa (Button, Dialog, Select) e ignorar o resto, mantendo o bundle enxuto.
Temas e Variantes
O Shadcn usa CSS Variables para cores. Trocar de tema (claro/escuro) é alterar as variáveis no :root ou em .dark. As variantes (default, destructive, outline) são definidas via CVA (class-variance-authority), permitindo estender facilmente com novas variantes sem modificar a lógica do componente.