bydefaulthuman.fun

Stroke Color

Installation

package manager

npx shadcn add https://bydefaulthuman.fun/r/color-picker.json

Props

PropTypeDefaultDescription

label

string

—

Optional label displayed above the picker.

defaultValue

string

"#3b82f6"

Initial selected color (uncontrolled mode).

value

string

—

Controlled value of the selected color.

onChange

(color: string) => void

—

Callback fired when a color is selected or typed.

swatches

string[]

preset palette

Array of color swatches displayed in the grid.

className

string

—

Additional Tailwind classes applied to the component.

id

string

"color-picker"

Optional stable id used for sketch seeding and accessibility.

theme

CrumbleTheme

—

Overrides the global Crumble theme for this instance.

fill

string

—

Custom fill color for rough elements.

stroke

string

—

Custom stroke color for rough elements.

strokeMuted

string

—

Muted stroke color (used for borders).

Custom swatches

Custom stroke and fill

Accessibility

This component preserves semantic input behavior. Ensure labels are provided when used in forms and that color selection is not the only means of conveying meaning.

Examples

import { ColorPicker } from "@/components/crumble/ui/color-picker";

<ColorPicker
  label="Pick a color"
  defaultValue="#3b82f6"
  onChange={(color) => console.log(color)}
/>;

Color Picker

Installation

Props

Custom swatches

Custom stroke and fill

Accessibility

Examples

On this page