Composer Pills

In the preview: hover a pill to open its menu (tap on mobile), toggle Audio, type into Seconds and press Enter.

Install

npx shadcn@latest add @visualsandbox-ui/composer-pills

Requires the one-time registry entry from Installation — or use the full URL with zero setup:

npx shadcn@latest add https://ui.visualsandbox.com/r/composer-pills.json

Usage

Designed for the Composer's controls row, but each pill stands alone.

import {
  ActionPopover,
  NumberPill,
  PillSelect,
  TogglePill,
} from "@/components/visualsandbox-ui/composer-pills";

<PillSelect value={ratio} options={["1:1", "16:9", "9:16"]} onChange={setRatio} />
<TogglePill label="Audio" on={audio} onChange={setAudio} />
<NumberPill label="Seconds" value={s} min={4} max={16} integer onChange={setS} />
<ActionPopover
  icon={<Plus className="h-4 w-4" />}
  ariaLabel="Add reference"
  onClick={openPicker}
  items={[{ icon: <Upload size={14} />, label: "Upload", onClick: openPicker }]}
/>

Behavior

• Desktop: PillSelect and ActionPopover open on hover (Radix HoverCard, 50ms in / 150ms out). The trigger's primary onClick still fires without opening the menu.
• Mobile (< 768px): hover doesn't exist, so both switch to a tap-to-open Radix Popover that closes on selection.
• NumberPill lets you type freely while focused; it clamps to min/max and commits on blur or Enter — half-typed values never reach onChange.
• All pills resize on a shared layout spring so the controls row breathes together.

Props

PillSelect

TogglePill

NumberPill

ActionPopover