KQ-1113 · MELD/TAGS

Meld Tags

Tags you group by hand with a liquid that does the grouping: drag one near another tag or group and a neck of liquid reaches out between them, drawn analytically as a metaball bridge from motion values each frame; let go and the neck draws it in on a spring that carries the release velocity, and it melds with a gloop while the row reflows on the glide. Drag a member out of its group and it stretches against the neck until it tears with a pop and snaps back as a droplet, the group closing the gap; an unseated member springs home on the recoil. The keyboard picks a tag up with Enter, chooses its new group with the arrows and drops it with the same sound.

KQ-1113 · MELD/TAGS

Money trouble

One pill matches any of its tags

6 rules · billing or refunds

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/meld-tags

Props

tags: { id: string; label: string }[]; default —; Every tag, with its id and the label shown and spoken.
value / defaultValue: string[][]; default every tag on its own; The groups, in order, as arrays of tag ids; a tag on its own is a group of one. Controlled or uncontrolled.
onValueChange: (value: string[][], change: { kind: "meld" | "free"; id: string; group: string[] }) => void; default —; Fires from the drop or the key that changed the groups, with the new groups and what happened: the tag that moved and the group it is in now.
label: string; default "Tags"; The set's accessible name.
goo: number; default 0.5; How thick the liquid runs, 0 to 1: a thicker neck, a longer stretch before a member tears free, and a slower, bouncier settle.
radius: number; default 24; The meld radius in px, 8 to 48: how near a dragged tag must come before the neck reaches out and a drop melds.
tint: "mono" | "tint"; default "tint"; Groups in neutral ink, or each group in its own hue from the theme.
maxGroup: number; default 4; The most tags a group takes, 2 to 6. A full group grows no neck and shows a dashed ring instead.
sound: boolean; default false; A gloop when a tag melds (higher for bigger groups) and a pop when one tears free. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Dims the set and stops every drag and pick-up.
className: string; default —; Merged onto the panel's classes.

Prop	Type	Default	Description
tags	{ id: string; label: string }[]	—	Every tag, with its id and the label shown and spoken.
value / defaultValue	string[][]	every tag on its own	The groups, in order, as arrays of tag ids; a tag on its own is a group of one. Controlled or uncontrolled.
onValueChange	(value: string[][], change: { kind: "meld" \| "free"; id: string; group: string[] }) => void	—	Fires from the drop or the key that changed the groups, with the new groups and what happened: the tag that moved and the group it is in now.
label	string	"Tags"	The set's accessible name.
goo	number	0.5	How thick the liquid runs, 0 to 1: a thicker neck, a longer stretch before a member tears free, and a slower, bouncier settle.
radius	number	24	The meld radius in px, 8 to 48: how near a dragged tag must come before the neck reaches out and a drop melds.
tint	"mono" \| "tint"	"tint"	Groups in neutral ink, or each group in its own hue from the theme.
maxGroup	number	4	The most tags a group takes, 2 to 6. A full group grows no neck and shows a dashed ring instead.
sound	boolean	false	A gloop when a tag melds (higher for bigger groups) and a pop when one tears free. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Dims the set and stops every drag and pick-up.
className	string	—	Merged onto the panel's classes.