Collapsible edge-docked inspector with a kit scrollbar body.
Install with the CLI, or copy the component source into your project.
Add dock-panel (npm)
npx --yes -p github:itsvigneshv/default-file-ui#main 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.
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. Panel content is unrestricted.
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. |
| …div attributes | HTMLAttributes | - | Native div attributes on the rail root. |
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 collapse and expand controls when title or subtitle is not a string. |
| collapseIcon | ReactNode | - | Icon for the collapse control. Defaults to PanelLeft. |
| expandIcon | ReactNode | - | Icon for the collapsed expand control. Defaults to collapseIcon, then PanelLeft. |
| collapseLabel | string | - | Accessible name for the collapse control. Defaults to 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. |
| …aside attributes | HTMLAttributes | - | Native aside attributes 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. |
| …div attributes | HTMLAttributes | - | Native div attributes on the header. |
Eyebrow label in the header.
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Eyebrow text. |
| className | string | - | Additional classes on the title. |
| …p attributes | HTMLAttributes | - | Native paragraph attributes. |
Primary heading in the header.
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Heading text. |
| className | string | - | Additional classes on the subtitle. |
| …p attributes | HTMLAttributes | - | Native paragraph attributes. |
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. |
| …button attributes | ButtonHTMLAttributes | - | Native button attributes (onClick, aria-label, title, and others). |
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. |
| …button attributes | ButtonHTMLAttributes | - | Native button attributes (onClick, aria-label, title, and others). |
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. |
| …div attributes | HTMLAttributes | - | Native div attributes on the body shell. |
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. |