手动安装 - shadcn-solid 组件库

文档

手动安装

手动向你的项目中添加依赖项。

手动

CSS 框架

组件使用 Tailwind CSS 和 Uno CSS 进行样式化。你需要在你的项目中安装 Tailwind CSS 或 Uno CSS。

按照 Tailwind 或 Uno 的安装说明开始。

添加依赖项

如果你正在使用 tailwind，请将以下依赖项添加到你的项目中

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

或 uno

npm install unocss-preset-animations class-variance-authority clsx tailwind-merge

路径别名

我使用 @ 别名来更容易地导入你的组件。这是你可以如何配置它

tsconfig.json

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

app.config.ts

import { defineConfig } from "@solidjs/start/config";
import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";
 
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
 
export default defineConfig({
  vite: {
    resolve: {
      alias: {
        "@": resolve(__dirname, "./src")
      }
    }
  }
});

如果你更喜欢使用除 @ 之外的其他别名，你需要添加组件时更新 import 语句。

配置 config

这是此项目的 tailwind.config.cjs 文件看起来的样子

tailwind.config.cjs

const { fontFamily } = require("tailwindcss/defaultTheme");
 
/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ["class", '[data-kb-theme="dark"]'],
  content: [
    "src/routes/**/*.{ts,tsx,mdx}",
    "src/components/**/*.{ts,tsx}",
    "src/registry/**/*.{ts,tsx}"
  ],
  theme: {
    extend: {
      container: {
        center: true,
        padding: "2rem",
        screens: {
          "2xl": "1400px"
        }
      },
      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: ["Inter Variable", ...fontFamily.sans]
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--kb-accordion-content-height)" }
        },
        "accordion-up": {
          from: { height: "var(--kb-accordion-content-height)" },
          to: { height: 0 }
        },
        "collapsible-down": {
          from: { height: 0 },
          to: { height: "var(--kb-collapsible-content-height)" }
        },
        "collapsible-up": {
          from: { height: "var(--kb-collapsible-content-height)" },
          to: { height: 0 }
        }
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "collapsible-down": "collapsible-down 0.2s ease-out",
        "collapsible-up": "collapsible-up 0.2s ease-out"
      }
    }
  },
  plugins: [require("tailwindcss-animate")]
};

或 uno.config.ts

uno.config.ts

import { defineConfig, presetUno, transformerDirectives, transformerVariantGroup } from "unocss";
import presetAnimations from "unocss-preset-animations";
 
export default defineConfig({
  presets: [
    presetUno({
      dark: {
        dark: '[data-kb-theme="dark"]',
        light: '[data-kb-theme="light"]'
      }
    }),
    presetAnimations()
  ],
  transformers: [transformerVariantGroup(), transformerDirectives()],
  theme: {
    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)"
    },
    animation: {
      keyframes: {
        "accordion-down":
          "{ from { height: 0 } to { height: var(--kb-accordion-content-height) } }",
        "accordion-up": "{ from { height: var(--kb-accordion-content-height) } to { height: 0 } }",
        "collapsible-down":
          "{ from { height: 0 } to { height: var(--kb-collapsible-content-height) } }",
        "collapsible-up":
          "{ from { height: var(--kb-collapsible-content-height) } to { height: 0 } }"
      },
      timingFns: {
        "accordion-down": "ease-out",
        "accordion-up": "ease-out",
        "collapsible-down": "ease-out",
        "collapsible-up": "ease-out"
      },
      durations: {
        "accordion-down": "0.2s",
        "accordion-up": "0.2s",
        "collapsible-down": "0.2s",
        "collapsible-up": "0.2s"
      }
    }
  }
});

配置样式

将以下内容添加到你的 src/app.css 文件中。你可以在主题化部分了解有关使用 CSS 变量进行主题化的更多信息。

src/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
 
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
 
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
 
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
 
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
 
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
 
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
 
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
 
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
 
    --radius: 0.5rem;
  }
 
  [data-kb-theme="dark"] {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
 
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
 
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
 
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
 
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
 
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
 
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
 
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
 
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }
}
 
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

如果你正在使用 uno

src/app.css

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
 
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;
 
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.9%;
 
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
 
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;
 
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
 
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;
 
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
 
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
 
  --radius: 0.5rem;
}
 
[data-kb-theme="dark"] {
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;
 
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
 
  --popover: 0 0% 3.9%;
  --popover-foreground: 0 0% 98%;
 
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
 
  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;
 
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
 
  --accent: 0 0% 14.9%;
  --accent-foreground: 0 0% 98%;
 
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
 
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 0% 83.1%;
}
 
* {
  @apply border-border;
}
body {
  @apply bg-background text-foreground;
}

添加一个 cn 助手函数

我使用 cn 助手函数来更容易地有条件地添加 Tailwind CSS 类。这是我如何在 src/libs/cn.ts 中定义它

src/libs/cn.ts

import type { ClassValue } from "clsx";
import clsx from "clsx";
import { twMerge } from "tailwind-merge";
 
export const cn = (...classLists: ClassValue[]) => twMerge(clsx(classLists));

就这样

你现在可以开始向你的项目添加组件了。

npx shadcn-solid@latest add button

上面的命令会将 Button 组件添加到你的项目中。然后你可以像这样导入它

import { Button } from "@/components/ui/button"
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}