Si vous êtes un développeur Web, il y a de fortes chances que vous ayez entendu parler de shadcn/ui, l'une des bibliothèques de composants les plus populaires basées sur Radix UI. Dans cet article, nous explorerons comment ajouter shadcn à un projet existant.

En fonction de la configuration de votre projet et du framework que vous utilisez, l'ajout de shadcn à votre projet existant variera. Lors de l'utilisation de shadcn, Typescript est recommandé lors de l'utilisation de cette bibliothèque. Néanmoins, une version JavaScript est également disponible.

Pour ajouter shadcn à votre projet, vous devrez d'abord installer Tailwind CSS si votre projet ne l'utilise pas, car les composants shadcn sont stylisés avec lui.

Pour configurer Tailwind CSS, suivez les instructions d'installation sur leur site Web.

Shadcn et cadres

Si vous utilisez Next.js, Vite, Remix, Astro ou Laravel, exécutez shadcn-ui pour configurer votre projet avec cette commande :

npx shadcn-ui@latest init

Vous devrez répondre à quelques questions pour terminer la configuration en fonction de votre projet, comme choisir Typescript ou Javascript, quel que soit votre projet utilisé.

Ensuite, vous pourrez installer n'importe quel composant shadcn de votre choix, par exemple pour ajouter un bouton :

npx shadcn-ui@latest add button

Ensuite, importez-le simplement depuis composants/interface utilisateur pour l'utiliser dans votre projet.

Installation manuelle de Shadcn

Pour installer shadcn manuellement, par exemple dans un projet React, assurez-vous que Tailwind CSS est correctement installé.

Puis ajoutez des dépendances :

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

Ajouter une bibliothèque d'icônes :

npm install lucide-react

Configurer les alias de chemin :

tsconfig.json

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

Configurer 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")],
}

Mettez à jour le fichier globals.css avec ce qui suit :

@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;
  }
}

Enfin, ajoutez cn helper à votre lib/utils.ts

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

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

Ensuite, installez simplement le composant souhaité à partir d'ici et suivez les instructions pour chaque composant.

C'est tout, j'utilise shadcn dans presque tous mes projets Web maintenant, il est devenu très populaire en raison de sa facilité d'utilisation et de personnalisation, découvrez comment j'ai créé un composant shadcn-date-picker personnalisé à partir des composants Select et Scrollarea ici.

Faites-moi savoir si vous avez rencontré des problèmes lors de l'ajout de cette bibliothèque à votre projet.

Connectons-nous sur x.com