Animate UI

Sheet

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

Made by imskyleen
Edit on GitHub
Open in

Installation

Usage

<Sheet>
  <SheetTrigger>Open Sheet</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Sheet Title</SheetTitle>
      <SheetDescription>Sheet Description</SheetDescription>
    </SheetHeader>
    <p>Sheet Content</p>
    <SheetFooter>
      <button>Accept</button>
    </SheetFooter>
  </SheetContent>
</Sheet>

API Reference

Sheet

Animate UI API Reference - Sheet PrimitiveRadix UI API Reference - Dialog.Root

SheetTrigger

Animate UI API Reference - SheetTrigger PrimitiveRadix UI API Reference - Dialog.Trigger

SheetContent

Animate UI API Reference - SheetContent PrimitiveRadix UI API Reference - Dialog.Content
PropTypeDefault
showCloseButton?
boolean
true
side?
'top' | 'bottom' | 'left' | 'right'
right
transition?
Transition
{ type: 'spring', stiffness: 150, damping: 22 }
...props?
HTMLMotionProps<"div">
-

The asChild and forceMount properties are not supported in the SheetContent component, as it is used for animation.

SheetClose

Animate UI API Reference - SheetClose PrimitiveRadix UI API Reference - Dialog.Close

SheetHeader

Animate UI API Reference - SheetHeader Primitive
PropTypeDefault
...props?
React.ComponentProps<'div'>
-

SheetTitle

Animate UI API Reference - SheetTitle PrimitiveRadix UI API Reference - Dialog.Title

SheetDescription

Animate UI API Reference - SheetDescription PrimitiveRadix UI API Reference - Dialog.Description

SheetFooter

Animate UI API Reference - SheetFooter Primitive
PropTypeDefault
...props?
React.ComponentProps<'div'>
-

Credits

Built by Skyleen. The source code is available on GitHub.