@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 inside Sheet. 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>

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>

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.
← Separator Sidebar →