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-transparency-demo
diceui-base/color-swatch-transparency-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-transparency-demo.jsonSource
1import { ColorSwatch } from "@/registry/bases/base/ui/color-swatch";23export default function ColorSwatchTransparencyDemo() {4 return (5 <div className="flex flex-col gap-6">6 <div className="flex flex-col gap-2">7 <span className="font-medium text-sm">Alpha Transparency</span>8 <div className="flex gap-2">9 <ColorSwatch color="rgba(59, 130, 246, 1)" />10 <ColorSwatch color="rgba(59, 130, 246, 0.8)" />11 <ColorSwatch color="rgba(59, 130, 246, 0.6)" />12 <ColorSwatch color="rgba(59, 130, 246, 0.4)" />13 <ColorSwatch color="rgba(59, 130, 246, 0.2)" />14 </div>15 </div>16 <div className="flex flex-col gap-2">17 <span className="font-medium text-sm">HSLA Colors</span>18 <div className="flex gap-2">19 <ColorSwatch color="hsla(220, 91%, 60%, 1)" />20 <ColorSwatch color="hsla(220, 91%, 60%, 0.75)" />21 <ColorSwatch color="hsla(220, 91%, 60%, 0.5)" />22 <ColorSwatch color="hsla(220, 91%, 60%, 0.25)" />23 <ColorSwatch color="hsla(220, 91%, 60%, 0.1)" />24 </div>25 </div>26 <div className="flex flex-col gap-2">27 <span className="font-medium text-sm">28 Without Transparency Pattern29 </span>30 <div className="flex gap-2">31 <ColorSwatch color="rgba(239, 68, 68, 0.8)" withoutTransparency />32 <ColorSwatch color="rgba(34, 197, 94, 0.6)" withoutTransparency />33 <ColorSwatch color="rgba(139, 92, 246, 0.4)" withoutTransparency />34 </div>35 </div>36 <div className="flex flex-col gap-2">37 <span className="font-medium text-sm">38 With Transparency Pattern (Default)39 </span>40 <div className="flex gap-2">41 <ColorSwatch color="rgba(239, 68, 68, 0.8)" />42 <ColorSwatch color="rgba(34, 197, 94, 0.6)" />43 <ColorSwatch color="rgba(139, 92, 246, 0.4)" />44 </div>45 </div>46 </div>47 );48}
What it pulls in
Other registry items
