Sheet

Slide-over panel that enters from any edge of the screen. Built on Radix UI Dialog.

Default (Right)

A sheet that slides in from the right side.

Left Side

A sheet sliding in from the left, useful for navigation.

A sheet with header, content, and action footer.

Installation

npx visor add sheet

This copies two files into your project:

components/ui/sheet/sheet.tsx — the component
components/ui/sheet/sheet.module.css — the styles

Usage

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

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open</Button>
  </SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Title</SheetTitle>
      <SheetDescription>Description.</SheetDescription>
    </SheetHeader>
    {/* content */}
    <SheetFooter>
      <Button>Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

API Reference

SheetProps

No props data available for “sheet”.

Sub-components

Component	Element	Purpose
`Sheet`	-- (Radix Root)	Root component managing open/close state.
`SheetTrigger`	`<button>`	Element that opens the sheet on click.
`SheetContent`	`<div>` (portal)	The sliding panel with overlay and close button.
`SheetHeader`	`<div>`	Container for title and description.
`SheetFooter`	`<div>`	Container for action buttons at the bottom.
`SheetTitle`	`<h2>`	Accessible sheet heading.
`SheetDescription`	`<p>`	Secondary descriptive text.
`SheetClose`	`<button>`	Explicit close trigger.
`SheetOverlay`	`<div>`	Background overlay behind the sheet.

Accessibility

Built on @radix-ui/react-dialog — shares the same a11y model as Dialog.
Focus is trapped inside the sheet while open.
Escape key closes the sheet; clicking the overlay also dismisses it.
SheetTitle provides the accessible label via aria-labelledby.
The side variants (top, right, bottom, left) control slide direction.