Aprenda Shadcn/UI do zero: 46+ componentes React, design system moderno, Tailwind CSS integration, TypeScript e acessibilidade. Tutorial passo a passo para desenvolvedores frontend.
Aprenda a biblioteca de componentes React mais moderna do mercado. Tutorial completo com 46+ componentes, TypeScript, acessibilidade e integração perfeita com Tailwind CSS. Ideal para desenvolvedores frontend que querem criar interfaces profissionais.
Você copia o código, não instala dependências. Shadcn/UI revoluciona React components: zero runtime, bundle mínimo, customização total.
Material-UI adiciona 300KB+ ao seu bundle. Shadcn/UI? 2KB por componente. Você controla cada linha de código, modifica qualquer comportamento, sem limitações de design system externo.
Você é dono do código. Copie componentes diretamente para seu projeto. Sem black boxes, sem dependências ocultas.
Tecnologias de ponta: Tailwind CSS para styling, Radix UI para acessibilidade, TypeScript para type safety.
Zero runtime overhead. Apenas o CSS e JavaScript que você realmente usa. Bundle size otimizado automaticamente.
Que querem componentes modernos sem vendor lock-in
Buscando design system consistente e customizável
Que precisam de SSR e performance otimizada
Que precisam desenvolver interfaces rapidamente
Apenas 2-5KB por componente. Enquanto Material-UI adiciona 300KB+, Shadcn/UI mantém seu app leve. Exemplo: Button component = 1.2KB vs 45KB do MUI.
Você controla 100% do código. Diferente de Chakra UI ou Ant Design, pode modificar qualquer linha. Exemplo: customizar hover states, animations, responsive breakpoints.
Radix UI como base = acessibilidade nativa. Screen readers, keyboard navigation, ARIA labels automáticos. Exemplo: Modal com focus trap, Dropdown com arrow keys.
Tailwind CSS puro = performance máxima. Sem runtime CSS, sem styled-components overhead. Exemplo: className="bg-blue-500 hover:bg-blue-600" vs styled.div`background: blue`.
Webpack elimina código não usado automaticamente. Import apenas o que precisa. Exemplo: import { Button } from "./ui/button" vs import { Button } from "@mui/material".
Server Components ready. SSR perfeito, hydration otimizada. Exemplo: componentes renderizam no servidor, JavaScript mínimo no cliente.
Setup completo em 3 minutos. Guia definitivo para instalar Shadcn/UI em Next.js, Vite, Remix e outros frameworks React.
Diferente de outras UI libraries, Shadcn/UI não é um pacote NPM tradicional. Você instala uma CLI que copia componentes diretamente para seu projeto, garantindo controle total e zero dependências externas.
# Projeto Next.js com todas as configurações otimizadas
npx create-next-app@latest meu-projeto-shadcn \
--typescript \
--tailwind \
--eslint \
--app \
--src-dir \
--import-alias "@/*"
cd meu-projeto-shadcn
# Instala e configura Shadcn/UI automaticamente
npx shadcn-ui@latest init
# Responda as perguntas de 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
# Componentes mais usados (instale todos de uma vez)
npx shadcn-ui@latest add button input card dialog
# Ou instale individualmente conforme necessário:
npx shadcn-ui@latest add button
npx shadcn-ui@latest add input
npx shadcn-ui@latest add card
npx shadcn-ui@latest add dialog
Biblioteca completa de UI components para React. Cada componente é otimizado para performance, acessibilidade e customização total.
Diferente de Material-UI ou Ant Design, você não está limitado ao design system deles. Cada componente Shadcn/UI pode ser 100% customizado, desde cores até animações e comportamentos.
9 variantes diferentes: default, destructive, outline, secondary, ghost, link. Suporte a loading states, icons, e tamanhos responsivos.
Integração com React Hook Form + Zod. Validação automática, error handling, e TypeScript safety. Suporte a nested objects e arrays.
Modal acessível com Radix UI. Focus trap automático, ESC para fechar, backdrop click, e suporte a nested dialogs. WCAG 2.1 compliant.
Tabela completa com TanStack Table. Sorting, filtering, pagination, row selection, e column resizing. Performance otimizada para 10k+ rows.
Notificações elegantes e acessíveis. Auto-dismiss, action buttons, diferentes tipos (success, error, warning), e queue management.
Command palette como VS Code. Search, keyboard navigation, grupos, e actions customizáveis. Perfeito para dashboards e admin panels.
Button, Input, Label, Textarea, Badge, Avatar, Separator
Form, Select, Checkbox, Radio, Switch, Slider, Calendar
Card, Sheet, Tabs, Accordion, Collapsible, Aspect Ratio
Data Table, Command, Combobox, Date Picker, Charts
Código de produção real. Copie, cole, customize. Zero configuração adicional.
Tutoriais que funcionam de verdade. Cada exemplo roda em produção. Validação real, TypeScript, acessibilidade. Sem "hello world" inútil.
Exemplo real: Formulário de login com validação, loading states, e error handling usando Form + Input + Button.
import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import * as z from "zod" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" const formSchema = z.object({ email: z.string().email("Email inválido"), password: z.string().min(6, "Mínimo 6 caracteres") }) export function LoginForm() { const form = useForm<z.infer<typeof formSchema>>({ resolver: zodResolver(formSchema) }) const onSubmit = async (values: z.infer<typeof formSchema>) => { // Lógica de login aqui } return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4"> <FormField control={form.control} name="email" render={({ field }) => ( <FormItem> <FormLabel>Email</FormLabel> <FormControl> <Input placeholder="seu@email.com" {...field} /> </FormControl> <FormMessage /> </FormItem> )} /> <FormField control={form.control} name="password" render={({ field }) => ( <FormItem> <FormLabel>Senha</FormLabel> <FormControl> <Input type="password" {...field} /> </FormControl> <FormMessage /> </FormItem> )} /> <Button type="submit" className="w-full" disabled={form.formState.isSubmitting}> {form.formState.isSubmitting ? "Entrando..." : "Entrar"} </Button> </form> </Form> ) }
Controle total sobre design e comportamento. Diferente de outras UI libraries, você pode modificar 100% do código dos componentes.
Vendor lock-in é um problema real. Com Shadcn/UI, você nunca fica preso a decisões de design de terceiros. Cada linha de código está no seu projeto e pode ser modificada.
Apenas CSS Variables. Mude todo seu app alterando 5 linhas de código. Zero JavaScript.
:root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; }
Valores HSL são mais fáceis de ajustar. Mude apenas o matiz (H) para criar variações de cor mantendo saturação (S) e luminosidade (L).
Shadcn/UI tem suporte nativo ao dark mode. Use a classe `.dark` no elemento raiz para ativar o tema escuro.
// app/layout.tsx import { ThemeProvider } from 'next-themes' export default function RootLayout({ children }) { return ( <html lang="en" suppressHydrationWarning> <body> <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange > {children} </ThemeProvider> </body> </html> ) }
import { useTheme } from 'next-themes' import { Button } from '@/components/ui/button' import { Moon, Sun } from 'lucide-react' export function ThemeToggle() { const { theme, setTheme } = useTheme() return ( <Button variant="outline" size="icon" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} > <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> </Button> ) }
Modifique as CSS variables na classe `.dark` para personalizar cores do tema escuro.
Bundle 90% menor que Material-UI. Zero runtime CSS. Tree shaking real.
Performance mata conversão. 100ms de delay = 1% menos vendas. Shadcn/UI carrega em 0.8s vs 3.2s do Material-UI. Seus usuários ficam, não saem.
// ✅ Só o que você usa import { Button } from '@/components/ui/button' // ❌ Tudo vem junto import * as UI from '@material-ui/core'
const Dialog = lazy(() => import('@/components/ui/dialog')) const DataTable = lazy(() => import('@/components/ui/data-table'))