This component no longer exists. It was in diceui/base’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-13 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.
color-swatch-demo
diceui-base/color-swatch-demoRemovedExample
diceui/base publishes no description for this item.
Install it
npx shadcn@latest add https://raw.githubusercontent.com/sadmann7/diceui/HEAD/docs/public/r/styles/base-vega/color-swatch-demo.jsonSource
1import { ColorSwatch } from "@/registry/bases/base/ui/color-swatch";23export default function ColorSwatchDemo() {4 return (5 <div className="flex flex-col gap-6">6 <div className="flex items-center gap-3">7 <ColorSwatch color="#3b82f6" />8 <span className="font-medium text-sm">Primary Blue</span>9 </div>10 <div className="flex items-center gap-3">11 <ColorSwatch color="#ef4444" size="sm" />12 <ColorSwatch color="#ef4444" size="default" />13 <ColorSwatch color="#ef4444" size="lg" />14 <span className="font-medium text-sm">Different Sizes</span>15 </div>16 <div className="flex items-center gap-3">17 <ColorSwatch color="rgba(59, 130, 246, 0.5)" />18 <span className="font-medium text-sm">Semi-transparent Blue</span>19 </div>20 <div className="flex items-center gap-3">21 <span className="font-medium text-sm">Color Palette</span>22 <div className="flex gap-2">23 <ColorSwatch color="#ef4444" />24 <ColorSwatch color="#f97316" />25 <ColorSwatch color="#eab308" />26 <ColorSwatch color="#22c55e" />27 <ColorSwatch color="#3b82f6" />28 <ColorSwatch color="#8b5cf6" />29 <ColorSwatch color="#ec4899" />30 </div>31 </div>32 <div className="flex items-center gap-3">33 <ColorSwatch color="#ef4444" disabled />34 <span className="font-medium text-sm">Disabled</span>35 </div>36 </div>37 );38}
What it pulls in
Other registry items
