Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA theme picker that previews each option on the real page as you move the highlight, commits on selection and reverts when closed. Use this when people choose a look and need to see it before deciding.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for themes, accent colours, fonts and densities, where a tiny swatch cannot show the effect and applying the choice for real is cheap to undo.
Do not use it when the preview is expensive (a network request or a reload) or changes data. Preview only things that are safe to flip and flip back.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
| --------------- | ------------------------------------- | -------------- | ------------------------------------ | ---------------------------------------------------------------------------------------- |
| themes | { id, name, swatches?: string[] }[] | - | The options. |
| value | string | - | The committed theme id (controlled). |
| defaultValue | string | - | Initial committed theme. |
| onValueChange | (id: string) => void | - | Runs when a theme is committed. |
| onPreview | (id: string \\ | null) => void | - | Runs with the highlighted theme while open and with null when closed without choosing. |
| disabled | boolean | false | Disables the button. |
combobox; its name is the committed theme.aria-selected option; the preview follows it.role="status" line announces Previewing, Applied and Restored.The pattern ships with a Testing Library test (theme-picker-live-preview.test.tsx) that covers preview while moving the highlight, revert on Escape and commit on selection.