nessra uinessra ui

Sheet

Previous: SeparatorNext: Sidebar

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

Docs API Reference
Loading...
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/sheet.json

Usage

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you sure?</SheetTitle>
      <SheetDescription>This action cannot be undone.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Examples

Side

Use the side prop to control which side the sheet opens from.

Loading...
import { Button } from "@/components/ui/button"
import {
  Sheet,

API Reference

Sheet

ComponentDescription
SheetThe root component
SheetTriggerThe button that opens the sheet
SheetContentThe sheet content container
SheetHeaderHeader section
SheetTitleThe sheet title
SheetDescriptionDescription text
SheetFooterFooter section for actions
SheetCloseClose button component

SheetContent Props

PropTypeDefaultDescription
side"top" | "right" | "bottom" | "left""right"The side the sheet opens from
showCloseButtonbooleantrueShow the close button
SeparatorSidebar

On this page

InstallationUsageExamplesSideAPI ReferenceSheetSheetContent Props