Persistent Sheet

ProNew

A non-modal panel that stays at the bottom edge and is dragged between snap heights while the content behind it stays usable, as in a maps app.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it when the sheet is part of the screen, not an interruption: a map with a results list, a player with a queue, a store locator.

Do not use it for tasks that need full attention (use a Bottom Sheet) or when the content behind should not be touched.

Installation


pnpm dlx shadcn@latest add @tealmac-pro/persistent-sheet

Usage

Props

Part	Prop	Type	Default	Description
`PersistentSheet`	`label`	`string`	`required`	Accessible name of the region.
`PersistentSheet`	`snapPoints`	`number[]`	`[0.18, 0.5, 0.92]`	Heights as fractions of the container, ascending.
`PersistentSheet`	`snap / defaultSnap / onSnapChange`	`number`	`0`	Snap index.

Keyboard

Up / Down on the handle: next or previous snap point. Home / End: lowest or highest.
Tab: continue into the panel and out to the page.

Accessibility

A labelled region, not a dialog: no focus trap, no overlay, no inert background, so the page behind stays operable.
The handle is a focusable separator with a spoken height; arrow keys move between snap points.
Only the highest snap point scrolls the content; lower ones are dragged.
Transitions are removed with prefers-reduced-motion.

Testing

The component ships with a Testing Library test (persistent-sheet.test.tsx). jsdom has no touch or layout, so the test drives the component through its keyboard and pointer-free paths and checks roles, names and state.

Guide and examples

When to use it

Use it when the sheet is part of the screen, not an interruption: a map with a results list, a player with a queue, a store locator.

Do not use it for tasks that need full attention (use a Bottom Sheet) or when the content behind should not be touched.

Installation


pnpm dlx shadcn@latest add @tealmac-pro/persistent-sheet

Usage

Props

Part	Prop	Type	Default	Description
`PersistentSheet`	`label`	`string`	`required`	Accessible name of the region.
`PersistentSheet`	`snapPoints`	`number[]`	`[0.18, 0.5, 0.92]`	Heights as fractions of the container, ascending.
`PersistentSheet`	`snap / defaultSnap / onSnapChange`	`number`	`0`	Snap index.

Keyboard

Up / Down on the handle: next or previous snap point. Home / End: lowest or highest.
Tab: continue into the panel and out to the page.

Accessibility

A labelled region, not a dialog: no focus trap, no overlay, no inert background, so the page behind stays operable.
The handle is a focusable separator with a spoken height; arrow keys move between snap points.
Only the highest snap point scrolls the content; lower ones are dragged.
Transitions are removed with prefers-reduced-motion.