Wenn Sie ein Webentwickler sind, haben Sie wahrscheinlich schon von shadcn/ui gehört, einer der beliebtesten Komponentenbibliotheken basierend auf der Radix-Benutzeroberfläche. 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. Dennoch ist 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 einige 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, um beispielsweise 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 Abhängigkeiten hinzufügen:

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 mit Folgendem:

@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 den 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 mittlerweile 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