Swipeable native-like sheets
From screen’s low edge it takes its flight, A drawer glides with grace and light. Its charm lies not in flair or flight, but in keeping function ever in sight. A modest component, clever and kind—built for the user with clarity in mind
Open the sheet and drag it down to close it.
Try on mobile for a more native-like experience.
Installation
Understanding the Component
The Sheet component is a wrapper around the Emil Kowalski vaul library’s Drawer component, customized with specific styling and structure.
It's to refer to vaul's documentation for detailed usage and API information.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | none | The content to display inside the drawer. |
| title | string | none | Required for accessibility, used as a screen reader-only heading. |
| open | boolean | none | Controls the open/closed state of the drawer. |
| close | () => void | none | Callback invoked when the drawer is dismissed. |
| className | string | none | Optional additional class names to apply custom styles to the drawer content. |