sheet
Sheet
Slides a panel in from a screen edge over the page, with a header, a scrolling body and a footer, for carts, filters and menus.
States: Default
Parts
| Part | File | Does |
|---|---|---|
| Sheet | Sheet.vue | Groups all parts of the sheet, a panel that slides in from an edge. |
| SheetBody | SheetBody.vue | Holds the sheet's main content and scrolls it, keeping the header and footer in view. |
| SheetClose | SheetClose.vue | Closes the sheet. |
| SheetContent | SheetContent.vue | Holds what the sheet shows while open. |
| SheetDescription | SheetDescription.vue | Explains the purpose of the sheet below its title. |
| SheetFooter | SheetFooter.vue | Holds the actions at the bottom of the sheet. |
| SheetHeader | SheetHeader.vue | Groups the title and description at the top of the sheet. |
| SheetTitle | SheetTitle.vue | Names the sheet. |
| SheetTrigger | SheetTrigger.vue | Opens the sheet. |
Anatomy
<Sheet>
<SheetTrigger />
<SheetContent>
<SheetHeader>
<SheetTitle />
<SheetDescription />
</SheetHeader>
<SheetBody />
<SheetFooter>
<SheetClose />
</SheetFooter>
</SheetContent>
</Sheet>Styling
| Part | Recipe |
|---|---|
| SheetBody | sheet-body |
| SheetContent | sheet-content |
| SheetContent | sheet-overlay |
| SheetDescription | sheet-description |
| SheetFooter | sheet-footer |
| SheetHeader | sheet-header |
| SheetTitle | sheet-title |
Install
Writes 11 files into components/ui/sheet/. For agents, npx @frontic/ui docs sheet prints this reference as markdown; the MCP server serves the same.
- Installs with it
- button
- npm packages
- @lucide/vue
- @vueuse/core
- class-variance-authority
- reka-ui
Built from
API reference
Sheet Sheet.vue
Groups all parts of the sheet, a panel that slides in from an edge.
| Prop | Type | Default | |
|---|---|---|---|
| open | boolean | — | |
| defaultOpen | boolean | false | |
| modal | boolean | true | |
| unmountOnHide | boolean | true | |
| Event | Payload | |
|---|---|---|
| update:open | value: boolean | |
| Slot | Slot props | |
|---|---|---|
| default | { open: boolean; close: () => void; } | |
SheetBody SheetBody.vue
SheetClose SheetClose.vue
SheetContent SheetContent.vue
SheetDescription SheetDescription.vue
SheetHeader SheetHeader.vue
SheetTitle SheetTitle.vue
SheetTrigger SheetTrigger.vue
Example