组件实验室

设置

主题设置

UI Lab 组件使用 shadcn 语义化令牌 (bg-primary, text-muted-foreground, border、ring 等）来设置自身样式。只需配置一次这些令牌，所有组件即可正常工作。 有两种方式：

方式一 — shadcn init（推荐）

如果你的项目已经使用 shadcn，那么这些令牌已经存在。否则运行一次 init 命令，它会将令牌层写入你的 CSS 中。

Shellterminal
npx shadcn@latest init

方式二 — 粘贴主题 CSS

没有使用 shadcn？将以下内容粘贴到你的 globals.css 中，紧跟在 @import "tailwindcss"; 之后即可。它定义了组件所使用的令牌、动效动画和表面（surface）工具类。 需要 Tailwind CSS v4。

也可以在 /theme.css中获取。

CSSglobals.css
@custom-variant dark (&:where(.dark, .dark *));

:root {
    /* Base palette */
    --background: oklch(97.8% 0.0015 250);
    --foreground: oklch(15% 0 0);
    --card: oklch(95.2% 0.002 250);
    --muted-foreground: oklch(50% 0 0);
    --border: oklch(15% 0 0 / 0.09);
    /* UI Lab extensions */
    --border-strong: oklch(15% 0 0 / 0.15);
    --accent-fg: oklch(15% 0 0);
    --neon: oklch(80% 0.22 145);
    --violet: oklch(68% 0.22 295);
    --danger: oklch(62% 0.22 25);
    --success: oklch(70% 0.18 155);
    --warning: oklch(78% 0.18 75);
    --glass-bg: oklch(99% 0 0 / 0.55);
    --glass-border: oklch(15% 0 0 / 0.08);
    --glass-strong-bg: rgb(255 255 255 / 0.7);
    --glass-thin-bg: rgb(255 255 255 / 0.45);
    /* shadcn semantic tokens */
    --card-foreground: var(--foreground);
    --popover: var(--card);
    --popover-foreground: var(--foreground);
    --primary: var(--foreground);
    --primary-foreground: var(--background);
    --secondary: var(--card);
    --secondary-foreground: var(--foreground);
    --muted: var(--card);
    --accent: oklch(72% 0.18 195);
    --accent-foreground: var(--accent-fg);
    --destructive: var(--danger);
    --input: var(--border);
    --ring: var(--border-strong);
}

.dark {
    --background: #151515;
    --foreground: oklch(96% 0 0);
    --card: #1c1c1c;
    --muted-foreground: oklch(62% 0 0);
    --border: rgb(255 255 255 / 0.05);
    --border-strong: rgb(255 255 255 / 0.1);
    --accent: oklch(80% 0.18 195);
    --accent-fg: #151515;
    --glass-bg: rgb(28 28 28 / 0.55);
    --glass-border: rgb(255 255 255 / 0.08);
    --glass-strong-bg: rgb(28 28 28 / 0.6);
    --glass-thin-bg: rgb(21 21 21 / 0.45);
}

@theme inline {
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

    --color-border: var(--border);
    --color-border-strong: var(--border-strong);
    --color-neon: var(--neon);
    --color-violet: var(--violet);
    --color-success: var(--success);
    --color-warning: var(--warning);
    --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-input: var(--input);
    --color-ring: var(--ring);
}

@theme {
    --animate-marquee: marquee 30s linear infinite;
    --animate-marquee-vertical: marquee-vertical 30s linear infinite;
    --animate-shimmer: shimmer 2.5s linear infinite;

    @keyframes marquee {
        from { transform: translateX(0); }
        to { transform: translateX(calc(-100% - var(--gap, 1rem))); }
    }
    @keyframes marquee-vertical {
        from { transform: translateY(0); }
        to { transform: translateY(calc(-100% - var(--gap, 1rem))); }
    }
    @keyframes shimmer {
        from { background-position: 200% 0; }
        to { background-position: -200% 0; }
    }
}

@layer utilities {
    .scrollbar-hide::-webkit-scrollbar { display: none; }
    .scrollbar-hide { scrollbar-width: none; }

    .mask-radial-fade {
        mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
    }
    .mask-b-fade {
        mask-image: linear-gradient(to bottom, black 60%, transparent);
    }

    .glass {
        background: var(--glass-bg);
        backdrop-filter: blur(20px) saturate(160%);
        border: 1px solid var(--glass-border);
        box-shadow:
            0 1px 0 0 rgb(255 255 255 / 0.06) inset,
            0 24px 60px -24px rgb(0 0 0 / 0.45);
    }
    .glass-strong {
        background: var(--glass-strong-bg);
        backdrop-filter: blur(16px);
    }
    .glass-thin {
        background: var(--glass-thin-bg);
        backdrop-filter: blur(12px);
        border: 1px solid var(--glass-border);
    }
}