Sheet: Sides

Set side to slide in from any edge. Each sheet can be swiped back towards its own edge, and the close gesture follows your finger with momentum.

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

const sides = ["top", "right", "bottom", "left"] as const

export function SheetSides() {
  return (
    <div className="grid grid-cols-2 gap-2">
      {sides.map((side) => (
        <Sheet key={side}>
          <SheetTrigger render={<Button variant="outline" />}>
            {side}
          </SheetTrigger>
          <SheetContent side={side}>
            <SheetHeader>
              <SheetTitle>Opens from the {side}</SheetTitle>
              <SheetDescription>
                Swipe towards the {side} edge or press Esc to close it.
              </SheetDescription>
            </SheetHeader>
            <SheetFooter>
              <SheetClose render={<Button />}>Done</SheetClose>
            </SheetFooter>
          </SheetContent>
        </Sheet>
      ))}
    </div>
  )
}

Add this example

This adds the example as components/examples/sheet/sides.tsx, together with the Sheet component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/sheet-sides.json

To add only the component, follow the Sheet installation.

Props in this example

The Sheet props this example sets, from the API reference.

SheetTrigger

Prop	Type	Default
`render`	`ReactElement \| (props, state) => ReactElement`	`<button>`

SheetContent

Prop	Type	Default
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"right"`

SheetClose

Prop	Type	Default
`render`	`ReactElement \| (props, state) => ReactElement`	`<button>`

Every prop is in the Sheet API reference.

More Sheet examples

See them all, with keyboard support and accessibility notes, on the Sheet page.