适用于 shadcn/ui 的 React 颜色选择器

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

安装

npm install chroma-panel

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

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

"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 样式。

匹配 shadcn/ui 主题

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

.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-* 变量都列在主题指南中。

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

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 键的行为见模态框中的选择器。

shadcn/ui

安装

使用内置弹出层

匹配 shadcn/ui 主题

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