Drawer

Drawer

Drawer is the mobile bottom sheet: anchored to the bottom edge, rounded on top, and dismissed by swiping it down as well as by Escape, the close button or the backdrop.

Beta

Ready to use, but its API may still change before it is marked stable.

Usage

Import

import { Drawer } from "@qeetrix/ui";

It can also be imported on its own from @qeetrix/ui/components/drawer.

Controlled and uncontrolled

Pass the value prop to control it, or the default prop to let the component own it.

Value	Default	Change
`open`	`defaultOpen`	`onOpenChange`

States

open

Support

Feature	Status
Right-to-left	Supported
Dark mode	Supported
Density	Not supported
Server rendering	Client component
Reduced motion	Supported

Accessibility

Follows the WAI-ARIA dialog pattern. Not yet audited.

Keyboard

Tab Shift+tab Escape

Focus

Each control is a Tab stop, in order. While open, focus is contained and focus returns on close.

Known limitations

Focus: Focus containment is enforced with inert, which jsdom does not implement, so the tests assert the mechanism is installed rather than observing containment. Browser-level verification is on the manual checklist.

Tests

Covered by unit, accessibility (axe), interaction and visual tests.

UsageCopy Anchor Link

ImportCopy Anchor Link

Controlled and uncontrolledCopy Anchor Link

StatesCopy Anchor Link

SupportCopy Anchor Link

AccessibilityCopy Anchor Link

KeyboardCopy Anchor Link

FocusCopy Anchor Link

Known limitationsCopy Anchor Link

TestsCopy Anchor Link

On this page