edbnedbn/ui
Get Started
WelcomeChangelogLicenseOverview
Components
ButtonAlert DialogPopoverDropdown Menu
Motion
Motion ProviderSpring PresetsHooks
Components
Blocks
HomeDocsComponentsSheet

On this page

Sheet

A slide-out panel with drag-to-dismiss, spring animations, and Modern drag handle. Built on Radix UI Dialog with Motion gesture support.

Source Code

Copy and paste the following code into your project.

Installation

This will also install: motion-provider, icons

Terminal
npx shadcn@latest add https://ui.edbn.me/r/sheet.json

Sides

Sheets can slide in from any edge of the screen.

Drag to Dismiss

Bottom and top sheets include an Modern drag handle for gesture dismissal.

Animation Control

Disable animations for accessibility or performance.

Custom Close Button

Hide the default close button and use your own.

TypeScript
<SheetContent showCloseButton={false}>
  <SheetHeader>
    <div className="flex items-center justify-between">
      <SheetTitle>Custom Close</SheetTitle>
      <SheetClose asChild>
        <Button variant="ghost" size="icon-sm">
          <XIcon className="h-4 w-4" />
        </Button>
      </SheetClose>
    </div>
  </SheetHeader>
</SheetContent>

API Reference

Sheet

PropTypeDefaultDescription
openboolean—Controlled open state
onOpenChange(open: boolean) => void—Callback when state changes
disableAnimationbooleanfalseDisable motion animations
enableDragbooleantrueEnable drag gesture to dismiss

SheetContent

PropTypeDefaultDescription
side"top" | "right" | "bottom" | "left""right"Edge to slide in from
showDragHandlebooleantrueShow Modern drag handle
showCloseButtonbooleantrueShow close button

Accessibility

Modal dialog pattern with focus trap and screen reader announcements.

Keyboard

TabNavigate through sheet content
⇧+Tab
Navigate backwards
EscClose sheet

Screen Readers

• role="dialog" with aria-modal

• Title linked via aria-labelledby

• Description via aria-describedby

Focus Management

Focus trapping
Focus stays inside the sheet while it's open.
Outside clicks blocked
Pointer events are disabled outside the sheet overlay.
Focus restoration
On close, focus returns to the element that opened the sheet.

Drag Physics

Drag-to-dismiss uses velocity detection (threshold: 500px/s) for natural feel. Users can either drag past a position threshold or flick quickly to dismiss.