Preset Selector

preset-selectorControls

The compact preset dropdown every face header carries.

$ pnpm dlx shadcn@latest add @pluginui/core-preset-selector
Loading interactive preview…

Install

Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.

Pulls in

overlay-containerpopoverportable-styles
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-preset-selector.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)}
/>
About Preset Selector

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.

Props

PropTypeDefaultDescription
options / value / onValueChangePresetOptionInput[] / string / (id) => void—Strings or { id, name/label, note/description, disabled }. The label shows the pending choice until the host confirms it.
dirtybooleanfalseModified 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 controlsStart building