So fügen Sie shadcn zu einem bestehenden Projekt hinzu

Wenn Sie ein Webentwickler sind, haben Sie wahrscheinlich schon von shadcn/ui gehört, einer der beliebtesten Komponentenbibliotheken basierend auf Radix UI. In diesem Beitrag erfahren Sie, wie Sie shadcn zu einem bestehenden Projekt hinzufügen.

Je nachdem, wie Ihr Projekt eingerichtet ist und welches Framework Sie verwenden, variiert das Hinzufügen von shadcn zu Ihrem bestehenden Projekt. Bei Verwendung dieser Bibliothek wird shadcn Typescript empfohlen. Es ist jedoch auch eine JavaScript-Version verfügbar.

Um shadcn zu Ihrem Projekt hinzuzufügen, müssen Sie zunächst Tailwind CSS installieren, wenn Ihr Projekt es nicht verwendet, da shadcn-Komponenten damit gestaltet werden.

Um Tailwind CSS einzurichten, befolgen Sie die Installationsanweisungen auf der Website.

Schatten und Frameworks

Wenn Sie Next.js, Vite, Remix, Astro oder Laravel verwenden, führen Sie shadcn-ui aus, um Ihr Projekt mit diesem Befehl einzurichten:

npx shadcn-ui@latest init

Sie müssen je nach Projekt ein paar Fragen beantworten, um die Einrichtung abzuschließen, z. B. die Auswahl von Typescript oder Javascript, je nachdem, was Ihr Projekt verwendet.

Anschließend können Sie jede gewünschte Shadcn-Komponente installieren, beispielsweise um die Schaltfläche hinzuzufügen:

npx shadcn-ui@latest add button

Dann importieren Sie es einfach aus Components/UI, um es in Ihrem Projekt zu verwenden.

Manuelle Shadcn-Installation

Um shadcn erneut manuell zu installieren, beispielsweise in einem React-Projekt, stellen Sie sicher, dass Tailwind CSS korrekt installiert ist.

Dann fügen Sie Abhängigkeiten hinzu:

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

Symbolbibliothek hinzufügen:

npm install lucide-react

Pfadaliase konfigurieren:

tsconfig.json

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

Tailwind.config.js konfigurieren

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

Aktualisieren Sie die Datei globals.css wie folgt:

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

Fügen Sie schließlich cn helper zu Ihrer lib/utils.ts hinzu

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

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

Dann installieren Sie einfach die gewünschte Komponente von hier aus und befolgen Sie die Anweisungen für jede Komponente.

Das ist alles, ich verwende shadcn inzwischen in fast allen meinen Webprojekten. Es ist aufgrund seiner einfachen Verwendung und Anpassung sehr beliebt geworden. Schauen Sie sich an, wie ich aus der Select- und Scrollarea-Komponente eine benutzerdefinierte shadcn-date-picker-Komponente erstellt habe hier.

Lassen Sie mich wissen, wenn Sie Probleme beim Hinzufügen dieser Bibliothek zu Ihrem Projekt hatten.

Vernetzen wir uns auf x.com

Das obige ist der detaillierte Inhalt vonSo fügen Sie shadcn zu einem bestehenden Projekt hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!