Sheet

A panel that slides in from an edge of the screen.

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
  SheetClose,
} from '@/components/ui/sheet'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

export default function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline">Open sheet</Button>} />
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>Make changes to your profile here. Click save when you&apos;re done.</SheetDescription>
        </SheetHeader>
        <div className="grid gap-3">
          <div className="grid gap-1.5">
            <Label htmlFor="sheet-name">Name</Label>
            <Input id="sheet-name" defaultValue="Ada Lovelace" />
          </div>
        </div>
        <SheetFooter>
          <SheetClose render={<Button>Save changes</Button>} />
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

Built on Base UI

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/sheet.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Sheet imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

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

<Sheet>
  <SheetTrigger render={<Button variant="outline">Open sheet</Button>} />
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>Make changes to your profile here.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Examples

All four sides

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '@/components/ui/sheet'
import { Button } from '@/components/ui/button'
import type { SheetSide } from '@/components/ui/sheet'

const sides: SheetSide[] = ['top', 'right', 'bottom', 'left']

export default function SheetSides() {
  return (
    <div className="flex flex-wrap gap-3">
      {sides.map(side => (
        <Sheet key={side}>
          <SheetTrigger render={<Button variant="outline" className="capitalize">{side}</Button>} />
          <SheetContent side={side}>
            <SheetHeader>
              <SheetTitle className="capitalize">{side}</SheetTitle>
              <SheetDescription>A sheet sliding in from the {side} edge.</SheetDescription>
            </SheetHeader>
          </SheetContent>
        </Sheet>
      ))}
    </div>
  )
}

API Reference

Name	Type	Default	Description
side	'top' \| 'right' \| 'bottom' \| 'left'	'right'	Which edge of the screen the panel slides in from (set on SheetContent).
open / onOpenChange	boolean / (open: boolean) => void	—	Control the open state from outside (set on Sheet).
modal	boolean \| 'trap-focus'	true	Traps focus and locks page scroll while open.