Drawer

Root component for a drawer (mobile-friendly slide-up panel). Manages open/closed state; swipeDirection sets the edge it slides from and the direction that dismisses it ("down" for a bottom drawer, the default). Pass container to portal the drawer (and its scrim) into a bounded element instead of the document body - used by the mobile-nav overlay to scope the drawer to its own layer. Import from "@instruments/materia-ui/components/drawer".

Usage

@instruments/materia-ui/components/drawer

<Drawer>
  <DrawerTrigger
    render={
      <Button emphasis="outline" icon={SlidersHorizontal} tone="neutral" />
    }
  >
    Filter materials
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Filter materials</DrawerTitle>
      <DrawerDescription>
        Narrow the catalog by finish and origin.
      </DrawerDescription>
    </DrawerHeader>
    <Text className="px-4" size="paragraph-sm" variant="muted">
      Showing 128 materials across 14 collections.
    </Text>
    <DrawerFooter>
      <Button>Apply filters</Button>
      <Button emphasis="ghost" tone="neutral">
        Reset
      </Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Best practices

Drawer is the touch-first slide-up panel - reach for Sheet for desktop side panels and Dialog for centred modals.
Always render a DrawerTitle inside DrawerContent (sr-only if visually hidden) - the underlying primitive uses it for aria-labelledby.
Pass container to scope the drawer and its scrim to a bounded element instead of the viewport (the mobile-nav overlay pattern).

Props

Drawer

Prop	Type	Default	Description
container	`HTMLElement \| null`

DrawerContent

Prop	Type	Default	Description
className	`string`		Extra classes for the panel surface.
showHandle	`boolean`	`true`	Show the drag handle (bottom drawers).

DrawerDescription

Prop	Type	Default	Description
className	`string`

DrawerOverlay

Prop	Type	Default	Description
className	`string`

DrawerTitle

Prop	Type	Default	Description
className	`string`

Also exports

componentDrawerClose
componentDrawerFooter
componentDrawerHeader
componentDrawerPortal
namespaceDrawerPrimitive
componentDrawerTrigger

Composition

Builds on

Flex

Used by

MobileNavigationRoot