Side Sheet

Pro

Side panel for tablets that grows out of the row you tapped or follows your finger in from the edge, as the screen behind shifts and dims. Drag its edge to choose one of three widths, or swipe it away.

Preview

Installation

npx @lumioui/cli add pro/side-sheet

Usage

import { SideSheetScene, SideSheet } from "@/components/ui/side-sheet/side-sheet";
<SideSheet />

Also exported: SideSheetScene.

API reference

SideSheet

Prop Type Default
open* boolean —
onOpenChange* (open: boolean) => void —
regular* number —
wide* number } —
origin SideSheetOrigin | null

The touched element's window frame (e.g. from measureInWindow).

 —
width number

Fixed width in pt — turns resizing off.

 —
widths { compact: number

Detent widths in pt. Default compact 320 · regular 400 · wide 520 (each capped to leave the page a strip beside the panel).

 —
detent SideSheetDetent

Controlled width detent.

 —
defaultDetent SideSheetDetent

Uncontrolled starting detent. Default "regular".

 "regular"
onDetentChange (detent: SideSheetDetent) => void —
resizable boolean

Drag the leading edge to resize. Default true (tablet widths only).

 true
edgeSwipe boolean

Swipe in from the right edge of the surrounding SideSheetScene. Default true.

 true
phoneBreakpoint number

Below this window width the panel is a full-width phone sheet. Default 600.

 600
children React.ReactNode —
className string —

SideSheetScene

Prop Type Default
className string —
parallax number

Share of the panel's width the scene shifts left by. Default 0.16.

 PARALLAX