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-sizes-demo
diceui-base/color-swatch-sizes-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-sizes-demo.jsonSource
1import { ColorSwatch } from "@/registry/bases/base/ui/color-swatch";23const colors = [4 "#ef4444", // red5 "#f97316", // orange6 "#eab308", // yellow7 "#22c55e", // green8 "#3b82f6", // blue9];1011export default function ColorSwatchSizesDemo() {12 return (13 <div className="flex flex-col gap-6">14 <div className="flex flex-col gap-2">15 <span className="font-medium text-sm">Small (sm)</span>16 <div className="flex gap-2">17 {colors.map((color, index) => (18 <ColorSwatch key={index} color={color} size="sm" />19 ))}20 </div>21 </div>22 <div className="flex flex-col gap-2">23 <span className="font-medium text-sm">Default</span>24 <div className="flex gap-2">25 {colors.map((color, index) => (26 <ColorSwatch key={index} color={color} size="default" />27 ))}28 </div>29 </div>3031 <div className="flex flex-col gap-2">32 <span className="font-medium text-sm">Large (lg)</span>33 <div className="flex gap-2">34 {colors.map((color, index) => (35 <ColorSwatch key={index} color={color} size="lg" />36 ))}37 </div>38 </div>39 </div>40 );41}
What it pulls in
Other registry items
