Components / Overlays

Sheet

A top-layer edge panel with a stationary header and footer and scrollable body.

Preview

Install

Run in your project

npx @getweini/cli@latest add sheet

Use cases

Filters

Present several filters in an edge-attached modal panel.

Details pane

Show a focused detail workflow while retaining the underlying page context.

Usage example

Vue

<Sheet>
  <SheetTrigger>Open filters</SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Filters</SheetTitle>
    </SheetHeader>
    <SheetBody><!-- filter controls --></SheetBody>
    <SheetFooter>
      <SheetClose>Done</SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

More examples

Filter panel

A right-edge sheet keeps its header and footer stationary.

Filter panel

<script setup lang="ts">
import Sheet from './components/ui/sheet/Sheet.vue'
import SheetTrigger from './components/ui/sheet/SheetTrigger.vue'
import SheetContent from './components/ui/sheet/SheetContent.vue'
import SheetHeader from './components/ui/sheet/SheetHeader.vue'
import SheetTitle from './components/ui/sheet/SheetTitle.vue'
import SheetDescription from './components/ui/sheet/SheetDescription.vue'
import SheetBody from './components/ui/sheet/SheetBody.vue'
import SheetFooter from './components/ui/sheet/SheetFooter.vue'
import SheetClose from './components/ui/sheet/SheetClose.vue'
</script>
<template>
  <Sheet>
    <SheetTrigger>Open filters</SheetTrigger>
    <SheetContent side="right">
      <SheetHeader><SheetTitle>Filters</SheetTitle><SheetDescription>Narrow the results.</SheetDescription></SheetHeader>
      <SheetBody><label><input type="checkbox" /> Available only</label></SheetBody>
      <SheetFooter><SheetClose>Apply filters</SheetClose></SheetFooter>
    </SheetContent>
  </Sheet>
</template>

Bottom details sheet

Choose the attachment edge explicitly.

Bottom details sheet

<script setup lang="ts">
import Sheet from './components/ui/sheet/Sheet.vue'
import SheetTrigger from './components/ui/sheet/SheetTrigger.vue'
import SheetContent from './components/ui/sheet/SheetContent.vue'
import SheetHeader from './components/ui/sheet/SheetHeader.vue'
import SheetTitle from './components/ui/sheet/SheetTitle.vue'
import SheetBody from './components/ui/sheet/SheetBody.vue'
import SheetFooter from './components/ui/sheet/SheetFooter.vue'
import SheetClose from './components/ui/sheet/SheetClose.vue'
</script>
<template>
  <Sheet>
    <SheetTrigger>Order details</SheetTrigger>
    <SheetContent side="bottom">
      <SheetHeader><SheetTitle>Order details</SheetTitle></SheetHeader>
      <SheetBody><p>Review the items before confirming.</p></SheetBody>
      <SheetFooter><SheetClose>Done</SheetClose></SheetFooter>
    </SheetContent>
  </Sheet>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Sheet
Name	Type	Default or requirement
`v-model:open / defaultOpen`	boolean	false
`side`	top \| right \| bottom \| left	right
`dismissOnBackdrop`	boolean	true

Sheet opens from any viewport edge. Its exposed corners are rounded, including both left corners when it opens from the right.

Implementation notes

Choose the side in application code; Sheet does not infer a breakpoint or device.
SheetBody scrolls independently when content is tall.

Accessibility and localization

Sheet inherits native dialog focus management and background scroll locking.
Provide a SheetTitle or explicit accessible name, and keep action text localized.