120k
New

Sheet

PreviousNext

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

Installation

pnpm dlx shadcn@latest add @force-ui-vue/sheet

Usage

<script setup lang="ts">
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
</script>
<template>
  <Sheet>
    <SheetTrigger>Open</SheetTrigger>
    <SheetContent>
      <SheetHeader>
        <SheetTitle>Are you absolutely sure?</SheetTitle>
        <SheetDescription>This action cannot be undone.</SheetDescription>
      </SheetHeader>
    </SheetContent>
  </Sheet>
</template>

Composition

Use the following composition to build a Sheet:

Sheet
├── SheetTrigger
└── SheetContent
    ├── SheetHeader
    │   ├── SheetTitle
    │   └── SheetDescription
    └── SheetFooter

Examples

Side

Use the :side prop on SheetContent to set the edge of the screen where the sheet appears. Values are top, right, bottom, or left.

No Close Button

Use :show-close-button="false" on SheetContent to hide the close button.

API Reference

See the Radix UI Dialog documentation.