Sheet

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

$ npx @beaket/ui add sheet

Source

import { useState } from "react";

import { Button } from "@/components/ui/button";

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

const args = {
  trigger: <Button>Open Sheet</Button>,
  children: (
    <>
      <Sheet.Header>
        <Sheet.Title>Sheet Title</Sheet.Title>
        <Sheet.Description>
          This is a sheet description that provides additional context.
        </Sheet.Description>
      </Sheet.Header>
      <div className="py-4">
        <p className="text-fg-muted text-sm">Sheet content goes here.</p>
      </div>
      <Sheet.Footer>
        <Sheet.Close>
          <Button variant="outline">Cancel</Button>
        </Sheet.Close>
        <Button>Save</Button>
      </Sheet.Footer>
    </>
  ),
};

export default function Example() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <Sheet {...args} />
    </div>
  );
}

Examples

All States

Source

import { useState } from "react";

import { Button } from "@/components/ui/button";

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

export default () => (
  <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="outline">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
size	undefined \| sm \| md \| lg \| xl \| full	md	Width preset for left/right sheets; className can override it. Defaults to md.
closeLabel	string \| undefined	Close sheet	Accessible name of the built-in close button.
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
side	undefined \| left \| right \| top \| bottom	right	left \| right \| top \| bottom. Edge the sheet is anchored to
fullScreen	boolean \| undefined	false	When true, the sheet takes up the full width (for left/right sides). Useful for mobile navigation menus.