Smooth Drawer
スムースドロワー
A sheet that comes up from the bottom edge and can be thrown back down. Dismissal reads velocity as well as distance, so a quick flick closes it from near the top while a slow drag has to travel; anything short of that springs back. There is no drawer library behind it — the sheet is a dragging Framer Motion element, and the dialog obligations are handled here: Tab is trapped inside the panel, Escape closes it, the body stops scrolling while it is up, and document.activeElement↗↗ is remembered on open so focus lands back on the trigger on close. The gradient price tag and shimmering call to action from the original are gone; the body is yours to fill. Adapted from Kokonut UI↗↗ under the MIT licence.
Installation
Copy and paste the following code into a new component file:1
How to use it2
Props
SmoothDrawer
| Name | Default | Description |
|---|---|---|
| trigger | — | string Label on the button that opens the sheet |
| title | — | string Heading, also the accessible name of the dialog |
| description | — | string Line under the heading, used as the description |
| children | — | ReactNode Body between the description and the buttons |
| confirmLabel | "Confirm" | string Text on the primary button |
| cancelLabel | "Maybe later" | string Text on the dismiss button |
| onConfirm | — | () => void Fired by the primary button, which then closes the sheet |
| dark | false | boolean Render the dark palette |