"use client";
import { useState } from "react";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetTrigger,
} from "@/components/ui/sheet";

export default function SheetDemo() {
  const [open, setOpen] = useState(false);

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <button
          type="button"
          className="rounded-lg border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted"
        >
          Open sheet
        </button>
      </SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Panel title</SheetTitle>
          <SheetDescription>
            This is a side sheet. It slides in from the right and can contain
            any content — forms, details, or navigation.
          </SheetDescription>
        </SheetHeader>
        <div className="mt-6 space-y-3 text-sm text-muted-foreground">
          <p>Add your content here.</p>
        </div>
      </SheetContent>
    </Sheet>
  );
}
Installation

Examples

Right sheet

API Reference
