🎯 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 code

Instalação e Configuração

🚀 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 code

📋 Configurações Interativas

typescript code

✅ 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

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 code

Temas e Customização

🎨 Sistema de Temas

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

css code

🔧 Customização Rápida

Modifique componentes diretamente no seu projeto:

tsx code

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