Beta
Animate UI

Sheet

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

Made by imskyleen
Edit on GitHub

Installation

Usage

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

Props

Radix UI

DocsAPI Reference

Shadcn UI

Docs

Animate UI props

SheetContent

PropTypeDefault
transition?
Transition
{ type: 'spring', stiffness: 150, damping: 25 }

Credits

  • We use Radix UI for the sheet component.
  • We take our inspiration from Shadcn UI for the sheet style.

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

On this page