Sheet

Extends the Dialog component to display content that complements the main content of the screen.

tsx

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

export function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you're done.
          </SheetDescription>
        </SheetHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="name" className="text-right">
              Name
            </Label>
            <Input id="name" value="Pedro Duarte" className="col-span-3" />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="username" className="text-right">
              Username
            </Label>
            <Input id="username" value="@peduarte" className="col-span-3" />
          </div>
        </div>
        <SheetFooter>
          <SheetClose asChild>
            <Button type="submit">Save changes</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

Installation

CLI

bash

npx fivui add sheet

Manual

Install the following dependencies:

bash

npm install @radix-ui/react-dialog class-variance-authority

Usage

tsx

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

tsx

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Examples

Side

Use the side prop to indicate the edge of the screen where the component will appear.

Sheet Sides

Sheets can slide in from any side of the screen

tsx

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

function SheetSide({ side }: { side: "top" | "right" | "bottom" | "left" }) {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline" className="capitalize">
          {side}
        </Button>
      </SheetTrigger>
      <SheetContent side={side}>
        <SheetHeader>
          <SheetTitle>Sheet from {side}</SheetTitle>
          <SheetDescription>
            This sheet slides in from the {side} side of the screen.
          </SheetDescription>
        </SheetHeader>
        <div className="py-4">
          <p className="text-sm text-muted-foreground">
            Content goes here. You can add any components or content you need.
          </p>
        </div>
      </SheetContent>
    </Sheet>
  )
}

export function SheetSides() {
  return (
    <div className="grid grid-cols-2 gap-2">
      <SheetSide side="top" />
      <SheetSide side="right" />
      <SheetSide side="bottom" />
      <SheetSide side="left" />
    </div>
  )
}

import Link from "next/link"
import { Menu } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export function SheetMenu() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline" size="icon">
          <Menu className="h-4 w-4" />
        </Button>
      </SheetTrigger>
      <SheetContent side="left">
        <SheetHeader>
          <SheetTitle>Navigation Menu</SheetTitle>
          <SheetDescription>
            Navigate through the application
          </SheetDescription>
        </SheetHeader>
        <div className="py-4">
          <nav className="flex flex-col space-y-2">
            <Link href="#" className="px-2 py-1 text-sm hover:bg-accent rounded">
              Dashboard
            </Link>
            <Link href="#" className="px-2 py-1 text-sm hover:bg-accent rounded">
              Projects
            </Link>
            <Link href="#" className="px-2 py-1 text-sm hover:bg-accent rounded">
              Team
            </Link>
            <Link href="#" className="px-2 py-1 text-sm hover:bg-accent rounded">
              Settings
            </Link>
          </nav>
        </div>
      </SheetContent>
    </Sheet>
  )
}

API Reference

Sheet

Contains all the parts of a sheet.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	false	The open state of the sheet when it is initially rendered.
`open`	`boolean`	-	The controlled open state of the sheet.
`onOpenChange`	`function`	-	Event handler called when the open state of the sheet changes.

SheetContent

The component that pops out when the sheet is open.

Prop	Type	Default	Description
`side`	`top \| right \| bottom \| left`	right	The edge of the screen where the component will appear.
`onEscapeKeyDown`	`function`	-	Event handler called when the escape key is down.
`onInteractOutside`	`function`	-	Event handler called when the user interacts outside the component.

External Documentation

Sheet is built on top of Radix UI Dialog. For more advanced usage and API details, refer to the official documentation.

View Radix UI Dialog Documentation