Preset picker
PresetPicker, PresetPickerContent, PresetPickerSearch, PresetPickerList, and related components.
The preset picker is a composable slide-out sheet UI that lets users search, preview, and select from all available presets. All sub-components share state through a React context.
Picker components are installed via the shadcn CLI — they are not exported from the npm package.
# Slide-out sheet picker
pnpm shadcn@latest add https://registry.codecanon.dev/r/preset-picker
# Compact dropdown picker
pnpm shadcn@latest add https://registry.codecanon.dev/r/preset-dropdown-picker
# Application preview card with sidebar
pnpm shadcn@latest add https://registry.codecanon.dev/r/preset-preview-card
# Application preview card with dock
pnpm shadcn@latest add https://registry.codecanon.dev/r/preset-dock-preview-card
# Tweakcn like preset preview color dots
pnpm shadcn@latest add https://registry.codecanon.dev/r/preset-preview-dotsPresetPicker
Context provider and Sheet root. Wrap all picker sub-components inside it.
import {
PresetPicker,
PresetPickerTrigger,
PresetPickerContent,
PresetPickerThemeToggleGroup,
PresetPickerSearch,
PresetPickerList,
} from "@/components/preset-picker";
<PresetPicker>
<PresetPickerTrigger />
<PresetPickerContent>
<PresetPickerThemeToggleGroup />
<PresetPickerSearch />
<PresetPickerList />
</PresetPickerContent>
</PresetPicker>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Required. Picker sub-components. |
modal | boolean | false | When true, clicking outside closes the sheet. When false, the rest of the app stays interactive. |
onOpenChange | (open: boolean) => void | — | Fires when the sheet opens or closes. |
PresetPickerTrigger
A ready-made button that opens and closes the preset picker sheet. Shows the active preset name and a palette icon.
import { PresetPickerTrigger } from "@/components/preset-picker";
<PresetPickerTrigger />
// or with custom content:
<PresetPickerTrigger size="lg">🎨 Themes</PresetPickerTrigger>Accepts all Button props. Must be inside a <PresetPicker>.
PresetPickerContent
Renders the slide-out sheet container. Animates in from the left. Non-modal by default — the rest of the app stays interactive while open.
<PresetPicker>
<PresetPickerContent>
{/* content here */}
</PresetPickerContent>
</PresetPicker>Extends SheetContent props. Open state is wired automatically from PresetPicker context.
PresetPickerThemeToggleGroup
Three-button toggle for switching between system, light, and dark modes. Place it inside <PresetPickerContent>.
import { PresetPickerThemeToggleGroup } from "@/components/preset-picker";
<PresetPickerThemeToggleGroup />Accepts standard div props. Internally calls useTheme() to read and set the current theme.
PresetPickerSearch
Search input with clear and random preset buttons. Handles arrow key and Enter key events for keyboard navigation.
import { PresetPickerSearch } from "@/components/preset-picker";
<PresetPickerSearch />Accepts all InputGroupInput props. Must be inside a <PresetPicker>.
Keyboard navigation
| Key | Action |
|---|---|
↑ / ↓ | Move through the preset list |
Enter | Apply the highlighted preset |
| Type | Filter the preset list by name |
PresetPickerList
Renders the full preset list with live preview cards. Scrolls to the active preset on open.
import { PresetPickerList } from "@/components/preset-picker";
import { PresetDockPreviewCard } from "@/components/preset-dock-preview-card";
<PresetPickerList card={PresetDockPreviewCard} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
card | React.ComponentType<PresetPreviewCardProps> | PresetPreviewCard | Custom preview card component. |
usePresetPicker(caller?)
Hook to access the picker's open/close state from any component inside a <PresetPicker>. Useful for building custom triggers.
import { usePresetPicker } from "@/components/preset-picker";
const { open, modal, query, highlightedIndex, filteredPresets, setOpen, toggleOpen, setQuery, setHighlightedIndex } = usePresetPicker();Return values
| Property | Type | Description |
|---|---|---|
open | boolean | Whether the picker sheet is open. |
modal | boolean | Whether the sheet is in modal mode. |
query | string | Current search query. |
highlightedIndex | number | Keyboard-focused preset index (-1 if none). |
filteredPresets | PresetTuple[] | Search-filtered preset list. |
setOpen | (value: boolean) => void | Directly set open state. |
toggleOpen | () => void | Toggle open/closed. |
setQuery | (query: string) => void | Update search query. |
setHighlightedIndex | (index: number) => void | Update keyboard-highlighted index. |
Throws an error if called outside of a <PresetPicker>.
PresetDropdownPicker
A compact dropdown alternative to the sheet picker. Also composable.
import {
PresetDropdownPicker,
PresetDropdownPickerTrigger,
PresetDropdownPickerContent,
PresetDropdownPickerSearch,
PresetDropdownPickerToolbar,
PresetDropdownPickerList,
} from "@/components/preset-dropdown-picker";
<PresetDropdownPicker>
<PresetDropdownPickerTrigger />
<PresetDropdownPickerContent>
<PresetDropdownPickerSearch />
<PresetDropdownPickerToolbar />
<PresetDropdownPickerList />
</PresetDropdownPickerContent>
</PresetDropdownPicker>PresetDropdownPicker Props
| Prop | Type | Default | Description |
|---|---|---|---|
defaultOpen | boolean | false | Initial open state. |
PresetDropdownPickerTrigger Props
Accepts all Button props (size, variant, className, etc.).
PresetDropdownPickerSearch Props
| Prop | Type | Description |
|---|---|---|
containerClassName | string | Class applied to the wrapper div. |
| ...rest | InputGroupInput props | Forwarded to the search input. |
PresetDropdownPickerToolbar
Shows preset count, theme toggle, clear, and random buttons. Accepts standard div props.
usePresetDropdownPicker()
import { usePresetDropdownPicker } from "@/components/preset-dropdown-picker";
const { open, query, setOpen, toggleOpen, setQuery } = usePresetDropdownPicker();Must be called inside a <PresetDropdownPicker>.