Blocks

Color Filter

Theme color picker with component preview.

Default block

PreviewCode

Appearance

Choose your product accent

Preview a system color before applying it to your workspace.

Accent color

Selected: Neutral

Theme preview

Components inherit the selected accent.

Live

Toggle your preferred package manager and run the CLI command to add this block and its dependency components.

DUI CLI · auto-installs dependencies

$npx shadcn@latest add qentrah/DUI/blocks-color-filter

This block is composed of the following primitives. Here are the commands to install them individually if needed:

Badgebadge

Displays a status or compact label.

npx shadcn@latest add qentrah/DUI/badge

Buttonbutton

Triggers an action or event.

npx shadcn@latest add qentrah/DUI/button

Separatorseparator

Visually separates content.

npx shadcn@latest add qentrah/DUI/separator

TagChiptag-chip

Colored tag with optional remove action.

npx shadcn@latest add qentrah/DUI/tag-chip

ColorSwatchcolor-swatch

Selectable color radio control.

npx shadcn@latest add qentrah/DUI/color-swatch