Installation
Usage
import { Sheet } from "@/components/sheet"
export function Filters() {
return (
<Sheet
trigger={<button type="button">Filters</button>}
title="Filters"
description="Narrow down the results."
>
<p>Your filter controls go here.</p>
</Sheet>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger | ReactElement<button> | — | Opens the sheet; gets aria-expanded and focus back on close. |
| title | ReactNode | — | The dialog's heading and accessible name. |
| description | ReactNode | — | Shown under the title; read when it opens. |
| footer | ReactNode | — | Sticky actions at the bottom. |
| side | "right" | "left" | "bottom" | "top" | "right" | The edge it comes from; every side swipes back toward its edge to close. |
| size | "sm" | "md" | "lg" | "md" | Width of a side sheet. |
| snapPoints | number[] | — | Bottom sheet resting heights as fractions of the screen, e.g. [0.5, 0.92]. |
| scaleBackground | boolean | false | Shrink the element marked data-sheet-background while open. |
| open / defaultOpen | boolean | — / false | Controlled or initial state. |
| onOpenChange | (open: boolean) => void | — | Called when it opens or closes. |
| closeOnOutsideClick | boolean | true | Close when the dimmed page is clicked. |
Accessibility
- A native modal <dialog>: focus moves in and is trapped, the page behind is inert, and Escape closes.
- Labelled by its title and described by its description; the close button is labelled "Close".
- Focus returns to the trigger, and the page doesn't scroll behind it.
- Swiping is an extra: the close button and Escape always work, and the snap handle is a button that keyboard users can press to change height.
- Slides instantly under prefers-reduced-motion; dragging still follows the finger.
Changelog
- v1.0.0Latest
First release.