# shadcn/ui

> 在 shadcn/ui 项目中添加 React 颜色选择器，匹配它的 Tailwind 主题令牌，或把 ChromaPanel 放进应用已有的弹出层。

Source: https://chroma-panel.jscrate.dev/zh/react/integrations/shadcn-ui
Last updated: 2026-09-21

chroma-panel 可以与 shadcn/ui 并用，不需要 Provider 或适配器。想最快上手，就用 `ColorInput`。如果希望由 shadcn/ui 的弹出层、对话框、侧边抽屉或表单来管理外围 UI，就用 `ChromaPanel`。

## 安装

```bash
npm install chroma-panel
```

这个包不依赖 shadcn/ui、Radix UI 或 Base UI，不会在你的应用里再多装一份这些库。

## 使用内置弹出层

`ColorInput` 已经处理好了触发器、定位、焦点、移动端底部面板和隐藏的表单值。

```tsx
"use client";

import { useState } from "react";
import { ColorInput } from "chroma-panel";

export function BrandColorField() {
  const [color, setColor] = useState("#2563eb");

  return (
    <ColorInput
      value={color}
      onChange={(next) => setColor(next.hex)}
      classNames={{
        trigger:
          "h-9 w-12 rounded-md border border-input bg-background shadow-xs",
      }}
      aria-label="Brand color"
    />
  );
}
```

触发器可以通过 `classNames.trigger` 接收 Tailwind 类名。面板的各个部分也是同样的用法，见[使用 Tailwind 样式](https://chroma-panel.jscrate.dev/zh/react/handbook/tailwind)。

## 匹配 shadcn/ui 主题

把面板变量映射到 shadcn/ui 主题中已经定义好的令牌上。这样浅色模式、深色模式、边框和焦点环都能保持一致。

```css
.cp-root {
  --cp-surface: var(--popover);
  --cp-surface-raised: var(--muted);
  --cp-border: var(--border);
  --cp-text: var(--popover-foreground);
  --cp-text-muted: var(--muted-foreground);
  --cp-accent: var(--primary);
  --cp-focus: var(--ring);
  --cp-radius-lg: var(--radius);
}
```

如果你的主题值使用 OKLCH，可以原样传入。所有 `--cp-*` 变量都列在[主题指南](https://chroma-panel.jscrate.dev/zh/react/handbook/theming)中。

## 使用 shadcn/ui 的弹出层或对话框

不要把 `ColorInput` 放进另一个弹出层，否则会出现两个浮层和两个焦点管理器。请改为把内联的 `ChromaPanel` 放进 shadcn/ui 的 `PopoverContent`、`DialogContent` 或 `SheetContent` 中。

```tsx
import { ChromaPanel } from "chroma-panel";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Choose color</Button>
  </PopoverTrigger>
  <PopoverContent className="w-auto border-0 bg-transparent p-0 shadow-none">
    <ChromaPanel defaultValue="#2563eb" />
  </PopoverContent>
</Popover>;
```

shadcn/ui 可以配置为使用不同的底层组件库。如果你生成的 `PopoverTrigger` 使用 `render` 而不是 `asChild`，组合方式保持不变，按本地 `popover.tsx` 文件中的 API 来写即可。

在模态框或侧边抽屉中，内联面板通常更简单。焦点和 Escape 键的行为见[模态框中的选择器](https://chroma-panel.jscrate.dev/zh/react/recipes/in-a-modal)。