Components / Data display
ColorDot
Small color indicator with optional label.
Preview
BlueGreen
1import { ColorDot } from "@/components/ui/color-dot"2
3export function ColorDotDemo() {4 return <ColorDot color="#3b82f6" label="Blue" />5}ring
The ring style of this component.
BlueGreen
1import { ColorDot } from "@/components/ui/color-dot"2
3export function ColorDotDemo() {4 return <ColorDot color="#3b82f6" label="Blue" />5}Installation
Add the source directly to your project with the shadcn CLI.
npx shadcn@latest add qentrah/DUI/color-dotUsage
Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.