Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Color flood

Colour things by dropping paint on them. Drag a swatch onto a folder and the new colour floods out from where it landed until it fills the tile; without dragging, choose a folder, then a swatch.

Pro
pnpm dlx shadcn@latest add @caliper/color-flood

Folders

Drag a colour onto a folder, or choose a folder and then a colour.

Installs components/ui/color-flood.tsxDepends on lucide-reactMotion none in component source

When to use

Use it for

  • Colouring folders, labels, projects and calendars.
  • Tagging by colour in boards and file managers.

Skip it when

  • Choosing any colour; use `ColorPicker`.
  • Many items at once; use a bulk action.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Flood from the drop
The colour spreads from the exact point it landed, so the change reads as poured, not swapped.

Usage

Two ways in
Drag a swatch, or choose a folder (a toggle button) and then a swatch; each change is announced.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/color-flood

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { ColorFlood } from "@/components/ui/color-flood"

The worked example comes with Pro

The 41-line example behind the preview opens here, ready to copy.

  • 602 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

ColorFlood

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
label *string—Names the set, e.g. "Folders".
items *FloodItem[]—
colors *FloodColor[]—
onChange((id: string, color: string) => void)—

Accessibility

It exposes group semantics, with aria-label, aria-pressed, aria-hidden and aria-live kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
EnterActivates the focused control.
SpaceActivates the focused control.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.

All Surfaces examples