Maison > interface Web > js tutoriel > le corps du texte

Comment ajouter shadcn au projet existant

WBOY
Libérer: 2024-08-09 08:52:22
original
1142 Les gens l'ont consulté

How to add shadcn to existing project

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.

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

Copier après la connexion

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

Copier après la connexion

Ensuite, importez-le simplement depuis composants/ui 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

Copier après la connexion

Ajouter une bibliothèque d'icônes :

npm install lucide-react

Copier après la connexion

Configurer les alias de chemin :

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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))
}
Copier après la connexion

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 pour ajouter cette bibliothèque à votre projet.

Connectons-nous sur x.com

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal