Base UI

Drawer

A minimal reference page for the Base UI drawer wrapper.

Basic

Base/ui Drawer

Open the drawer, adjust the goal, and compare the live preview with the source.

Directions

Open the drawer from each side with the same wrapper surface.

Responsive

Use dialog on desktop and drawer on mobile from one trigger.

RTL

Switch between English, Arabic, and Hebrew in one drawer demo.

Swipe Area

Note that you should use the opposite direction for the data attribute to target the correct area.

SwipeArea - Left / Right

Open the drawer only from left and right edge swipe areas.

When the swipe direction is 'right', Add data-[swipe-direction=left]:w-10 to the SwipeArea

When the swipe direction is 'left', Add data-[swipe-direction=right]:w-10 to the SwipeArea

SwipeArea - Top / Bottom

Open the drawer only from top and bottom edge swipe areas.

When the swipe direction is 'up', Add data-[swipe-direction=down]:h-10 to the SwipeArea

When the swipe direction is 'down', Add data-[swipe-direction=up]:h-10 to the SwipeArea