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.
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.