Sheet

The Sheet component provides a panel that slides in from the edge of the screen. It’s ideal for secondary content, navigation menus, or contextual information that doesn’t require interrupting the main workflow as dramatically as a Dialog.

Usage

<script>
  import { 
    Sheet, 
    SheetTrigger, 
    SheetContent, 
    SheetHeader, 
    SheetTitle, 
    SheetDescription, 
    SheetFooter, 
    SheetClose 
  } from "$lib/components/ui/sheet";
  import { Button } from "$lib/components/ui/button";
</script>

<Sheet>
  <SheetTrigger>
    <Button>Open Sheet</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Sheet Title</SheetTitle>
      <SheetDescription>Sheet Description</SheetDescription>
    </SheetHeader>
    <div class="py-4">
      <p>Sheet content goes here.</p>
    </div>
    <SheetFooter>
      <SheetClose>
        <Button>Close</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

Examples

API Reference

Sheet Components

Component	Description
Sheet	The root component that manages sheet state.
SheetTrigger	The button that opens the sheet.
SheetContent	The container for sheet content with built-in animations.
SheetHeader	A container for sheet heading elements.
SheetTitle	The title component for the sheet.
SheetDescription	A description component providing more details about the sheet’s purpose.
SheetFooter	The bottom section of the sheet, typically containing action buttons.
SheetClose	A component that closes the sheet when clicked.

Component Properties

Component	Properties	Description
Sheet	open, onOpenChange	Controls the open state of the sheet.
SheetContent	side, class	side controls which direction the sheet slides in from (right, left, top, bottom). class adds additional CSS classes.
SheetTrigger	Standard button properties	Accepts all standard button properties.
SheetClose	Standard button properties	Accepts all standard button properties.

Implementation

The Sheet component is built on top of bits-ui Dialog primitives with custom animations for sliding in from different directions:

// SheetContent variants for different sides
const sheetVariants = tv({
  base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
  variants: {
    side: {
      top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b",
      bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t",
      left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
      right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
    },
  },
  defaultVariants: {
    side: "right",
  },
});

// SheetHeader styling
'flex flex-col space-y-1.5 text-center sm:text-left'

// SheetFooter styling
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2'