A modal sheet that opens from any edge, with native focus management and Escape dismissal.
Installation
Add the sheet component from Hangry UI to this project.
Use the project's package manager to run:shadcn@latest add https://ui.razeev.com/r/sheet.json
Integrate the component with the existing layout and styling.Keep its interactions and reduced-motion support intact.How to use
import { Sheet } from "@/components/hangry-ui/components/sheet";
<Sheet side="right" title="Quick actions"> <p>Choose your next step.</p></Sheet>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "bottom" | The edge the sheet opens from. |
triggerLabel | string | "Open sheet" | Label of the button that opens the sheet. |
title | string | "Make yourself at home" | Accessible dialog title. |
description | string | "A little space for your next action. Press Escape or close to return." | Accessible dialog description. |
children | ReactNode | — | Sheet body content. |
className | string | "" | Additional CSS classes on the component root. |
Dependencies
- lucide-react
- Motion