Component

Sheet

A panel that slides in from any edge of the screen, rendered through a portal with focus management, an Escape-to-close handler, and ARIA dialog wiring.

Basic

Compose a SheetTrigger with SheetContent. State is managed for you; click the backdrop, press Escape, or use a SheetClose to dismiss.

Installation

$pnpm add @refraction-ui/react-sheet

Usage

tsx

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
  SheetClose,
} from '@refraction-ui/react'

export function MyComponent() {
  return (
    <Sheet>
      <SheetTrigger>Open</SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>Make changes, then save.</SheetDescription>
        </SheetHeader>
        <SheetFooter>
          <SheetClose>Cancel</SheetClose>
          <SheetClose>Save changes</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

Sides

Pass side to slide in from top, right, bottom, or left.

Sheet props

Prop	Type	Default	Description
`open`	`boolean`	--	Controlled open state. Pair with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Initial open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	--	Called whenever the open state changes.
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'right'`	Edge the sheet slides in from. Overridable per `SheetContent`.
`modal`	`boolean`	`true`	Marks the content as a modal dialog for assistive tech.
`children`	`React.ReactNode`	--	Trigger and content compound components.

SheetContent props

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	--	Overrides the side set on the parent `Sheet`.
`withOverlay`	`boolean`	`true`	Renders a backdrop and closes the sheet on outside click.
`className`	`string`	--	Additional CSS classes for the content panel.