@usevyre/react@usevyre/vue

Sheet

A slide-in panel overlay anchored to an edge of the viewport. Built on a portal with focus trap and keyboard support. Use it for forms, detail views, filters, or navigation drawers.

Basic

Compose SheetHeader, SheetBody, and SheetFooter insideSheet. The body scrolls independently when content overflows.

import { Sheet, SheetHeader, SheetBody, SheetFooter, Button } from "@usevyre/react";

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open Sheet</Button>

<Sheet open={open} onClose={() => setOpen(false)} side="right">
  <SheetHeader>
    <h2>Edit profile</h2>
    <p>Make changes to your profile information.</p>
  </SheetHeader>
  <SheetBody>
    {/* form content */}
  </SheetBody>
  <SheetFooter>
    <Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
    <Button variant="primary"   onClick={() => setOpen(false)}>Save changes</Button>
  </SheetFooter>
</Sheet>

<script setup>
import { Sheet, SheetHeader, SheetBody, SheetFooter, Button } from "@usevyre/vue";
const open = ref(false);
</script>
<template>
  <Button @click="open = true">Open Sheet</Button>
  <Sheet v-model="open" side="right">
    <SheetHeader>
      <h2>Edit profile</h2>
    </SheetHeader>
    <SheetBody>
      <!-- form content -->
    </SheetBody>
    <SheetFooter>
      <Button variant="secondary" @click="open = false">Cancel</Button>
      <Button variant="primary"   @click="open = false">Save changes</Button>
    </SheetFooter>
  </Sheet>
</template>

Sides

The side prop controls which edge the panel slides in from.

<Sheet open={open} onClose={handleClose} side="left">...</Sheet>
<Sheet open={open} onClose={handleClose} side="top">...</Sheet>
<Sheet open={open} onClose={handleClose} side="bottom">...</Sheet>

<Sheet v-model="open" side="left">...</Sheet>

Props — Sheet

Props

Prop	Type	Default	Description
`open / v-model`	`boolean`	`—`	Controlled open state.
`onClose / @close`	`() => void`	`—`	(React) Called when sheet should close.
`side`	`"right" \| "left" \| "top" \| "bottom"`	`"right"`	Which edge the sheet slides in from.
`size`	`"sm" \| "md" \| "lg" \| "full"`	`"md"`	Width (or height) of the sheet panel.
`closeOnBackdrop`	`boolean`	`true`	Close when clicking outside the panel.
`closeOnEsc`	`boolean`	`true`	Close when pressing Escape.
`class / className`	`string`	`—`	Additional CSS class on the panel.

AI Context

Valid props

Prop	Values	Default
`size`	`"sm"`\|`"md"`\|`"lg"`\|`"full"`	`md`
`side`	`"left"`\|`"right"`	`right`
`open`	`true`\|`false`	`false`

Quick examples

Settings sheet from the right

<Sheet open={isOpen} onClose={() => setIsOpen(false)} side="right">
  <SheetHeader>Settings</SheetHeader>
  <SheetBody>Settings content here.</SheetBody>
  <SheetFooter>
    <Button variant="accent">Save</Button>
  </SheetFooter>
</Sheet>

← Separator Sidebar →