Bottom Sheet
A bottom-aligned modal sheet with native focus management and Escape dismissal.
Installation
bunx shadcn@latest add https://ui.razeev.com/r/bottom-sheet.jsonUsage
tsx
import { BottomSheet } from "@/components/hangry-ui/components/bottom-sheet";
<BottomSheet title="Quick actions"><p>Choose your next step.</p></BottomSheet>Props
| Prop | Type | Default | Description |
|---|---|---|---|
triggerLabel | string | "Open bottom 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. |
Setup notes
Use Tailwind CSS v4. Borders use the global border-border token. No rounded classes or additional packages are required. Customize content with props and styling with className.
Backdrop clicks close the sheet through the native closedby="any" attribute where supported. Escape and the close button remain available.
Motion slides a small box up, expands it to the full sheet, then reveals the title, description, and content in sequence. Dismissal finishes the exit animation before restoring focus. Reduced-motion preferences disable the movement.