Pular para o conteúdo
CrazyStackCrazyStack início
Começar
🎯 Aula 04

🎨 Instalação do shadcn/ui

Configure a biblioteca de componentes mais moderna para Next.js, com design system completo e totalmente customizável.

20 minutos
Nível: Intermediário

Por que isso é importante

O shadcn/ui revoluciona desenvolvimento front-end ao oferecer componentes de qualidade profissional que você possui completamente. Usado por 80% das startups Y Combinator, acelera desenvolvimento em 70% mantendo flexibilidade total para customização.

Conceitos Importantes para Entender

Não é uma biblioteca tradicional:

shadcn/ui copia componentes para seu projeto, dando controle total sobre código. Você não instala um pacote, você recebe o código fonte.

Radix UI + Tailwind CSS:

Baseado em Radix UI (acessibilidade) e Tailwind CSS (estilização). Combina a melhor UX com design moderno.

CSS Variables + Theming:

Sistema de temas avançado com CSS Variables, permitindo mudanças dinâmicas e múltiplos temas.

Copy & Paste Architecture:

Arquitetura "copy & paste" elimina dependências externas e oferece máxima flexibilidade de customização.

O que é shadcn/ui?

🎯 Filosofia Diferente

  • Você possui o código - não uma dependência
  • Customização total - modifique como quiser
  • Sem vendor lock-in - sempre funciona
  • Performance máxima - apenas o que usa

🔧 Stack Tecnológica

  • Radix UI - primitivos acessíveis
  • Tailwind CSS - utilitários de estilo
  • TypeScript - type safety completo
  • Class Variance Authority - variantes

💡 Diferença Fundamental

Biblioteca tradicional: npm install → import ` Button ` from 'library'
shadcn/ui: npx shadcn@latest add button → você recebe Button.tsx no seu projeto

Pré-requisitos

✅ Obrigatórios

  • Projeto Next.js 13+ criado
  • TypeScript configurado
  • Tailwind CSS instalado
  • Node.js 18+ instalado

🎯 Verificação Rápida

typescript
# Verificar se está no projeto Next.js
ls package.json next.config.js

# Verificar TypeScript
ls tsconfig.json

# Verificar Tailwind
ls tailwind.config.js

Instalação e Configuração

1️⃣ Inicialização2️⃣ Componentes3️⃣ Uso Prático
init

🚀 Passo 1: Inicializar shadcn/ui

O comando init configura o projeto com todas as dependências e arquivos necessários:

🔧 Comando de Inicialização

typescript
# Inicializar shadcn/ui no projeto
bunx shadcn@latest init

# Alternativas para outros package managers:
# npx shadcn@latest init
# pnpm dlx shadcn@latest init
# yarn dlx shadcn@latest init

📋 Configurações Interativas

typescript
# O CLI fará perguntas sobre configuração:

✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate  
✔ Would you like to use CSS variables for colors? › yes
✔ Where is your global CSS file? › src/app/globals.css
✔ Would you like to use CSS variables for colors? › yes
✔ Where is your tailwind.config.js located? › tailwind.config.js
✔ Configure the import alias for components? › @/components
✔ Configure the import alias for utils? › @/lib/utils

✅ O que foi criado/modificado

  • components.json - configuração do shadcn/ui
  • src/lib/utils.ts - utilitários (função cn)
  • src/app/globals.css - variáveis CSS adicionadas
  • package.json - dependências instaladas
components

📦 Passo 2: Instalando Componentes

Você pode instalar componentes individualmente ou todos de uma vez:

🎯 Componentes Individuais (Recomendado)

typescript
# Instalar componente específico
bunx shadcn@latest add button

# Instalar múltiplos componentes
bunx shadcn@latest add button card badge

# Exemplos de componentes populares:
bunx shadcn@latest add button card input textarea
bunx shadcn@latest add dialog dropdown-menu tabs
bunx shadcn@latest add form table pagination

🚀 Todos os Componentes (Desenvolvimento Rápido)

typescript
# Instalar TODOS os componentes disponíveis
bunx shadcn@latest add --all

# ⚠️ Isso instalará 50+ componentes (~2MB de código)
# Use apenas se precisar de muitos componentes

⚠️ Atenção

O comando --all instala todos os componentes. Para projetos em produção, instale apenas os necessários.

📁 Estrutura Criada

