KQ-1095 · TRY/ON

Try On

A picker whose options preview on a sample the moment you point at them: the look wipes over the sample from the swatch's own side, as a straight edge sweeping away from it or a circle grown from it, on the enter curve, and draws back into its swatch on the exit curve when you move off. Click and it stays: a stamp lands on the sample on the recoil spring, the sample dips under it on a flick and snaps back, and the kept ring slides over on the snap spring. The swatches are a listbox: arrow keys move focus and focus previews, Enter or Space keeps, Escape puts the tried look back.

KQ-1095 · TRY/ON

AccentCobalt

accent cobalt · point at a swatch to try it

Open it on the Tactile stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/try-on

Props

options: { value: string; label: string; color: string }[]; default Ink, Cobalt, Moss, Amber, Ember; What can be tried on. color is any CSS colour; text laid on it uses var(--background).
value / defaultValue: string; default the first option; Controlled or initial kept option.
onValueChange: (value: string) => void; default —; Fires from the click, key or tap that kept a new option.
onPreviewChange: (value: string | null) => void; default —; The option being tried on, as it changes; null when the sample is back to the kept one. For previewing the choice somewhere else as well.
label: string; default "Colour"; Names the list of swatches and heads the caption.
sampleText: string; default "Preview"; The card's title, the button's label, the badge's text.
renderSample: (option: TryOnOption, sample: "card" | "button" | "badge") => ReactNode; default —; Draw your own sample for an option instead of the built-in ones.
wipe: "side" | "radial"; default "side"; How a preview arrives: a straight edge from the swatch's side, or a circle grown from the swatch.
speed: number; default 1; Wipe speed as a multiple of the house pace, 0.5 to 2.
sample: "card" | "button" | "badge"; default "card"; What the options are tried on.
sound: boolean; default false; Play a swish as each preview wipes in (a softer one as it draws back) and a click as a keep lands. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Disables every swatch and dims the picker; the kept look stays.
className: string; default —; Merged onto the root element's classes.

Prop	Type	Default	Description
options	{ value: string; label: string; color: string }[]	Ink, Cobalt, Moss, Amber, Ember	What can be tried on. color is any CSS colour; text laid on it uses var(--background).
value / defaultValue	string	the first option	Controlled or initial kept option.
onValueChange	(value: string) => void	—	Fires from the click, key or tap that kept a new option.
onPreviewChange	(value: string \| null) => void	—	The option being tried on, as it changes; null when the sample is back to the kept one. For previewing the choice somewhere else as well.
label	string	"Colour"	Names the list of swatches and heads the caption.
sampleText	string	"Preview"	The card's title, the button's label, the badge's text.
renderSample	(option: TryOnOption, sample: "card" \| "button" \| "badge") => ReactNode	—	Draw your own sample for an option instead of the built-in ones.
wipe	"side" \| "radial"	"side"	How a preview arrives: a straight edge from the swatch's side, or a circle grown from the swatch.
speed	number	1	Wipe speed as a multiple of the house pace, 0.5 to 2.
sample	"card" \| "button" \| "badge"	"card"	What the options are tried on.
sound	boolean	false	Play a swish as each preview wipes in (a softer one as it draws back) and a click as a keep lands. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Disables every swatch and dims the picker; the kept look stays.
className	string	—	Merged onto the root element's classes.