Collapsible edge-docked inspector with a kit scrollbar body. Prefer this for persistent side chrome; prefer Options Panel for anchored temporary controls.
Also known as: side panel, side drawer, edge drawer, inspector, inspector panel, edge panel, docked inspector, collapsible inspector
Install with the CLI, or copy the component source into your project.
Add dock-panel (npm)
1npx --yes -p @default-file/ui df-ui add dock-panel
One edge-docked panel with custom collapse and expand icons. Body content is unrestricted.
Two panels in a rail. Each panel collapses independently.
Temporary tune panel. Closing removes it from the rail instead of collapsing to an expand chip. The header control defaults to a close icon.
Hide the eyebrow with titleVisible, or the heading with subtitleVisible. The remaining line centers with the collapse control.
Collapsible edge-docked inspector. Compose a rail of panels with optional header text, custom icons, and a body that owns the kit ScrollArea. Prefer this for persistent side chrome; prefer Options Panel for anchored temporary controls. Use dismissible for temporary tune panels that leave the rail when closed.
Layout container for one or more DockPanel instances. Stacks vertically below xl and sits in a row at xl and up.
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | One or more DockPanel children. |
| className | string | - | Additional classes on the rail. |
Root panel. Pass title and subtitle for a convenience header, or compose Header, Body, and Footer manually.
| Prop | Type | Default | Notes |
|---|---|---|---|
| open | boolean | - | Controlled open state. |
| defaultOpen | boolean | true | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | - | Called when the open state changes. |
| size | "sm" | "md" | "lg" | "xl" | "md" | Expanded width at xl and up. Maps to --df-dock-width-* tokens. |
| mobileMaxHeight | "sm" | "md" | "lg" | "lg" | Open max-height below xl. Maps to --df-dock-mobile-max-height-* tokens. |
| title | ReactNode | - | Eyebrow label in the convenience header. When title or subtitle is set, children render inside DockPanelBody. |
| subtitle | ReactNode | - | Primary heading in the convenience header. |
| titleVisible | boolean | true | Show the eyebrow title. When false, the subtitle centers with the collapse control. |
| subtitleVisible | boolean | true | Show the primary heading. When false, the title centers with the collapse control. |
| label | string | - | Accessible name for the aside landmark (aria-label) and for collapse or dismiss controls. Falls back to a string title or subtitle, then a catalogue default. |
| dismissible | boolean | false | When true, closing removes the panel from the rail instead of showing the collapsed expand chip. Defaults the header control to a close icon and Close {label}. Use for temporary tune panels opened from another surface. |
| collapseIcon | ReactNode | - | Icon for the collapse or dismiss control. Defaults to X when dismissible, otherwise PanelLeft. |
| expandIcon | ReactNode | - | Icon for the collapsed expand control. Defaults to collapseIcon, then PanelLeft. Ignored when dismissible, because closed panels leave the rail. |
| collapseLabel | string | - | Accessible name for the collapse or dismiss control. Defaults to Close {label} when dismissible, otherwise Collapse {label}. |
| expandLabel | string | - | Accessible name for the expand control. Defaults to Expand {label}. |
| collapsedLabelVisible | boolean | true | Show the text label on the collapsed rail. When false, only the icon chip is shown. |
| collapsedAlign | "start" | "center" | "start" | Placement of the expand control on the collapsed rail. start aligns to the top at xl, or the leading edge below xl. center places it in the middle. |
| variant | "default" | "edge" | "default" | ScrollArea thumb style on the convenience DockPanelBody. Use edge with side left for a thin thumb on the panel leading border. |
| side | "left" | "right" | "top" | "bottom" | - | ScrollArea thumb placement on the convenience DockPanelBody. |
| thumbShape | "rounded" | "flat" | "rounded" | ScrollArea thumb shape on the convenience DockPanelBody. |
| visibility | "hover" | "always" | "hover" | ScrollArea thumb visibility on the convenience DockPanelBody. |
| space | "auto" | "none" | "none" | ScrollArea track inset on the convenience DockPanelBody. none overlays the thumb with no reserved gutter. |
| orientation | "vertical" | "horizontal" | "both" | "vertical" | ScrollArea axes on the convenience DockPanelBody. |
| width | number | - | ScrollArea scrollbar thickness in pixels on the convenience DockPanelBody. |
| viewportClassName | string | - | Classes on the ScrollArea viewport inside the convenience DockPanelBody. |
| children | ReactNode | - | Panel content. With a convenience header, children fill DockPanelBody. Otherwise compose Header, Body, and Footer as needed. |
| className | string | - | Additional classes on the panel root. |
Header row for compound composition.
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Typically heading text and DockPanelCollapseTrigger. |
| className | string | - | Additional classes on the header. |
Eyebrow label in the header.
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Eyebrow text. |
| className | string | - | Additional classes on the title. |
Primary heading in the header.
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Heading text. |
| className | string | - | Additional classes on the subtitle. |
Control that collapses an open panel.
| Prop | Type | Default | Notes |
|---|---|---|---|
| icon | ReactNode | - | Icon for this trigger. Overrides collapseIcon from the root. |
| children | ReactNode | - | Custom trigger content. Replaces the default icon when set. |
| className | string | - | Additional classes on the trigger. |
Control shown when the panel is collapsed.
| Prop | Type | Default | Notes |
|---|---|---|---|
| icon | ReactNode | - | Icon for the expand chip. Overrides expandIcon from the root. |
| label | ReactNode | - | Visible label on the collapsed rail. |
| showLabel | boolean | - | Show or hide the collapsed label for this trigger. Overrides collapsedLabelVisible from the root. |
| children | ReactNode | - | Custom trigger content. Replaces the default chip and label layout when set. |
| className | string | - | Additional classes on the trigger. |
Expanded content region. Always wraps children in the kit ScrollArea. Do not nest another ScrollArea inside.
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Panel content. |
| space | "auto" | "none" | "none" | ScrollArea track inset. none overlays the thumb with no reserved gutter. auto reserves inset when that axis overflows. |
| variant | "default" | "edge" | "default" | Passed through to ScrollArea. |
| thumbShape | "rounded" | "flat" | "rounded" | Passed through to ScrollArea. |
| orientation | "vertical" | "horizontal" | "both" | "vertical" | Passed through to ScrollArea. |
| side | "left" | "right" | "top" | "bottom" | - | Passed through to ScrollArea. |
| visibility | "hover" | "always" | "hover" | Passed through to ScrollArea. |
| width | number | - | Passed through to ScrollArea as scrollbar thickness in pixels. |
| viewportClassName | string | - | Classes on the ScrollArea viewport. |
| className | string | - | Additional classes on the body shell. |
Optional region below the scrolling body for footnotes, disclaimers, or actions.
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Footer content. |
| className | string | - | Additional classes on the footer. |
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --df-dock-width-sm | CSS length | 252px | Expanded width for size sm. |
| --df-dock-width-md | CSS length | 280px | Expanded width for size md. |
| --df-dock-width-lg | CSS length | 300px | Expanded width for size lg. |
| --df-dock-width-xl | CSS length | 420px | Expanded width for size xl. |
| --df-dock-collapsed-size | CSS length | calc(12 * var(--spacing-unit)) | Collapsed rail width and mobile collapsed height. |
| --df-dock-mobile-max-height-sm | CSS length | 38vh | Open max-height below xl for mobileMaxHeight sm. |
| --df-dock-mobile-max-height-md | CSS length | 42vh | Open max-height below xl for mobileMaxHeight md. |
| --df-dock-mobile-max-height-lg | CSS length | 46vh | Open max-height below xl for mobileMaxHeight lg. |
| --df-shadow-dock-chip | CSS box-shadow | 0 1px 2px rgb(0 0 0 / 0.04) | Shadow on the collapsed expand chip. |