Ink Tray

A whiteboard's pen tray: the tool in hand rises out from behind the bar wearing its ink, and each tool remembers its own colour and stroke size.

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add ink-tray

Usage#

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

The colour and size belong to the tool, not to the tray: give the marker yellow and the pen black, switch between them, and each one comes back with its own ink. That is what inks holds, one entry per tool value.

Anatomy#

import {
  InkTray,
  InkTrayTools,
  InkTrayTool,
  InkTrayBar,
  InkTraySizes,
  InkTraySize,
  InkTraySeparator,
  InkTrayColors,
  InkTrayColor,
  InkTrayCustomColor,
} from "@/components/ui/ink-tray"

<InkTray>
  <InkTrayTools>
    <InkTrayTool />
  </InkTrayTools>
  <InkTrayBar>
    <InkTraySizes>
      <InkTraySize />
    </InkTraySizes>
    <InkTraySeparator />
    <InkTrayColors>
      <InkTrayColor />
      <InkTrayCustomColor />
    </InkTrayColors>
  </InkTrayBar>
</InkTray>

Tools#

Four drawings ship with it. The pen wears its ink on the nib and the clip, the marker on its chisel and a window down the barrel, the pencil on its lead and the whole barrel. The eraser has no ink, so while it is in hand the colours dim and only the size can change.

On a canvas#

Control tool and inks and read them where you draw. Here the pen and the marker paint SVG strokes in their own colour and size, the marker wider and translucent, and the eraser lifts any stroke it passes over.

Pick a pen and draw anywhere

API reference#

InkTray

The root: a Radix Toolbar.Root, so the tools, the sizes and the colours are one Tab stop and the arrow keys walk through all of them. Holds which tool is in hand and every tool's ink. Accepts className, merged last.

Prop	Type	Default	Description
tool	string	-	The tool in hand, controlled.
defaultTool	string	""	The tool in hand when uncontrolled.
onToolChange	(tool: string) => void	-	Called when another tool is picked up.
inks	Record<string, { color?: string; size?: string }>	-	Each tool's colour and size, keyed by the tool's `value`, controlled.
defaultInks	Record<string, { color?: string; size?: string }>	{}	Each tool's ink when uncontrolled.
onInksChange	(inks) => void	-	Called with every tool's ink when the tool in hand changes colour or size.

Data attribute	Description
data-slot	`"ink-tray"`.

InkTrayTools

The pocket the tools stand in, tucked behind the top edge of the bar. A single-choice toggle group: picking a tool never puts the last one down twice.

Data attribute	Description
data-slot	`"ink-tray-tools"`.

InkTrayTool

One tool, drawn with its ink. It rests low in the pocket, lifts a little on hover and stands tall while in hand. Pass children to draw your own tool in place of the built-in art.

Prop	Type	Default	Description
value*	string	-	The tool's key in `tool` and `inks`.
label*	string	-	Accessible name and tooltip.
kind	"pen" \| "marker" \| "pencil" \| "eraser"	"pen"	Which drawing to show.
inkless	boolean	-	Disables the colours while this tool is in hand. Defaults to `true` for the eraser.
shortcut	string	-	Shown beside the label in the tooltip. Bind the key yourself.

Data attribute	Description
data-state	`"on"` on the tool in hand.
data-kind	The `kind`.

CSS variable	Description
--ink	The tool's colour, from its ink. The nib, the clip and the barrel window are painted with it.

InkTrayBar

The floating bar, with the same surface as a floating Toolbar. Scrolls sideways when the viewport is narrower than it.

Data attribute	Description
data-slot	`"ink-tray-bar"`.

InkTraySizes / InkTraySize

The stroke sizes of the tool in hand. Each size is a Toolbar toggle item showing a squiggle drawn at its own weight.

Prop	Type	Default	Description
value*	string	-	The size's key, stored in the tool's ink.
weight*	number	-	Stroke width of the squiggle, in a 24px box.
label*	string	-	Accessible name and tooltip.

InkTrayColors / InkTrayColor

The ink colours of the tool in hand, round swatches with the Swatch Grid's selection ring. Disabled while an inkless tool is in hand.

Prop	Type	Default	Description
color*	string	-	Any CSS colour; also the value stored in the tool's ink.
label*	string	-	Accessible name and tooltip.

InkTrayCustomColor

A colour wheel swatch that opens a Color Picker above the bar. The colour picked there becomes the tool's ink and shows as a dot inside the wheel.

Prop	Type	Default	Description
label	string	"Custom colour"	Accessible name and tooltip.

FAQ#

The bar is the lid of the tray. Tools at rest show only their tips, so the tray reads at a glance without taking a second row, and the one in hand stands out by height alone, with no chip or outline around it.