behavior

Behavior stays consistent while the style changes

Direction, snap points, dismissal, and drag behavior come from the primitive layer. Styling those surfaces is still your responsibility.

Directions: bottom, top, left, right.

Snap points: pixel values, percentages, and the content keyword.

Accessibility: dialog semantics, focus trap, Escape, overlay dismissal, scroll lock.

Control model: open state and active snap point can both be controlled from the parent.

Handle: optional visual affordance. Place it where the direction makes sense, or hide it with `visible=`.

behavior.tsx

<Drawer.Root
  snapPoints={['25%', '55%', '90%']}
  activeSnapPoint={snap}
  onSnapPointChange={setSnap}
  direction="bottom"
  dismissible
>
  <Drawer.Portal>
    <Drawer.Overlay className="overlay" />
    <Drawer.Content className="content">
      <Drawer.Handle visible />
      <Drawer.Title>Filters</Drawer.Title>
      <Drawer.SnapIndicator />
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>