shadcn/ui: guía Completa del Ecosistema
guía práctica de shadcn/ui para Next.js. Instalación, componentes esenciales, personalización de temas y patrones para construir UI profesional con Tailwind CSS.
shadcn/ui: guía Completa del Ecosistema
shadcn/ui fue la librería de UI #1 en 2025 según JavaScript Rising Stars. Y no es casualidad: en vez de instalar un paquete que no puedes modificar, copias los componentes directamente a tu proyecto. Son tuyos, los cambias como quieras.
Por debajo usa Radix UI para la lógica de accesibilidad y Tailwind CSS para los estilos. Tu solo ves componentes limpios, accesibles y listos para personalizar.
Instalación
npx shadcn@latest initTe hace unas preguntas sobre tu proyecto (TypeScript, alias de imports, directorio de componentes) y configura todo. después, agregas componentes uno por uno:
npx shadcn@latest add button
npx shadcn@latest add input
npx shadcn@latest add dialogCada comando crea un archivo en components/ui/ que puedes abrir y modificar. No hay magia, no hay build step extra.
Componentes esenciales
Estos son los que vas a usar en practicamente cualquier proyecto:
Button
import { Button } from "@/components/ui/button";
// Variantes incluidas
<Button>Default</Button>
<Button variant="destructive">Eliminar</Button>
<Button variant="outline">Cancelar</Button>
<Button variant="ghost">Opción sutil</Button>
<Button size="sm">pequeño</Button>
<Button disabled>Deshabilitado</Button>Input + Label
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="tu@ejemplo.com" />
</div>Dialog (modal)
import {
Dialog, DialogContent, DialogDescription,
DialogHeader, DialogTitle, DialogTrigger,
} from "@/components/ui/dialog";
<Dialog>
<DialogTrigger asChild>
<Button>Abrir modal</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Confirmar acción</DialogTitle>
<DialogDescription>
Esta acción no se puede deshacer.
</DialogDescription>
</DialogHeader>
{/* Tu contenido aquí */}
</DialogContent>
</Dialog>Todos los componentes de shadcn/ui son accesibles por default: manejo de focus, navegación con teclado, atributos ARIA correctos. Radix UI se encarga de eso.
Personalizar el tema
shadcn/ui usa CSS variables para los colores. Las encuentras en tu globals.css:
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--destructive: 0 84.2% 60.2%;
/* ... más variables */
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
/* ... */
}Para cambiar el color primario de toda tu app, solo modificas una variable. Todos los componentes que usan bg-primary o text-primary se actualizan automáticamente.
Si quieres un tema custom rápido, ui.shadcn.com/themes tiene un generador visual donde eliges colores y copias el CSS.
Formularios con React Hook Form
shadcn/ui incluye componentes de formulario que se integran con React Hook Form:
npx shadcn@latest add form"use client";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { 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 schema = z.object({
nombre: z.string().min(2, "mínimo 2 caracteres"),
email: z.string().email("Email invalido"),
});
export default function ContactForm() {
const form = useForm<z.infer<typeof schema>>({
resolver: zodResolver(schema),
});
return (
<Form {...form}>
<form onSubmit={form.handleSubmit((data) => console.log(data))}>
<FormField
control={form.control}
name="nombre"
render={({ field }) => (
<FormItem>
<FormLabel>Nombre</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Enviar</Button>
</form>
</Form>
);
}Si quieres más sobre formularios con Zod, tenemos la guía de validación con React Hook Form y Zod y la guía de formularios dinámicos.
Componentes útiles que no son obvios
Algunos componentes de shadcn/ui que la gente no descubre hasta después:
| Componente | Para que | Comando |
|---|---|---|
Command | Paleta de comandos tipo Cmd+K | npx shadcn@latest add command |
Sonner | Toasts/notificaciones elegantes | npx shadcn@latest add sonner |
Skeleton | Loading states tipo pulse | npx shadcn@latest add skeleton |
Sheet | Panel lateral (mobile nav, filtros) | npx shadcn@latest add sheet |
Tabs | Navegación por pestanas | npx shadcn@latest add tabs |
DataTable | Tabla con sort, filter, paginación | guía en ui.shadcn.com/docs/components/data-table |
Siguiente paso
shadcn/ui te resuelve la UI. Para el tema oscuro y los estilos globales de tu proyecto, Tailwind CSS es tu aliado. Y si necesitas streaming para que tus componentes no bloqueen la carga, la guía de Streaming y Suspense en Next.js cubre los patrones clave.
Preguntas frecuentes
¿Qué es shadcn/ui?
No es una librería de componentes tradicional. Es una colección de componentes que copias directamente a tu proyecto. Los archivos viven en tu código, puedes modificarlos como quieras, y no tienes una dependencia externa que actualizar.
¿Shadcn/ui o Material UI para Next.js?
shadcn/ui si usas Tailwind CSS y quieres control total sobre los componentes. Material UI si necesitas un design system completo con theming avanzado y no te importa el bundle size extra. Para proyectos nuevos con Next.js, shadcn/ui es la opción más popular en 2026.
¿Puedo personalizar los estilos de shadcn/ui?
Si, completamente. Los componentes viven en tu proyecto como archivos normales. Puedes modificar colores, spacing, bordes, animaciones -- lo que necesites. No hay CSS encapsulado ni clases propietarias que pelear.
¿Shadcn/ui funciona con Tailwind CSS 4?
Si. shadcn/ui usa CSS variables para los colores y Tailwind utility classes para el layout. Es compatible con Tailwind v3 y v4.
Articulos relacionados
Next.js 16: guía de Migración y Novedades
Migra tu proyecto de Next.js 15 a 16. Novedades principales, breaking changes, y pasos para actualizar sin romper tu app.
Testing en Next.js con Vitest y Playwright
Configura testing en tu proyecto Next.js. Unit tests con Vitest, E2E con Playwright, y como integrarlos en tu pipeline de CI/CD.
Tailwind CSS 4: Migración desde v3
Migra tu proyecto de Tailwind CSS 3 a 4. Cambios principales, nuevo sistema de configuración, CSS-first config y como actualizar sin romper tu app.