安装

如何在你的应用中安装 Inspira UI。

本指南将帮助你在 Vue 或 Nuxt 应用中安装并配置 Inspira UI 组件。

如果你正在使用 Tailwind CSS v3，请在这里查看 Inspira UI v1。

开始使用 Inspira UI

配置 `tailwindcss`

首先，请按照此指南安装 tailwindcss。

添加依赖

安装以下所需的辅助库。

npm install @vueuse/core motion-v tw-animate-css @inspira-ui/plugins

pnpm install @vueuse/core motion-v tw-animate-css @inspira-ui/plugins

bun add @vueuse/core motion-v tw-animate-css @inspira-ui/plugins

yarn add @vueuse/core motion-v tw-animate-css @inspira-ui/plugins

请参考此指南，在 Vue 或 Nuxt 中配置 motion-v。

更新你的 `main.css` 文件

如果你正在使用 shadcn-vue 或，可以跳过此步骤

将以下代码添加到你的 main.css 文件中，用于配置组件所需的变量：

main.css

@import "tailwindcss";
@import "@nuxt/ui";

@theme static {
  --color-background: var(--ui-bg);
  --color-foreground: var(--ui-text);

  --color-card: var(--ui-bg-elevated);
  --color-card-foreground: var(--ui-text);

  --color-popover: var(--ui-bg-elevated);
  --color-popover-foreground: var(--ui-text);

  --color-muted: var(--ui-bg-muted);
  --color-muted-foreground: var(--ui-text-muted);

  --color-accent: var(--ui-bg-accented);
  --color-accent-foreground: var(--ui-text);

  --color-border: var(--ui-border);
  --color-input: var(--ui-border);

  --color-primary: var(--ui-primary);
  --color-primary-foreground: var(--ui-text-inverted);

  --color-secondary: var(--ui-secondary);
  --color-secondary-foreground: var(--ui-text-inverted);

  --color-destructive: var(--ui-error);
  --color-destructive-foreground: var(--ui-text-inverted);

  --color-ring: var(--ui-primary);

  --radius: var(--ui-radius);
}

:root {
  --background: var(--ui-bg);
  --foreground: var(--ui-text);

  --card: var(--ui-bg-elevated);
  --card-foreground: var(--ui-text);

  --popover: var(--ui-bg-elevated);
  --popover-foreground: var(--ui-text);

  --muted: var(--ui-bg-muted);
  --muted-foreground: var(--ui-text-muted);

  --accent: var(--ui-bg-accented);
  --accent-foreground: var(--ui-text);

  --border: var(--ui-border);
  --input: var(--ui-border);

  --primary: var(--ui-primary);
  --primary-foreground: var(--ui-text-inverted);

  --secondary: var(--ui-secondary);
  --secondary-foreground: var(--ui-text-inverted);

  --destructive: var(--ui-error);
  --destructive-foreground: var(--ui-text-inverted);

  --ring: var(--ui-primary);
}

main.css

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.141 0.005 285.823);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.141 0.005 285.823);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.274 0.006 286.033);
  --input: oklch(0.274 0.006 286.033);
  --ring: oklch(0.442 0.017 285.786);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

html {
  color-scheme: light dark;
}
html.dark {
  color-scheme: dark;
}
html.light {
  color-scheme: light;
}