React.js
frontend
Tailwind
Shadcn UI
Shadcn UI proporciona una forma única de construir interfaces React. En lugar de instalar un paquete de biblioteca de componentes típico, copias código de componentes accesibles y bellamente diseñados directamente en tu proyecto. Esto te da control total sobre el estilo y el comportamiento.
Aquí hay un ejemplo simple usando el componente Button de Shadcn UI:
Shadcn UI se destaca porque combina:
npx shadcn-ui@latest add button), no se instalan como una dependencia. Esto significa que no hay conflictos de versiones y total libertad para modificar.Diferencias Clave con Bibliotecas Tradicionales:
| Característica | Bibliotecas Tradicionales | Shadcn UI |
|---|---|---|
| Instalación | Dependencia de Paquete | Copiar y pegar código en proyecto |
| Actualizaciones | Gestionar versiones | Actualizar código manualmente (si es necesario) |
| Personalización | A menudo Limitada | Acceso completo al código |
| Propiedad | Dependencia externa | Eres dueño del código del componente |
Shadcn UI ofrece una variedad de componentes. Los añades a tu proyecto según sea necesario usando su herramienta CLI.
Usa Cards para estructurar secciones de contenido:
1import { 2 Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle 3} from "@/components/ui/card"; // Asumiendo ruta por defecto 4import { Button } from "@/components/ui/button"; 5 6function ProfileCard() { 7 return ( 8 <Card className="w-[350px]"> 9 <CardHeader> 10 <CardTitle>Perfil de Usuario</CardTitle> 11 <CardDescription>Ver y gestionar tu información.</CardDescription> 12 </CardHeader> 13 <CardContent> 14 <p>Los detalles sobre el usuario van aquí.</p> 15 </CardContent> 16 <CardFooter className="flex justify-end space-x-2"> 17 <Button variant="outline">Cancelar</Button> 18 <Button>Guardar Cambios</Button> 19 </CardFooter> 20 </Card> 21 ); 22}
Crea diálogos modales accesibles para acciones o información:
1import { 2 Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger 3} from "@/components/ui/dialog"; // Asumiendo ruta por defecto 4import { Button } from "@/components/ui/button"; 5 6function DeleteConfirmation() { 7 return ( 8 <Dialog> 9 <DialogTrigger asChild> 10 <Button variant="destructive">Eliminar Cuenta</Button> 11 </DialogTrigger> 12 <DialogContent> 13 <DialogHeader> 14 <DialogTitle>¿Estás absolutamente seguro?</DialogTitle> 15 <DialogDescription> 16 Esta acción no se puede deshacer. Esto eliminará permanentemente la cuenta. 17 </DialogDescription> 18 </DialogHeader> 19 <DialogFooter> 20 <Button variant="outline">Cancelar</Button> 21 <Button variant="destructive">Confirmar Eliminación</Button> 22 </DialogFooter> 23 </DialogContent> 24 </Dialog> 25 ); 26}
Los componentes de Shadcn UI se integran sin problemas con bibliotecas de formularios como React Hook Form, a menudo usando Zod para la validación.
1import { zodResolver } from "@hookform/resolvers/zod"; 2import { useForm } from "react-hook-form"; 3import * as z from "zod"; 4import { Button } from "@/components/ui/button"; 5import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"; 6import { Input } from "@/components/ui/input"; 7 8// 1. Definir esquema de validación 9const formSchema = z.object({ 10 username: z.string().min(3, "El nombre de usuario debe tener al menos 3 caracteres.").max(50), 11}); 12 13function ProfileForm() { 14 // 2. Inicializar formulario 15 const form = useForm<z.infer<typeof formSchema>>({ 16 resolver: zodResolver(formSchema), 17 defaultValues: { username: "" }, 18 }); 19 20 // 3. Manejar envío 21 function onSubmit(values: z.infer<typeof formSchema>) { 22 console.log("Formulario enviado:", values); 23 // Añadir lógica de envío real aquí 24 } 25 26 // 4. Construir la UI del formulario 27 return ( 28 <Form {...form}> 29 <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 w-[350px]"> 30 <FormField 31 control={form.control} 32 name="username" 33 render={({ field }) => ( 34 <FormItem> 35 <FormLabel>Nombre de Usuario</FormLabel> 36 <FormControl> 37 <Input placeholder="Introduce tu nombre de usuario" {...field} /> 38 </FormControl> 39 <FormMessage /> 40 </FormItem> 41 )} 42 /> 43 <Button type="submit">Actualizar Perfil</Button> 44 </form> 45 </Form> 46 ); 47}
Personaliza la apariencia modificando las variables CSS en tu archivo CSS global (p.ej., globals.css o index.css):
1/* Ejemplo de globals.css */ 2@tailwind base; 3@tailwind components; 4@tailwind utilities; 5 6@layer base { 7 :root { 8 --background: 0 0% 100%; /* Fondo modo claro */ 9 --foreground: 222.2 84% 4.9%; /* Texto modo claro */ 10 /* ... otras variables principales ... */ 11 --primary: 222.2 47.4% 11.2%; 12 --primary-foreground: 210 40% 98%; 13 /* ... más variables para bordes, inputs, anillos etc. ... */ 14 --radius: 0.5rem; /* Radio del borde */ 15 } 16 17 .dark { 18 --background: 222.2 84% 4.9%; /* Fondo modo oscuro */ 19 --foreground: 210 40% 98%; /* Texto modo oscuro */ 20 /* ... sobrescribir otras variables para modo oscuro ... */ 21 --primary: 210 40% 98%; 22 --primary-foreground: 222.2 47.4% 11.2%; 23 /* ... */ 24 } 25}
Como eres dueño del código del componente, puedes editar directamente los archivos (normalmente dentro de un directorio components/ui) para cambiar la estructura, estilos o comportamiento. Por ejemplo, añadiendo una variante personalizada al Button:
1// Dentro de components/ui/button.jsx (ruta de ejemplo) 2import { cva } from "class-variance-authority"; 3 4export const buttonVariants = cva( 5 "inline-flex items-center justify-center ...", // Clases base 6 { 7 variants: { 8 variant: { 9 default: "bg-primary text-primary-foreground hover:bg-primary/90", 10 destructive: "...", 11 outline: "...", 12 secondary: "...", 13 ghost: "...", 14 link: "...", 15 // Añade tu variante personalizada 16 success: "bg-green-600 text-white hover:bg-green-700", 17 }, 18 size: { 19 default: "h-10 px-4 py-2", 20 sm: "h-9 rounded-md px-3", 21 lg: "h-11 rounded-md px-8", 22 icon: "h-10 w-10", 23 }, 24 }, 25 defaultVariants: { 26 variant: "default", 27 size: "default", 28 }, 29 } 30); 31 32// ... resto del componente Button ...
components/ui) separados de los componentes personalizados de tu aplicación.Shadcn UI ofrece un enfoque pragmático para los desarrolladores de React que desean control y personalización sin construir todo desde cero. Al aprovechar Tailwind CSS y Radix UI, proporciona una base para interfaces de usuario hermosas, accesibles y mantenibles directamente dentro de la base de código de tu proyecto.