edbnedbn/ui
Get Started
WelcomeChoosing a VariantChangelogLicense
Components
OverviewButtonAlert DialogPopoverDropdown MenuPull Down MenuSheet
Motion Utilities
Motion ProviderSpring PresetsHooks
0installs
Components
BlocksMaps
HomeDocsComponentsAnimatedSheet

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.

Usage

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
} from "@/components/ui/animated/sheet"
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Title</SheetTitle>
      <SheetDescription>Description</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Installation

Examples

Basic Sheet

A standard sheet with header, body, and footer.

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.