Pickers

Color Menu

Text and background color pickers: a compact swatch grid and a labelled list.

Recently used
Text color
Background color
Text color
Default text
Gray text
Brown text
Orange text
Yellow text
Green text
Blue text
Purple text
Pink text
Red text
Background color
Default background
Gray background
Brown background
Orange background
Yellow background
Green background
Blue background
Purple background
Pink background
Red background

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/ColorMenuExample.tsx
import { useState } from 'react';
import { ColorGrid, ColorMenuList, MenuSurface, type ColorValue } from '@krackedui/motion';

export function ColorPickers() {
  const [value, setValue] = useState<ColorValue>({ kind: 'background', color: 'yellow' });
  return (
    <div className="flex flex-wrap items-start justify-center gap-6">
      <MenuSurface width={190}><ColorGrid value={value} recent={[{ kind: 'text', color: 'red' }]} onSelect={setValue} /></MenuSurface>
      <MenuSurface width={220} className="max-h-80 overflow-y-auto"><ColorMenuList value={value} onSelect={setValue} /></MenuSurface>
    </div>
  );
}

Examples

Grid and list

Recently used
Text color
Background color
Text color
Default text
Gray text
Brown text
Orange text
Yellow text
Green text
Blue text
Purple text
Pink text
Red text
Background color
Default background
Gray background
Brown background
Orange background
Yellow background
Green background
Blue background
Purple background
Pink background
Red background

API Reference

ColorGrid

PropTypeDefault
value
ColorValue | ColorValue[]
recent
ColorValue[]
onSelect
(value: ColorValue) => void

ColorMenuList

PropTypeDefault
value
ColorValue | ColorValue[]
lastUsed
{ value: ColorValue; shortcut?: ReactNode }[]
onSelect
(value: ColorValue) => void
highlighted
ColorValue
autoFocus
boolean
false

ColorSwatch

PropTypeDefault
value
ColorValue
selected
boolean
false

Accessibility

  • ColorGrid: each section is a labelled group of toggle buttons ("Yellow background"); aria-pressed marks the current colors. Tab moves between swatches, Enter/Space picks.
  • ColorMenuList: one listbox; ↑/↓ and Home/End move, Enter or Space picks; aria-selected marks the current color. Pass autoFocus to focus it on open.
  • Swatches pair color with a text label (tooltip / row label), never color alone.

Usage

  • Use the grid in a text toolbar and the list in block menus.
  • Don't use these for arbitrary colors: they offer the ten palette colors only.
© 2026 Motion. Internal documentation.