← All components
Interaction / component
Design Picker
A compact visual direction picker with three miniature layouts and an accessible selection dialog.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Import DesignPicker.tsx for the control or Demo.tsx for the complete gallery composition. The gallery opens the dialog initially; the reusable control starts closed. Starting direction is initial state; use value/onChange for controlled state, or change replayToken to reset.
- Three original CSS miniature layouts, panel proportions and Instrument Sans typography are included. Place the bundled font at public/components/design-picker/instrument-sans.ttf and retain its OFL notice. Tailwind is not required.
- The dialog traps keyboard focus, supports Escape and outside dismissal, and returns focus to its trigger. It closes when disabled. Paused and reduced-motion states remove decorative transitions.
- DirectionPreview is an optional named export. auto uses the refined miniature. Selecting a direction provides a value to your callback; the component does not generate a design or contact any service.
- The warm and white surfaces belong to this component. They do not alter the host application theme. referenceFirst only changes the explanatory hint.
React 19.2Radix Dialog
Chungus UI · Project-authored component. Public distribution terms pending release decision.
Instrument Sans · SIL Open Font License 1.1; see bundled InstrumentSans-OFL.txt.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | DesignPreference | "auto" | Starting direction |
tone | 'app' | 'landing' | "landing" | Surface |
defaultOpen | boolean | false | Open initially |
disabled | boolean | false | Disabled |
referenceFirst | boolean | false | Reference guidance |
value | DesignPreference | undefined | undefined | Controlled selection: auto, refined, signature or functional. Omit for internal state. |
onChange | (value: DesignPreference) => void | undefined | Receives the selected direction; the dialog closes after selection. |
paused | boolean | false | Disable decorative motion; interaction remains functional. |
replayToken | number | 0 | Change to reset internal state. |
className | string | '' | Additional outer classes. |