Sidepanel

Root component for a sidepanel. Wraps Radix Dialog.Root.

Palette

Coastal Kitchen

12 materials · updated today

Usage

import { Sidepanel, sidepanelAnatomy, SidepanelBody, SidepanelClose, SidepanelCloseButton, SidepanelCloseButtonProps, SidepanelContent, SidepanelContentProps, SidepanelControls, SidepanelControlsProps, SidepanelDescription, SidepanelFooter, SidepanelHeader, SidepanelHeaderProps, SidepanelHeaderVariant, SidepanelNestedRoot, SidepanelNestedRootProps, SidepanelProps, SidepanelTitle, SidepanelTrigger, SidepanelWidth } from "@desk/ui/components/sidepanel";

Best practices

Reach for Sidepanel when you need nested sub-panels or a non-modal panel (modal={false}) that leaves the page interactive; a single focused edge panel is a Sheet.
Compose nested panels with SidepanelNestedRoot, and always render a SidepanelTitle for the accessible name.

Props

SidepanelCloseButton

Prop	Type	Description
aria-label	`string`	Accessible label. Defaults to "Close panel".
className	`string`	Additional CSS classes.
onClick	`() => void`	Called when the button is pressed. Wire this to your close handler.

SidepanelContent

Prop	Type	Description
title	`string`	Accessible title for screen readers
open	`boolean`	Whether the sidepanel is open (required for exit animations)
width	`SidepanelWidth`	Panel width: "default" (440px inset) or "full" (full viewport)
showOverlay	`boolean`	Whether to show the backdrop overlay (default: true)
nestedOpen	`boolean`	Whether a nested panel is currently open (triggers scale/shift effect)

SidepanelControls

Prop	Type	Default	Description
children(required)	`ReactNode`
className	`string`

SidepanelDescription

Prop	Type	Default	Description
className	`string`

SidepanelHeader

Prop	Type	Default	Description
variant	`SidepanelHeaderVariant`

SidepanelTitle

Prop	Type	Default	Description
className	`string`

Also exports

componentSidepanel
constsidepanelAnatomy
componentSidepanelBody
componentSidepanelClose
interfaceSidepanelCloseButtonProps
typeSidepanelContentProps
interfaceSidepanelControlsProps
componentSidepanelFooter
typeSidepanelHeaderProps
typeSidepanelHeaderVariant
componentSidepanelNestedRoot
typeSidepanelNestedRootProps
typeSidepanelProps
componentSidepanelTrigger
typeSidepanelWidth

Anatomy

Sidepanel

sidepanel

Root controlling open state for the slide-out panel

SidepanelTrigger

sidepanel-trigger

Element that opens the panel

SidepanelOverlay

sidepanel-overlay

Backdrop shown behind the panel in modal mode

SidepanelContent

sidepanel-content

The sliding panel surface

SidepanelHeader

sidepanel-header

Header area with title, description, and controls

SidepanelTitle

sidepanel-title

Panel heading

SidepanelDescription

sidepanel-description

Supporting summary beneath the title

SidepanelControls

sidepanel-controls

Left and right button clusters in the header

SidepanelBody

sidepanel-body

Scrollable main content region

SidepanelFooter

sidepanel-footer

Footer for primary actions

Composition

Builds on

Button, Stack