Config

Pass configuration to createStacksheet():

const { StacksheetProvider, useSheet } = createStacksheet({
  side: "right",
  width: 480,
  spring: "snappy",
  closeOnEscape: true,
});

Options

Option	Type	Default	Description
`maxDepth`	`number`	`Infinity`	Maximum stack depth
`closeOnEscape`	`boolean`	`true`	Close on ESC key
`closeOnBackdrop`	`boolean`	`true`	Close on backdrop click
`showOverlay`	`boolean`	`true`	Show backdrop overlay
`lockScroll`	`boolean`	`true`	Lock body scroll when open
`width`	`number`	`420`	Panel width in px
`maxWidth`	`string`	`"90vw"`	Maximum panel width (CSS value)
`breakpoint`	`number`	`768`	Mobile breakpoint in px
`side`	`SideConfig`	`{ desktop: "right", mobile: "bottom" }`	Sheet slide-from side
`stacking`	`Partial<StackingConfig>`	—	Stacking visual parameters
`spring`	`SpringPreset \| Partial<SpringConfig>`	`"stiff"`	Spring animation config
`zIndex`	`number`	`100`	Base z-index
`ariaLabel`	`string`	`"Sheet dialog"`	Default aria-label for dialog panels
`onOpenComplete`	`() => void`	—	Called when top panel entrance animation completes
`onCloseComplete`	`(reason: CloseReason) => void`	—	Called when last panel exit animation completes. See Callbacks.
`drag`	`boolean`	`true`	Enable drag-to-dismiss
`closeThreshold`	`number`	`0.25`	Fraction of panel to trigger close (0–1)
`velocityThreshold`	`number`	`0.5`	Velocity in px/ms to trigger close
`dismissible`	`boolean`	`true`	Master switch for dismissal (drag + backdrop + escape)
`modal`	`boolean`	`true`	Modal mode (overlay + scroll lock + focus trap)
`shouldScaleBackground`	`boolean`	`false`	Scale `[data-stacksheet-wrapper]` when open
`scaleBackgroundAmount`	`number`	`0.97`	Background scale factor

Side

Controls which edge the sheet slides from.

A string applies to all viewports. An object sets different sides for desktop and mobile:

// Always right
createStacksheet({ side: "right" });

// Right on desktop, bottom on mobile (default)
createStacksheet({ side: { desktop: "right", mobile: "bottom" } });

// Left sidebar
createStacksheet({ side: "left" });

Available sides: "left" | "right" | "bottom"

Stacking

Controls the Apple-style depth effect when sheets are stacked:

Option	Default	Description
`scaleStep`	`0.04`	Scale reduction per depth level
`offsetStep`	`16`	Pixel offset per depth level (shifts panels away from the stack edge)
`opacityStep`	`0`	Opacity reduction per depth level
`radius`	`12`	Border radius on stacked panels in px
`renderThreshold`	`3`	Max depth before content stops rendering

createStacksheet({
  stacking: { scaleStep: 0.06, opacityStep: 0.1, radius: 14 },
});

Springs

Spring presets control animation feel. Pass a preset name or a custom config:

Preset	Stiffness	Damping	Mass	Feel
`"subtle"`	300	30	1	Barely noticeable bounce
`"snappy"`	400	28	0.8	Quick, responsive
`"stiff"`	400	40	1	Default. Very quick, controlled

// Preset
createStacksheet({ spring: "snappy" });

// Custom
createStacksheet({
  spring: { stiffness: 300, damping: 25, mass: 0.9 },
});

The same spring drives all animations — entrance, stacking transforms, and exit — so everything feels cohesive.

Drag

Sheets can be dismissed by dragging them in the direction they came from. Enabled by default. See Drag to Dismiss for the full gesture pipeline, data attributes, and handle-only patterns.

createStacksheet({ drag: false }); // disable drag only
createStacksheet({ dismissible: false }); // disable all dismissal

Set modal: false to skip the backdrop overlay, focus trap, and scroll lock. See Non-Modal Mode for the comparison table and use cases.

createStacksheet({ modal: false });

Snap points

Bottom sheets can snap to predefined heights instead of only fully open or fully closed. See Snap Points for the full API and examples.

createStacksheet({
  side: "bottom",
  snapPoints: [0.25, 0.5, 1],
});

Body scale

Scale down your page content when sheets open for an iOS-style depth effect. See Body Scale Effect for setup and wrapper placement.

createStacksheet({ shouldScaleBackground: true });

Config

On this page