Preset Selector

preset-selectorControls

A controlled preset dropdown with previous/next paging, search past ten presets, favorites, and Quiet, Panel and Glass skins over one headless hook. A host-owned modified marker shows (and is announced) while the current sound differs from the selected preset, and optional Save and Browse actions sit in the menu footer or as trailing buttons. resolveStep lets a library page through its filtered list. Driven by a host preset library, use PresetLibrarySelector from the preset browser.

Bone / Studio

Loading interactive preview…

Planar / Flat

Loading interactive preview…

Midnight / Minimal

Loading interactive preview…

Ember / Vintage

Loading interactive preview…

Ink / Studio

Loading interactive preview…

Mint / Flat

Loading interactive preview…

Install

Copies the source into your project. Anything it depends on comes with it.

$ pnpm dlx shadcn@latest add @pluginui/core-preset-selector

Pulls in

overlay-containerpopoverportable-styles

First time? Add the registry to your components.json once:

components.json

{
  "registries": {
    "@pluginui": "https://pluginui.com/r/{name}.json"
  }
}

Usage

Connect the documented props to your application or host.

example.tsx

import { PresetSelector } from "@/components/ui/preset-selector"

<PresetSelector
  options={presets}
  value={activeId}
  onValueChange={selectPreset}
  dirty={soundChanged}
  onSave={() => setSaveOpen(true)}
  onBrowse={() => setBrowserOpen(true)}
/>

Props

Prop	Type	Default	Description
options / value / onValueChange	PresetOptionInput[] / string / (id) => void	—	Strings or { id, name/label, note/description, disabled }. The label shows the pending choice until the host confirms it.
dirty	boolean	false	Modified marker beside the label; the live label also reads “(modified)”.
onSave / onBrowse	() => void	—	Offer Save / Browse. Omitted actions are not rendered.
actionPlacement	"menu" \| "trailing"	"menu"	Footer row inside the open menu, or compact buttons after the selector.
resolveStep	(delta, value) => string \| undefined	—	Override where previous/next lands, e.g. a library's filtered list.
paging / search / favorites	"inside" \| "outside" \| "after" \| "off" / boolean / PresetFavoritesSource	—	Chevron placement, search field (auto from 10 presets) and the star column.
variant	"quiet" \| "panel" \| "glass"	"quiet"	Appearance only.

Interaction

Keyboard ArrowUp/Down on the trigger opens the menu; arrows walk the options, ArrowUp from the first returns to search, Escape clears the search then closes.
Actions Save and Browse close the menu without pulling focus back, so the dialog or browser they open keeps it.

All controls Start building