This is a bottom drawer built with React Aria's Modal component. It slides up from the bottom of the screen with a smooth CSS transition.
This drawer slides in from the {placement} edge of the screen.
This drawer uses the {variant} backdrop variant.
Drag the handle to snap between 35%, 60%, and{" "} 90% of the viewport height. Tap the handle to cycle through the snap points; tapping at the top closes the drawer.
{Array.from({length: 12}).map((_, i) => (Item {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet hendrerit risus.
))}
Mixes fixed pixel snap points (180px, 420px) with a
fractional one (0.9). The drawer opens at the smallest snap point and
steps up as you drag or tap the handle.
Item {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
))}
With {"fadeFromIndex={0}"} the backdrop stays fully opaque across every
snap point and only fades as the drawer is dragged below the smallest one.
Item {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
))}Dragging is restricted to the handle. The header and body no longer start a drag, so text stays selectable and inner controls remain interactive.
{Array.from({length: 12}).map((_, i) => (Item {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
))}The panel floats away from the {placement} edge with rounded corners on every side.
This drawer cannot be dismissed by clicking outside or dragging. You must use one of the buttons below.
Paragraph {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam.
))}
Control the drawer using React's useState hook
for simple state management.
Status:{" "} {isOpen ? "open" : "closed"}
This drawer is controlled by React's useState hook. Pass{" "}
isOpen and onOpenChange props to manage the drawer state
externally.
Use the useOverlayState hook for a cleaner API
with convenient methods like open(), close(), and{" "}
toggle().
Status:{" "} {state.isOpen ? "open" : "closed"}
The useOverlayState hook provides dedicated methods for common
operations. No need to manually create callbacks—just use{" "}
state.open(), state.close(), or{" "}
state.toggle().
This drawer has custom styling applied via Tailwind classes.