Apoya mi contenido:

Crear Componentes Reutilizables con Tailwind y shadcn/ui (Ejemplos)

shadcn/ui es una librería basada en Tailwind CSS y Radix UI que te permite tener control total sobre el código fuente de cada componente. Aquí te mostramos cómo crear y reutilizar componentes visuales modernos con esta herramienta.

¿Qué es shadcn/ui?

Código editable: no dependes de una librería empaquetada, puedes modificar todo.
Base accesible: utiliza Radix UI como base para cumplir estándares WCAG.
Estilizado con Tailwind: diseño consistente, ligero y fácil de personalizar.

Instalación básica

npx shadcn-ui@latest init
npx shadcn-ui@latest add button

Ejemplo 1: Botón animado con Framer Motion


// components/ui/AnimatedButton.tsx
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";

export function AnimatedButton({ label }: { label: string }) {
  return (
    <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} transition={{ duration: 0.2 }}>
      <Button className="bg-primary text-white px-4 py-2 rounded">
        {label}
      </Button>
    </motion.div>
  );
}

Uso:


<AnimatedButton label="Haz clic aquí" />

Ejemplo 2: Componente de Contenedor con variantes


import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const containerVariants = cva("mx-auto", {
  variants: {
    variant: {
      fullMobile: "max-w-7xl sm:px-6 lg:px-8",
      narrow: "max-w-3xl px-4 sm:px-6 lg:px-8",
    },
  },
  defaultVariants: {
    variant: "fullMobile",
  },
});

type ContainerProps = VariantProps<typeof containerVariants> & {
  children: React.ReactNode;
};

export function Container({ variant, children }: ContainerProps) {
  return <div className={cn(containerVariants({ variant }))}>{children}</div>;
}

Uso:


<Container variant="narrow">
  <p>Contenido centrado y limpio</p>
</Container>

Recursos y Componentes Comunitarios

manfromexistence/ui: +80 componentes reutilizables listos para copiar.
awesome-shadcn-ui (GitHub): Galería de componentes creativos de la comunidad.

Conclusión

shadcn/ui ofrece un enfoque moderno, accesible y altamente personalizable para construir sistemas de diseño con Tailwind. Al tener el control del código, puedes iterar rápido, mantener coherencia visual y escalar tu proyecto eficientemente.