Si es desarrollador web, es probable que haya oído hablar de shadcn/ui, una de las bibliotecas de componentes más populares basadas en Radix UI. En esta publicación exploraremos cómo agregar shadcn a un proyecto existente.

Dependiendo de cómo esté configurado su proyecto y qué marco esté utilizando, agregar shadcn a su proyecto existente variará. Cuando se utiliza shadcn Se recomienda Typecript cuando se utiliza esta biblioteca. Sin embargo, la versión JavaScript también está disponible.

Para agregar shadcn a tu proyecto primero tendrás que instalar Tailwind CSS si tu proyecto no lo utiliza, ya que los componentes de shadcn tienen estilo con él.

Para configurar Tailwind CSS, siga las instrucciones de instalación de su sitio web.

Shadcn y marcos

Si estás usando Next.js, Vite, Remix, Astro o Laravel, ejecuta shadcn-ui para configurar tu proyecto con este comando:

npx shadcn-ui@latest init

Tendrás que responder un par de preguntas para finalizar la configuración dependiendo de tu proyecto, como elegir Typecript o Javascript, cualquiera que sea el que utilice tu proyecto.

Después podrás instalar cualquier componente de shadcn que desees, por ejemplo, agregar el botón:

npx shadcn-ui@latest add button

Luego simplemente impórtalo desde componentes/ui para usarlo en tu proyecto.

Instalación manual de Shadcn

Para instalar shadcn manualmente, por ejemplo, en un proyecto de React nuevamente, asegúrese de que Tailwind CSS esté instalado correctamente.

Luego agregue dependencias:

npm install tailwindcss-animate class-variance-authority clsx tailwind-merge

Agregar biblioteca de iconos:

npm install lucide-react

Configurar alias de ruta:

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Configurar tailwind.config.js

const { fontFamily } = require("tailwindcss/defaultTheme")

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: `var(--radius)`,
        md: `calc(var(--radius) - 2px)`,
        sm: "calc(var(--radius) - 4px)",
      },
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

Actualice el archivo globals.css con lo siguiente:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

    --border: 216 34% 17%;
    --input: 216 34% 17%;

    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;

    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

    --ring: 216 34% 17%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

Finalmente agrega cn helper a tu lib/utils.ts

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Luego simplemente instale el componente deseado desde aquí y siga las instrucciones para cada componente.

Eso es todo, uso shadcn en casi todos mis proyectos web ahora, se ha vuelto muy popular debido a lo fácil que es de usar y personalizar, mira cómo creé un componente shadcn-date-picker personalizado a partir del componente Select and Scrollarea aquí.

Avísame si tuviste algún problema al agregar esta biblioteca a tu proyecto.

Conectémonos en x.com