Sheet Stack

ProNew

Push-and-pop navigation inside a sheet, drawer or any box, with a Back button named after the previous page, focus on the new heading and Escape to step back.

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 for a settings sheet or a picker with a second level: Settings, then Notifications, then Email digest, all without leaving the sheet.

Do not use it for a deep hierarchy (that is a page route) or for a linear flow with steps (use a stepper).

Installation


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

Usage

Props

Part	Prop	Type	Default	Description
`SheetStack`	`initial`	`string`	`required`	Id of the first page.
`SheetStackPage`	`id / title`	`string`	`required`	A page; `title` is its heading and the next page's Back label.
`-`	`useSheetStack()`	`{ push, pop, reset, canGoBack, current }`	`-`	Navigate from any child.

Keyboard

Tab: reach Back and the page content.
Escape: go back one page (at the first page it closes the sheet).

Accessibility

On every move, focus goes to the new page's heading (tabindex -1) and the title is announced in a polite status region.
The Back button is named Back to {previous page}.
Escape steps back one page and stops there; at the first page it passes through, so the surrounding sheet closes.
The slide follows the text direction and is removed with prefers-reduced-motion.

Testing

The component ships with a Testing Library test (sheet-stack.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 for a settings sheet or a picker with a second level: Settings, then Notifications, then Email digest, all without leaving the sheet.

Do not use it for a deep hierarchy (that is a page route) or for a linear flow with steps (use a stepper).

Installation


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

Usage

Props

Part	Prop	Type	Default	Description
`SheetStack`	`initial`	`string`	`required`	Id of the first page.
`SheetStackPage`	`id / title`	`string`	`required`	A page; `title` is its heading and the next page's Back label.
`-`	`useSheetStack()`	`{ push, pop, reset, canGoBack, current }`	`-`	Navigate from any child.

Keyboard

Tab: reach Back and the page content.
Escape: go back one page (at the first page it closes the sheet).

Accessibility

On every move, focus goes to the new page's heading (tabindex -1) and the title is announced in a polite status region.
The Back button is named Back to {previous page}.
Escape steps back one page and stops there; at the first page it passes through, so the surrounding sheet closes.
The slide follows the text direction and is removed with prefers-reduced-motion.