Sheet

Native <dialog> at the screen edge. Platform focus trap and backdrop.

Filters

Everything narrows from here. Press Escape to close.

Install

npx raster add sheet

Markup

<dialog class="rs-sheet" open><span class="rs-sheet-title">Filters</span><p class="rs-sheet-body">Everything narrows from here.</p></dialog>

React

import { Sheet, SheetBody, SheetTitle } from "@/components/raster/sheet";

<Sheet open={open} onClose={() => setOpen(false)} side="right">
  <SheetTitle>Filters</SheetTitle>
  <SheetBody>Everything narrows from here.</SheetBody>
</Sheet>

Classes

.rs-sheet.rs-sheet-left.rs-sheet-title.rs-sheet-body