Skip to content
Components

Sidepanel

Root component for a sidepanel. Wraps Base UI 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, SidepanelScroll, SidepanelTitle, SidepanelTrigger, SidepanelWidth } from "@instruments/materia-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

SidepanelClose

PropTypeDefaultDescription
classNamestring

SidepanelCloseButton

PropTypeDefaultDescription
aria-labelstring

Accessible label. Defaults to "Close panel".

renderuseRender.RenderProp<Record<string, unknown>> | undefined

Replace the rendered <button> with another element or component (e.g. <Link href="…" />); styling, decorations and props are applied to it.

tone"neutral" | "brand" | "danger" | null | undefined
radius"rounded" | "square" | "full" | null | undefined
dotstring | undefined

CSS colour for a status dot; empty/undefined renders no dot.

loadingboolean | undefinedfalse

Show a spinner and block presses. The button stays focusable (it is aria-disabled, not natively disabled) so keyboard focus is kept.

squareboolean | null | undefined
asInputboolean | null | undefined
align"center" | "end" | "start" | null | undefined
pressedboolean | null | undefined
testIdstring
suffixIconIconComponent | undefined

Trailing icon (Lucide or SVG component) rendered at the end.

expandableboolean | undefinedfalse

Icon-only at rest; expands on hover/focus-visible to reveal the label to the right of the icon. Collapsed geometry equals the matching icon-* size, expanded equals the text button of that size - so pass a text size (sm/base/lg) OR its icon twin (icon-sm …); both resolve identically. Requires both icon and children; ignored with square. The label stays in the DOM in both states (stable accessible name).

focusedboolean | undefined

Force the focus ring on - for documentation/testing only.

hoveredboolean | undefined

Force the hover state on - for documentation/testing only.

loadingLabelstring | undefined

Label shown in place of children while loading.

iconClassNamestring | undefined

Extra classes for the leading icon.

suffixIconClassNamestring | undefined

Extra classes for the trailing icon.

dotPlacement"end" | "start" | undefined"start"

Dot position relative to content.

SidepanelContent

PropTypeDefaultDescription
titlestring

The panel's accessible name when it renders no visible SidepanelTitle. A mounted SidepanelTitle takes over, so the panel never has two titles.

classNamestring

Extra classes for the panel surface.

openboolean

Whether the sidepanel is open (required for exit animations)

widthSidepanelWidth

Panel width: "default" (440px inset) or "full" (full viewport)

showOverlayboolean

Whether to show the backdrop overlay (default: true). Hiding it also stops outside presses from dismissing the panel.

nestedOpenboolean

Whether a nested panel is currently open (triggers scale/shift effect)

SidepanelControls

PropTypeDefaultDescription
children(required)ReactNode
classNamestring

SidepanelDescription

PropTypeDefaultDescription
classNamestring

SidepanelHeader

PropTypeDefaultDescription
variantSidepanelHeaderVariant

SidepanelTitle

PropTypeDefaultDescription
classNamestring

Also exports

  • componentSidepanel
  • constsidepanelAnatomy
  • componentSidepanelBody
  • interfaceSidepanelCloseButtonProps
  • typeSidepanelContentProps
  • interfaceSidepanelControlsProps
  • componentSidepanelFooter
  • typeSidepanelHeaderProps
  • typeSidepanelHeaderVariant
  • componentSidepanelNestedRoot
  • typeSidepanelNestedRootProps
  • typeSidepanelProps
  • componentSidepanelScroll
  • 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, Flex, Stack