Sections

Utilities

Forms

Hooks

useIsMobileNew

Sheet

Content that slides in from the screen edge.

Installation


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>

Sides

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

Examples

Inset Variant

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

With Scroll

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

No Close Button

Use the showCloseButton prop to hide the close button in the top right corner.

Close behavior

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

Use modal={false} to allow interaction with elements outside the sheet. Disables focus trapping and scroll prevention.

Custom spacing

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

Default spacing is --spacing(6).

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" \| "top" \| "bottom"`	`"right"`
`variant`	`"default" \| "inset"`	`"default"`
`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" \| "top" \| "bottom"`	`-`
`variant`	`"default" \| "inset"`	`"default"`
`className`	`string`	`-`

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

Separator

Sidebar