bash
src/
├── components/
│   └── ui/           ← Componentes shadcn/ui
│       ├── button.tsx
│       ├── card.tsx
│       ├── input.tsx
│       └── ...
└── lib/
    └── utils.ts      ← Utilitários (função cn)
usage

🛠️ Passo 3: Uso Prático

Agora você pode usar os componentes no seu projeto:

🎨 Exemplo Básico - Button

app/page.tsx
import { Button } from "@/components/ui/button"

export default function HomePage() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">Minha Aplicação</h1>
      
      {/* Botão padrão */}
      <Button>Clique aqui</Button>
      
      {/* Variantes */}
      <Button variant="outline">Botão Outline</Button>
      <Button variant="ghost">Botão Ghost</Button>
      <Button variant="destructive">Excluir</Button>
      
      {/* Tamanhos */}
      <Button size="sm">Pequeno</Button>
      <Button size="lg">Grande</Button>
    </div>
  )
}

🃏 Exemplo Avançado - Card + Form

app/login/page.tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function LoginPage() {
  return (
    <div className="flex min-h-screen items-center justify-center p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Fazer Login</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <Label htmlFor="email">Email</Label>
            <Input id="email" type="email" placeholder="seu@email.com" />
          </div>
          <div>
            <Label htmlFor="password">Senha</Label>
            <Input id="password" type="password" />
          </div>
          <Button className="w-full">Entrar</Button>
        </CardContent>
      </Card>
    </div>
  )
}

🎯 Customização Avançada

components/ui/button.tsx
// Você pode modificar qualquer componente:
// src/components/ui/button.tsx

import { cn } from "@/lib/utils"

const Button = ({ className, ...props }) => {
  return (
    <button
      className={cn(
        // Estilos base
        "inline-flex items-center justify-center rounded-md",
        // Seus estilos customizados
        "hover:scale-105 transition-transform",
        "bg-gradient-to-r from-blue-500 to-purple-600",
        className
      )}
      {...props}
    />
  )
}

Componentes Mais Utilizados

🎯 Essenciais

buttonBotões e CTAs
cardContainers de conteúdo
inputCampos de texto
labelRótulos de formulário
badgeTags e status

🚀 Avançados

dialogModais e pop-ups
dropdown-menuMenus suspensos
tabsNavegação por abas
formFormulários avançados
tableTabelas de dados
typescript
# Instalar kit completo para desenvolvimento
bunx shadcn@latest add button card input label badge dialog dropdown-menu tabs form table

# Para dashboard/admin
bunx shadcn@latest add sidebar navigation-menu breadcrumb pagination

# Para e-commerce  
bunx shadcn@latest add carousel sheet toast progress

Temas e Customização

🎨 Sistema de Temas

shadcn/ui usa CSS Variables para um sistema de temas flexível:

css
/* src/app/globals.css */
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    
    /* Mais variáveis... */
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    /* Tema escuro... */
  }
}

🔧 Customização Rápida

Modifique componentes diretamente no seu projeto:

typescript
// components/ui/button.tsx
const buttonVariants = cva(
  "inline-flex items-center justify-center",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground",
        // Adicione suas variantes
        gradient: "bg-gradient-to-r from-blue-500 to-purple-600",
        neon: "bg-lime-400 text-black hover:bg-lime-300",
      },
    },
  }
)

Vantagens desta Implementação

  • 🏆 Qualidade Profissional:

    Componentes de nível enterprise usados por Vercel, Linear e Supabase

  • ♿ Acessibilidade Nativa:

    Baseado em Radix UI, seguindo padrões WCAG

  • 🔒 Controle Total:

    Você possui o código, sem vendor lock-in

  • 🚀 Performance Otimizada:

    Tree-shaking automático, apenas código usado no bundle

  • 🎨 Design System Completo:

    Temas, variantes e consistência visual automática

  • ⚡ Developer Experience:

    TypeScript, IntelliSense e documentação integrada

O que Você Conquistou

🎉 Fantástico! Você agora tem o sistema de componentes mais moderno e flexível do ecossistema React, usado pelas melhores empresas do mundo.

  • ✅ shadcn/ui configurado com todos os utilitários e dependências
  • ✅ Componentes profissionais prontos para uso em produção
  • ✅ Sistema de temas flexível com CSS Variables
  • ✅ Acessibilidade nativa seguindo padrões internacionais
  • ✅ Customização total sem limitações de terceiros
  • ✅ Performance otimizada com tree-shaking automático

Próxima aula