SidePanel

Show details or supporting content from the right in overlay or inline mode while retaining page context.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use SidePanel for details or supporting content that opens and closes, either floating or inline. For a permanently visible notifications, activity, or contacts column, use a page aside; its position on the right alone does not call for SidePanel.

Bind open to control visibility and placement to choose floating or inline. width is bindable and constrained by minWidth and maxWidth.
children provides the scrollable content. Set one owner for inline movement with inlineMotionOwner so the page and component do not both move the panel.
When title is omitted, the toolbar title and panel accessible name follow LocaleProvider. An explicit title, including an empty string, and business content remain unchanged.

Import

import { SidePanel } from '@snowui-design-system/components';

Usage

Backdrop

Toolbars

Dismissal

API Reference

Property	Type	Default	Example	Description
`open`	`boolean`	`false`	`open`	Whether the panel is visible; supports bind:open.
`placement`	`SidePanelPlacement`	`"floating"`	`placement={value}`	Show as a floating layer or inline on the right side of the page; supports bind:placement.
`width`	`number`	`460`	`width={42}`	Panel width; supports bind:width.
`minWidth`	`number`	`320`	`minWidth={42}`	Minimum width allowed when dragging the panel edge.
`maxWidth`	`number`	`720`	`maxWidth={42}`	Maximum width allowed when dragging the panel edge.
`inlineMotionOwner`	`"component" \| "layout"`	`"component"`	`inlineMotionOwner="component"`	Owner of inline placement motion. The component fallback is component. For the floating-to-docked layout integration described here, set layout and use the layout helper with a persistent rail.
`showTopToolbar`	`boolean`	`true`	`showTopToolbar`	Whether to show the fixed top toolbar; its built-in buttons cannot be replaced individually.
`editable`	`boolean`	`false`	`editable`	Whether content is editable. true shows the default bottom toolbar buttons.
`showBottomToolbar`	`boolean`	`—`	`showBottomToolbar`	Explicitly show or hide the bottom toolbar. By default it appears when editable or when any bottom toolbar customization is supplied.
`bottomLeading`	`Snippet`	`—`	`bottomLeading={bottomLeadingContent}`	Replace the entire left group of the bottom toolbar. Supplying it also shows the toolbar.
`bottomTrailing`	`Snippet`	`—`	`bottomTrailing={bottomTrailingContent}`	Replace the entire right group of the bottom toolbar. Supplying it also shows the toolbar.
`bottomLeadingActions`	`SidePanelToolbarAction[]`	`—`	`bottomLeadingActions={bottomLeadingActions}`	Built-in action data for the left group. Supplying it shows the bottom toolbar. Ignored when bottomLeading is provided. In editable mode, the default actions are Copy and Delete.
`bottomTrailingActions`	`SidePanelToolbarAction[]`	`—`	`bottomTrailingActions={bottomTrailingActions}`	Built-in action data for the right group. Supplying it shows the bottom toolbar. Ignored when bottomTrailing is provided. In editable mode, the default actions are Cancel and Save.
`title`	`string`	`—`	`title="Example"`	Top-toolbar title and panel accessible name. When omitted, sidePanel.title provides the localized title (“Details” in en-US). An explicit empty string is preserved.
`showTitle`	`boolean`	`false`	`showTitle={true}`	Whether to display the toolbar title. Hiding it preserves the accessible name and toolbar buttons.
`backdrop`	`DialogBackdrop \| false`	`false`	`backdrop={value}`	Floating backdrop shared with Dialog; ignored in inline mode.
`closeOnEscape`	`boolean`	`true`	`closeOnEscape`	Close the panel when Escape is pressed.
`closeOnOutside`	`boolean`	`true`	`closeOnOutside`	Close the panel when clicking outside SidePanel.
`onOpenChange`	`(open: boolean) => void`	`—`	`onOpenChange={(value) => { /* handle value */ }}`	Callback after the open state changes.
`onPlacementChange`	`(placement: SidePanelPlacement) => void`	`—`	`onPlacementChange={(value) => { /* handle value */ }}`	Callback after switching between floating and inline placement.
`onPrevious`	`() => void \| Promise<void>`	`—`	`onPrevious={(value) => { /* handle value */ }}`	Callback after the Previous action in the top toolbar.
`onNext`	`() => void \| Promise<void>`	`—`	`onNext={(value) => { /* handle value */ }}`	Callback after the Next action in the top toolbar.
`onCopy`	`() => void \| Promise<void>`	`—`	`onCopy={(value) => { /* handle value */ }}`	Callback after the default Copy action in the bottom toolbar.
`onDelete`	`() => void \| Promise<void>`	`—`	`onDelete={(value) => { /* handle value */ }}`	Callback after the default Delete action in the bottom toolbar.
`onClose`	`() => void \| Promise<void>`	`—`	`onClose={(value) => { /* handle value */ }}`	Callback before the panel closes.
`children`	`Snippet`	`—`	`<SidePanel>Content</SidePanel>`	Scrollable panel content, supplied by the caller for details or editing.
`parts`	`ComponentPartsOf<{ Button: typeof Button; Indicator: typeof Indicator; }>`	`—`	`parts={partsOptions}`	Configure the built-in toolbar Button and full-edge resize handle. Full part Props, including class and style, reach default instances; explicit children, bottomLeading, and bottomTrailing content does not inherit them.