Side Sheet

A customizable sheet component for creating elegant slide-out interfaces.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/side-sheet.json

Usage

import {
  SideSheet,
  SideSheetTrigger,
  SideSheetContent,
  SideSheetHeader,
  SideSheetTitle,
  SideSheetDescription,
  SideSheetFooter,
  SideSheetClose,
} from "@/components/ui/side-sheet";

<SideSheet side="right"> // or left
  <SideSheetTrigger asChild>
    <Button>Open Sheet</Button>
  </SideSheetTrigger>
  <SideSheetContent>
    <SideSheetHeader>
      <SideSheetTitle>Title</SideSheetTitle>
      <SideSheetDescription>Description</SideSheetDescription>
    </SideSheetHeader>
    content..
    <SideSheetFooter>
      <SideSheetClose asChild>
        <Button>Close</Button>
      </SideSheetClose>
    </SideSheetFooter>
  </SideSheetContent>
</SideSheet>

Examples

Right side

API Reference

Side Sheet

A customizable sheet component for creating elegant slide-out interfaces.

Props

Property	Type	Default	Description
`open`	boolean	`undefined`	Controlled open state. If provided, SideSheet becomes controlled.
`defaultOpen`	boolean	`false`	Initial open state (uncontrolled). Used when `open` is not controlled.
`onOpenChange`	(open: boolean) => void	`undefined`	Callback fired when the open state changes. Works for controlled and uncontrolled usage.
`side`	"left" \| "right"	`"right"`	Which side the sheet slides in from.
`width`	string	`"400px"`	Width of the sheet. Accepts `px`, `%`, `vw` values. Adjusts responsively on smaller screens.
`closeThreshold`	number	`0.3`	Drag threshold (fraction of width) at which the sheet will close when swiped.
`className`	string	`-`	Additional classNames applied to the SideSheet container.
`children`	ReactNode	`required`	Content of the SideSheet. Usually composed of compound components like `SideSheetHeader`, `SideSheetContent`, `SideSheetFooter`.