shadcn/ui: Por Que Adotei e Como Personalizo

O que torna shadcn/ui diferente

shadcn/ui não é uma dependency no package.json. Você copia os componentes para o seu projeto. Isso inverte a dinâmica usual de bibliotecas de UI: em vez de customizar dentro das restrições da biblioteca, você possui o código e faz o que precisar.

A filosofia: componentes como ponto de partida

Cada componente do shadcn/ui é construído sobre primitivos Radix UI (acessibilidade e comportamento) + Tailwind CSS (estilo). O shadcn provê uma camada de composição sólida — você não precisa reinventar a roda de acessibilidade, mas também não fica preso a decisões de estilo que não servem ao seu projeto.

# Adicionar um componente ao projeto
npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add card

# Componente vai para src/components/ui/button.tsx
# Você edita diretamente — sem precisar de theme override

Como personalizo neste projeto

Este portfólio usa shadcn/ui com algumas customizações consistentes: glass morphism em cards, gradientes primários em botões CTA e animações de hover via CSS custom properties.

/* globals.css — design tokens customizados */
@layer base {
  :root {
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
  }
}

@layer utilities {
  .glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
  }

  .gradient-primary {
    background: var(--gradient-primary);
  }

  .card-enhanced {
    transition: transform 200ms ease, box-shadow 200ms ease;
  }

  .card-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  }
}

Quando não usar shadcn/ui

• Projetos com design system próprio já maduro — mais work para adaptar
• Equipes que preferem biblioteca estável sem manutenção de componentes
• Quando você quer atualizações automáticas de segurança nos componentes