Sections

Components

Utilities

Forms

Hooks

useIsMobile

Sheet

Copy Markdown

Content that slides in from the screen edge.

Docs API

PreviewCode

Open

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/sheet

Anatomy#

Sheet
├── SheetTrigger
└── SheetContent
    ├── SheetHeader
    │ ├── SheetTitle
    │ └── SheetDescription
    ├── SheetBody
    └── SheetFooter
        └── SheetClose

Usage#

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

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Sheet Title</SheetTitle>     
      <SheetDescription>Sheet Description</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Controlled#

Use open and onOpenChange on the root to control the sheet state.

PreviewCode

Open ControlledOpen Uncontrolled

Sides#

Control which side the sheet slides in from using the side prop.

PreviewCode

RightLeftBottom

Examples#

Inset Variant#

Use the variant="inset" prop to add padding. The sheet appears as a floating card.

PreviewCode

Open

Scrollable#

Use SheetBody to make the content area scrollable while keeping header and footer fixed.

PreviewCode

Open

No Close Button#

Use the showCloseButton={false} prop to hide the close button in the top right corner.

PreviewCode

Open

Close behavior#

Use closeOnInteractOutside and closeOnEscape props to prevent closing on outside click and escape.

PreviewCode

No close on outside clickNo close on Escape

Use modal={false} to allow interaction with elements outside the sheet.

PreviewCode

Open

Custom spacing#

Use [--space:--spacing("value")] on SheetContent to adjust internal padding.

Default spacing is --spacing(6).

PreviewCode

Open

You can use breakpoint utilities to change the internal spacing at different screen sizes.

md:[--space:--spacing(6)] lg:[--space:--spacing(8)]

API Reference#

Sheet#

Root component. Uses Ark UI Dialog. Controls open state and slide direction.

Prop	Type	Default
`open`	`boolean`	`-`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`({ open }: OpenChangeDetails) => void`	`-`
`modal`	`boolean`	`true`
`closeOnEscape`	`boolean`	`true`
`closeOnInteractOutside`	`boolean`	`true`
`initialFocusEl`	`() => MaybeElement`	`-`
`finalFocusEl`	`() => MaybeElement`	`-`
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	`-`
`onInteractOutside`	`(event: InteractOutsideEvent) => void`	`-`
`className`	`string`	`-`

SheetTrigger#

Opens the sheet on click. Use asChild for custom triggers.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	`-`

SheetContent#

Holds the sheet panel. Slides in from the configured edge.

Prop	Type	Default
`side`	`"right"	"left"
`variant`	`"default"	"inset"`
`showCloseButton`	`boolean`	`true`
`className`	`string`	`-`

Attribute	Default
`--space`	`--spacing(6)`

SheetHeader#

Header area for title and description.

Prop	Type	Default
`title`	`string`	`-`
`description`	`string`	`-`
`className`	`string`	`-`

SheetBody#

Scrollable body content. Uses ScrollArea for overflow.

Prop	Type	Default
`scrollFade`	`boolean`	`false`
`className`	`string`	`-`

SheetFooter#

Footer area for action buttons.

Prop	Type	Default
`className`	`string`	`-`

SheetTitle#

Accessible title. Announced to screen readers.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	`-`

SheetDescription#

Accessible description. Announced to screen readers.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	`-`

SheetClose#

Closes the sheet on click.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	`-`

SheetOverlay#

Dimmed overlay behind the sheet.

Prop	Type	Default
`className`	`string`	`-`

SheetPositioner#

Positioning wrapper for sheet content. Used internally; expose for custom layouts.

Prop	Type	Default
`side`	`"right"	"left"
`variant`	`"default"	"inset"`
`className`	`string`	`-`

For a complete list of props, see the Ark UI documentation.

[

Separator ](/docs/components/separator)[

Sidebar ](/docs/components/sidebar)

On This Page

Installation Anatomy Usage Controlled Sides Examples Inset Variant Scrollable No Close Button Close behavior Non-Modal Custom spacing API Reference Sheet SheetTrigger SheetContent SheetHeader SheetBody SheetFooter SheetTitle SheetDescription SheetClose SheetOverlay SheetPositioner