Skip to main content

Starwind UI v1.9 is now available!

On this page

Sheet

Edit Profile

Make changes to your profile here. Click save when you’re done.

Installation

Usage

General Notes

Sheets are slide-out panels that can extend from any edge of the screen. They’re built on top of the Dialog component and are great for forms and mobile navigation menus.

The essential components are Sheet, SheetTrigger, and SheetContent. The SheetHeader, SheetFooter, SheetTitle, and SheetDescription components provide additional structure.

side

Sheets can slide out from any side of the screen using the side prop.

Top Sheet

This sheet opens from the top of the screen.

Right Sheet

This sheet opens from the right side of the screen.

Bottom Sheet

This sheet opens from the bottom of the screen.

Left Sheet

This sheet opens from the left side of the screen.

API Reference

Sheet

The root component that manages the sheet state. Built on top of the Dialog component.

---
// Root wrapper component
---
<Sheet>
  <!-- Contains all sheet components -->
</Sheet>

Props:

  • Inherits all props from the Dialog component
  • class?: string - Additional CSS classes to apply

SheetTrigger

A button that opens the sheet when clicked.

---
// Button trigger - can be used with asChild to wrap custom elements
---
<SheetTrigger asChild>
  <Button>Open Sheet</Button>
</SheetTrigger>


<!-- Or as a standalone button -->
<SheetTrigger>Open Sheet</SheetTrigger>

Props:

  • asChild?: boolean - When true, renders the child element instead of a button
  • for?: string - Optional ID of the sheet to trigger
  • class?: string - Additional CSS classes to apply

SheetContent

The slide-out panel container that appears when the sheet is opened.

---
// Sheet content with customizable side
---
<SheetContent side="right" class="w-[400px] sm:w-[540px]">
  <!-- Sheet content goes here -->
</SheetContent>

Props:

  • side?: "top" | "right" | "bottom" | "left" - Side of the screen to slide out from (default: “right”)
  • class?: string - Additional CSS classes to apply

SheetHeader

A container for the sheet title and description.

---
// Header section containing title and description
---
<SheetHeader>
  <SheetTitle>Sheet Title</SheetTitle>
  <SheetDescription>Sheet description</SheetDescription>
</SheetHeader>

Props:

  • class?: string - Additional CSS classes to apply

SheetTitle

The title of the sheet. Automatically receives proper heading semantics.

---
// Renders as an h2 element with proper styling
---
<SheetTitle>
  Edit Profile
</SheetTitle>

Props:

  • class?: string - Additional CSS classes to apply

SheetDescription

A description that provides additional context about the sheet.

---
// Renders as a p element with muted styling
---
<SheetDescription>
  Make changes to your profile here. Click save when you're done.
</SheetDescription>

Props:

  • class?: string - Additional CSS classes to apply

SheetFooter

A container for action buttons, typically containing cancel and confirm buttons.

---
// Footer with button layout
---
<SheetFooter>
  <SheetClose asChild>
    <Button variant="outline">Cancel</Button>
  </SheetClose>
  <Button>Save</Button>
</SheetFooter>

Props:

  • class?: string - Additional CSS classes to apply

SheetClose

A button that closes the sheet when clicked.

---
// Close button
---
<SheetClose asChild>
  <Button>Close</Button>
</SheetClose>


<!-- Or as a standalone button -->
<SheetClose>Close</SheetClose>

Props:

  • asChild?: boolean - When true, renders the child element instead of a button
  • class?: string - Additional CSS classes to apply

Changelog

v1.0.0

  • Initial release