component
Side panel
The app's drawer: a right-hand panel on desktop and a bottom sheet on phones, with a labelled field and a pill segmented control.
A right-hand drawer on desktop and a bottom sheet on phones. Escape and the backdrop close it. PanelField and Segmented build its settings rows.
Installation
$ npx shadcn@latest add https://www.pokerstudy.ai/r/side-panel.jsonProps
Generated from the component source with react-docgen-typescript.
SidePanel
| Prop | Type | Default | Description |
|---|---|---|---|
| bodyClassName | string | flex flex-col gap-6 px-5 py-5 | Layout classes for the scrollable body (defaults to a padded column). |
| footer | ReactNode | – | Optional pinned row under the scrollable body. |
| onClose * | () => void | – | – |
| size | "default" | "wide" | default | `default` is the narrow settings drawer. `wide` is for pickers with a lot to show: a near-full-screen bottom drawer on phones, and a wide right-hand panel (up to 64rem) on larger screens. |
| title * | string | – | – |
PanelField
| Prop | Type | Default | Description |
|---|---|---|---|
| label * | string | – | – |
Segmented
| Prop | Type | Default | Description |
|---|---|---|---|
| onChange * | (value: T) => void | – | – |
| options * | { value: T; label: string; }[] | – | – |
| value * | string | – | – |
| wrap | boolean | false | Let the track wrap onto multiple lines (long option lists, e.g. stacks). |