Bagaimana untuk menambah shadcn pada projek sedia ada

Jika anda seorang pembangun web, kemungkinan besar anda mendengar tentang shadcn/ui, salah satu perpustakaan komponen paling popular berdasarkan UI Radix. Dalam siaran ini, kami akan meneroka cara menambah shadcn pada projek sedia ada.

Bergantung pada cara projek anda disediakan dan rangka kerja yang anda gunakan, penambahan shadcn pada projek sedia ada anda akan berbeza-beza. Apabila menggunakan Shadcn Typescript disyorkan apabila menggunakan perpustakaan ini. Namun begitu, versi JavaScript juga tersedia.

Untuk menambah shadcn pada projek anda terlebih dahulu, anda perlu memasang Tailwind CSS jika projek anda tidak menggunakannya, kerana komponen shadcn digayakan dengannya.

Untuk menyediakan Tailwind CSS ikut arahan pemasangan daripada tapak web mereka.

Shadcn dan Rangka Kerja

Jika anda menggunakan Next.js, Vite, Remix, Astro atau Laravel, jalankan shadcn-ui untuk menyediakan projek anda dengan arahan ini:

npx shadcn-ui@latest init

Anda perlu menjawab beberapa soalan untuk menyelesaikan persediaan bergantung pada projek anda, seperti memilih Typescript atau Javascript, apa sahaja projek yang anda gunakan.

Selepas itu anda akan dapat memasang mana-mana komponen shadcn yang anda mahu, contohnya untuk menambah butang:

npx shadcn-ui@latest add button

Kemudian hanya importnya daripada komponen/ui untuk menggunakannya dalam projek anda.

Pemasangan Manual Shadcn

Untuk memasang shadcn secara manual contohnya dalam projek React sekali lagi pastikan Tailwind CSS dipasang dengan betul.

Kemudian tambah kebergantungan:

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

Tambah pustaka ikon:

npm install lucide-react

Konfigurasikan alias laluan:

tsconfig.json

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

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

Kemas kini fail globals.css dengan yang berikut:

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

Akhir sekali tambahkan pembantu cn pada lib/utils.ts anda

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

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

Kemudian hanya pasang komponen yang dikehendaki dari sini dan ikut arahan untuk setiap komponen.

Itu sahaja, saya menggunakan shadcn dalam hampir semua projek web saya sekarang, ia telah menjadi sangat popular kerana betapa mudahnya untuk digunakan dan disesuaikan, lihat bagaimana saya mencipta komponen shadcn-tarikh-pemilih tersuai daripada komponen Select dan Scrollarea di sini.

Beri tahu saya jika anda menghadapi sebarang masalah menambahkan pustaka ini pada projek anda.

Jom berhubung di x.com

Atas ialah kandungan terperinci Bagaimana untuk menambah shadcn pada projek sedia ada. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!