Sheet

A slide-out panel that can appear from any edge of the screen.

Install

npx @beaket/ui add sheet

Import

import { Sheet } from "@/components/ui/sheet"

Examples

States

export const AllStates = () => (
  <div className="flex flex-wrap gap-4">
    <Sheet trigger={<Button>Right (Default)</Button>}>
      <Sheet.Header>
        <Sheet.Title>Right Sheet</Sheet.Title>
        <Sheet.Description>Default position.</Sheet.Description>
      </Sheet.Header>
      <Sheet.Footer>
        <Sheet.Close>
          <Button variant="outline">Close</Button>
        </Sheet.Close>
      </Sheet.Footer>
    </Sheet>

    <Sheet side="left" trigger={<Button variant="outline">Left</Button>}>
      <Sheet.Header>
        <Sheet.Title>Left Sheet</Sheet.Title>
        <Sheet.Description>Slides from left.</Sheet.Description>
      </Sheet.Header>
      <Sheet.Footer>
        <Sheet.Close>
          <Button variant="outline">Close</Button>
        </Sheet.Close>
      </Sheet.Footer>
    </Sheet>

    <Sheet side="top" trigger={<Button variant="outline">Top</Button>}>
      <Sheet.Header>
        <Sheet.Title>Top Sheet</Sheet.Title>
        <Sheet.Description>Slides from top.</Sheet.Description>
      </Sheet.Header>
      <Sheet.Footer>
        <Sheet.Close>
          <Button variant="outline">Close</Button>
        </Sheet.Close>
      </Sheet.Footer>
    </Sheet>

    <Sheet side="bottom" trigger={<Button variant="outline">Bottom</Button>}>
      <Sheet.Header>
        <Sheet.Title>Bottom Sheet</Sheet.Title>
        <Sheet.Description>Slides from bottom.</Sheet.Description>
      </Sheet.Header>
      <Sheet.Footer>
        <Sheet.Close>
          <Button variant="outline">Close</Button>
        </Sheet.Close>
      </Sheet.Footer>
    </Sheet>

    <Sheet preventClose trigger={<Button variant="stark">Prevent Close</Button>}>
      <Sheet.Header>
        <Sheet.Title>Cannot Dismiss</Sheet.Title>
        <Sheet.Description>Must use buttons to close.</Sheet.Description>
      </Sheet.Header>
      <Sheet.Footer>
        <Sheet.Close>
          <Button>Got it</Button>
        </Sheet.Close>
      </Sheet.Footer>
    </Sheet>

    <Sheet fullScreen side="left" trigger={<Button variant="success">Full Screen</Button>}>
      <Sheet.Header>
        <Sheet.Title>Full Screen Sheet</Sheet.Title>
        <Sheet.Description>Takes up full width.</Sheet.Description>
      </Sheet.Header>
      <Sheet.Footer>
        <Sheet.Close>
          <Button variant="outline">Close</Button>
        </Sheet.Close>
      </Sheet.Footer>
    </Sheet>
  </div>
);

Props

Name	Type	Default	Description
preventClose	boolean \| undefined	false	When true, prevents closing the sheet via ESC key or clicking outside.
hideCloseButton	boolean \| undefined	false	When true, hides the X close button in the top-right corner. Useful with preventClose when you want users to use only action buttons.
trigger	ReactNode	—	Element that opens the sheet when clicked. Optional - if not provided, sheet must be controlled via open/onOpenChange props.
children	ReactNode	—	Sheet content including Header, Description, Footer, and custom elements
open	boolean \| undefined	—	Controlled open state of the sheet
onOpenChange	((open: boolean) => void) \| undefined	—	Callback when the open state changes
closeWhen	unknown	—	When this value becomes truthy, automatically close the sheet.
side	undefined \| left \| right \| top \| bottom	right	left \| right \| top \| bottom. Side from which the sheet slides in
fullScreen	boolean \| undefined	false	When true, the sheet takes up the full width (for left/right sides). Useful for mobile navigation menus.