Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Preview

Code

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/sheet

Anatomy

Single import

Multiple imports

import { Button } from "~/components/ui/button";
import { Sheet } from "~/components/ui/sheet";

<Sheet.Root>
  <Button>Trigger</Button>

  <Sheet.Overlay>
    <Sheet.Modal>
      <Sheet.Content>
        <Sheet.Header>
          <Sheet.Title />
          <Sheet.Description />
        </Sheet.Header>

        <Sheet.Footer>
          <Button slot="close" />
        </Sheet.Footer>

        <Sheet.Close />
      </Sheet.Content>
    </Sheet.Modal>
  </Sheet.Overlay>
</Sheet.Root>;

Examples

Side

Use the side prop on <Sheet.Modal> to indicate the edge of the screen where the component will appear. The values can be top, right, bottom, or left.

Preview

Code

API Reference

Sheet.Root

Prop	Type	Default
`children`	`ReactNode`
`isOpen`	`boolean`
`defaultOpen`	`boolean`
`onOpenChange`	`function`

Sheet.Overlay

Prop	Type	Default
`children`	`ReactNode`
`isBlurred`	`boolean`	`false`
`isDismissable`	`boolean`	`true`
`isKeyboardDismissDisabled`	`boolean`
`className`	`string`

Sheet.Modal

Prop	Type	Default
`children`	`ReactNode`
`side`	`enum`	`"right"`
`className`	`string`

Sheet.Content

Prop	Type	Default
`children`	`ReactNode`
`role`	`enum`	`"dialog"`
`className`	`string`

Sheet.Header

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Sheet.Title

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Sheet.Description

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Sheet.Footer

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Sheet.Close

Prop	Type	Default
`className`	`string`

Separator Skeleton

On This Page

Installation
Anatomy
Examples
Side
API Reference
Sheet.Root
Sheet.Overlay
Sheet.Modal
Sheet.Content
Sheet.Header
Sheet.Title
Sheet.Description
Sheet.Footer
Sheet.Close

Contribute