Drawer

The Drawer component provides a way to display content in a panel that slides in from the edge of the screen. Supports multiple configuration options, including direction (left, right, top, bottom), size constraints, and nested drawers for building complex, multi-level interfaces.

It is composed of several subcomponents such as Drawer.Root, Drawer.Trigger, Drawer.Content, Drawer.Header, Drawer.Tagline, Drawer.Title, Drawer.Description, Drawer.Body, Drawer.Footer and Drawer.Close to offer a structured and customizable interface.

Usage

import { Drawer } from '@harnessio/ui/components'

//...

return (
  <Drawer.Root
    direction="left"
    open={isDrawerOpen}
    onOpenChange={setIsDrawerOpen}
  >
    <Drawer.Trigger>
      <Button>Open drawer</Button>
    </Drawer.Trigger>

    <Drawer.Content size="md" hideClose>
      <Drawer.Header icon="info-circle-solid">
        <Drawer.Tagline>Section</Drawer.Tagline>
        <Drawer.Title>Title of the drawer</Drawer.Title>
        <Drawer.Description>Description of the drawer</Drawer.Description>
      </Drawer.Header>

      <Drawer.Body className="">
        Content of the drawer goes here

        <Drawer.Root>
          <Drawer.Trigger>
            <Button>Open Nested Drawer</Button>
          </Drawer.Trigger>

          <Drawer.Content>
            <Drawer.Header>
              <Drawer.Title>Title</Drawer.Title>
            </Drawer.Header>

            <Drawer.Body>
              Content
            </Drawer.Body>

            <Drawer.Footer>
              Footer
            </Drawer.Footer>
          </Drawer.Content>
        </Drawer.Root>
      </Drawer.Body>

      <Drawer.Footer>
        <ButtonLayout.Root>
          <ButtonLayout.Primary>
            <Button>Action</Button>
          </ButtonLayout.Primary>
          <ButtonLayout.Secondary>
            <Drawer.Close asChild>
              <Button variant="outline">Cancel</Button>
            </Drawer.Close>
          </ButtonLayout.Secondary>
        </ButtonLayout.Root>
      </Drawer.Footer>
    </Drawer.Content>
  </Drawer.Root>
)

Anatomy

All parts of the Drawer component can be imported and composed as required.

<Drawer.Root>
  <Drawer.Trigger />
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Tagline />
      <Drawer.Title />
      <Drawer.Description />
    </Drawer.Header>
    <Drawer.Body />
    <Drawer.Footer>
      <Drawer.Close />
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Nested drawers

Nested drawers can be implemented by placing a Drawer.Root inside the parent Drawer.Content.

Drawer sizes

The Drawer.Content component accepts a size prop to control its width (or height, depending on direction). Supported values are: 2xs, xs, sm, md, and lg.

Drawer opening direction

The Drawer.Root component accepts a direction prop to control which side the drawer opens from. Supported values are: right, left, top, and bottom.

Keep focus on the custom trigger element

If a drawer is opened without the Trigger component (e.g., a dropdown item), focus will not return to the trigger element when the drawer is closed. To address this use useCustomDialogTrigger hook to register your custom trigger element.

API Reference

Root

Contains Drawer.Trigger and Drawer.Content components.

Prop	Required	Default	Type
defaultOpen	false	undefined	boolean
open	false	undefined	boolean
onOpenChange	false	undefined	(open: boolean) => void
modal	false	true	boolean
container	false	document.body	HTMLElement
direction	false	right	'right' | 'left' | 'top' | 'bottom'
onAnimationEnd	false	undefined	(open: boolean) => void
dismissible	false	true	boolean
handleOnly	false	false	boolean
repositionInputs	false	true	boolean
children	true		ReactNode

Trigger

Used to open a drawer. Essential for registering the trigger element with the dialog focus manager. If a drawer is opened without the Trigger component (e.g., a dropdown item), focus will not return to the trigger element when the drawer is closed. To address this use useCustomDialogTrigger hook to register your custom trigger element.

Prop	Required	Default	Type
children	true		ReactNode

Close

An optional button that closes the drawer.

Prop	Required	Default	Type
asChild	false	false	boolean

Content

Contains Drawer.Header, Drawer.Body and Drawer.Footer components to be rendered in the open drawer.

Prop	Required	Default	Type
size	false	sm	'2xs' | 'xs' | 'sm' | 'md' | 'lg'
hideClose	false	false	boolean
children	true		ReactNode
overlayClassName	false	undefined	string
forceWithOverlay	false	false	boolean

Header

An optional container for the Drawer.Tagline, Drawer.Title and Drawer.Description components.

Prop	Required	Default	Type
icon	false	undefined	string
logo	false	undefined	string
children	true		ReactNode

Tagline

An optional tagline above the title.

Prop	Required	Default	Type
children	true		ReactNode

Title

An optional accessible title to be announced when the drawer is opened.

Prop	Required	Default	Type
asChild	false	false	boolean

Description

An optional accessible description to be announced when the drawer is opened.

Prop	Required	Default	Type
asChild	false	false	boolean

Body

A scrollable wrapper for all content that doesn’t belong to the Drawer.Header or Drawer.Footer.

Prop	Required	Default	Type
className	false	undefined	string
scrollAreaClassName	false	undefined	string
children	true		ReactNode

Footer

An optional footer wrapper.