Sheet

A panel that slides in from an edge. Same native <dialog> machinery as Dialog, pinned to one side — so it inherits the focus trap and Escape handling.

src/components/ui/sheet.tsx

About

From the component's own source, where it was written.

A panel that slides in from an edge — the same native <dialog> machinery as Dialog, pinned to one side instead of centred.

The entrance translates, which the kit's motion rule otherwise forbids. That rule is about hover and press feedback; a panel arriving from an edge needs to show where it came from, or it reads as a flash. It is disabled entirely under prefers-reduced-motion.

Install

npx astralyx-ui add sheet

Usage

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetBody } from '@/components/ui/sheet'

<Sheet>
  <SheetTrigger asChild><Button>Filters</Button></SheetTrigger>
  <SheetContent side="right">
    <SheetHeader><SheetTitle>Filters</SheetTitle></SheetHeader>
    <SheetBody>…</SheetBody>
  </SheetContent>
</Sheet>

Composer

Change the props and the source below follows.

Props

side

showClose

width

tsx

<SheetContent
  side="right"
>
  …
</SheetContent>

Examples

Every side

tsx

<SheetContent side="right" />

Custom width

tsx

<SheetContent side="right" width="32rem" />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Sheet`

A panel that slides in from an edge — the same native <dialog> machinery as Dialog, pinned to one side instead of centred.

Prop	Type	Default	Description
open	boolean	—	Controlled and uncontrolled open state.
defaultOpen	boolean	—	Controlled and uncontrolled open state.
onOpenChange	(open: boolean) => void	—	Fires on every change, including Escape.
dismissable	boolean	true	On the root: false refuses Escape and backdrop presses together, while the sheet's action is in flight.
children	ReactNode	required	—

`SheetTrigger`

Extends ComponentProps<'button'>.

Prop	Type	Default	Description
asChild	boolean	false	—

`SheetContent`

Extends ComponentProps<'dialog'>.

Prop	Type	Default	Description
side	Side	'right'	Which edge the panel is pinned to, and the direction it enters from.
showClose	boolean	true	Corner close button, and whether a backdrop press closes.
dismissable	boolean	true	Corner close button, and whether a backdrop press closes.
closeLabel	string	'Close'	Accessible name for the close button.
width	string	'min(24rem, 100vw - 2rem)'	Any CSS length. Applies to a left or right sheet.
height	string	—	Any CSS length, for a top or bottom sheet.

`SheetHeader`

Extends ComponentProps<'div'>.

`SheetTitle`

Extends ComponentProps<'h2'>.

`SheetDescription`

Extends ComponentProps<'p'>.

`SheetBody`

Extends ComponentProps<'div'>.

`SheetFooter`

Extends ComponentProps<'div'>.

`SheetClose`

Extends ComponentProps<'button'>.

Prop	Type	Default	Description
asChild	boolean	false	—

Types

Type	Definition	Description
`SheetSide`	'right' \| 'left' \| 'top' \| 'bottom'	—

Behaviour

Topic	Detail	Description
edges	no border	A sheet meets the viewport on three sides, so it draws no outline — a border would only be a line down the middle of the screen.