Drawer

A side panel that slides in from the edge of the screen, used for navigation, detail views, or supplementary content

Basic Usage

A Drawer is a side panel that slides in from the edge of the screen to display supplementary content without leaving the current page.

import { Drawer, DrawerTrigger, DrawerContent, DrawerPortal, DrawerOverlay, DrawerFooter, DrawerClose, DrawerHeader, DrawerTitle, DrawerDescription, Button } from "@epilot/volt-ui"

<Drawer>
  <DrawerTrigger asChild>
    <Button variant="primary">Open Drawer</Button>
  </DrawerTrigger>
  <DrawerPortal container={document.getElementById("root")}>
    <DrawerOverlay />
    <DrawerContent className="w-96">
      <DrawerHeader>
        <DrawerTitle>Details</DrawerTitle>
        <DrawerDescription>
          View and edit the details below.
        </DrawerDescription>
      </DrawerHeader>
      <div className="flex flex-col gap-4 flex-1 overflow-auto">
        <p>Drawer content goes here.</p>
      </div>
      <DrawerFooter>
        <DrawerClose asChild>
          <Button variant="secondary">Close</Button>
        </DrawerClose>
        <Button>Save</Button>
      </DrawerFooter>
    </DrawerContent>
  </DrawerPortal>
</Drawer>

Side Variants

The side prop controls which edge the drawer slides in from. The default is "right".

<Drawer>
  <DrawerTrigger asChild>
    <Button>Open Left</Button>
  </DrawerTrigger>
  <DrawerPortal container={document.getElementById("root")}>
    <DrawerOverlay />
    <DrawerContent side="left" className="w-80">
      <DrawerHeader>
        <DrawerTitle>Left Drawer</DrawerTitle>
      </DrawerHeader>
      <p>This drawer slides in from the left.</p>
    </DrawerContent>
  </DrawerPortal>
</Drawer>

API Reference

Drawer

The root component that wraps the drawer trigger and content.

Prop	Type	Default	Description
`open`	boolean	-	Controlled open state of the drawer.
`defaultOpen`	boolean	`false`	Uncontrolled default open state.
`onOpenChange`	(open: boolean) => void	-	Callback fired when the open state changes.
`modal`	boolean	`true`	When true, focus is trapped within the drawer and outside interaction is disabled.

DrawerTrigger

The element that triggers the drawer. Use asChild to merge props with a child element.

Prop	Type	Default	Description
`asChild`	boolean	`false`	When true, merges props with the child element instead of rendering a button.

DrawerPortal

The portal component that renders the drawer content outside the DOM hierarchy.

Prop	Type	Default	Description
`container`	Element / DocumentFragment	-	The container to render the portal in. Recommended to use your MFE root element (e.g., `document.getElementById("epilot360-entity")`) instead of `document.body` to avoid conflicts.
`forceMount`	boolean	`false`	When true, the drawer content is always mounted.

DrawerOverlay

The backdrop overlay that appears behind the drawer content.

Prop	Type	Default	Description
`className`	string	-	Additional CSS classes to apply to the overlay.

DrawerHeader

A container component for the drawer title and description.

Prop	Type	Default	Description
`className`	string	-	Additional CSS classes to apply to the header container.

DrawerTitle

The title element for the drawer. Required for accessibility.

Prop	Type	Default	Description
`className`	string	-	Additional CSS classes to apply to the title.

DrawerDescription

The description element for the drawer. Provides additional context about the drawer.

Prop	Type	Default	Description
`className`	string	-	Additional CSS classes to apply to the description.

DrawerClose

A button element that closes the drawer when clicked. Use asChild to merge props with a child element.

Prop	Type	Default	Description
`asChild`	boolean	`false`	When true, merges props with the child element instead of rendering a button.
`className`	string	-	Additional CSS classes to apply to the close button.

Body

DrawerContent

The main content container for the drawer.

Prop	Type	Default	Description
`side`	`"left"` \| `"right"` \| `"top"` \| `"bottom"`	`"right"`	The side from which the drawer slides in.
`showCloseButton`	boolean	`true`	When true, displays a close button in the top-right corner.
`className`	string	-	Additional CSS classes to apply to the drawer content. Use to set width/height (e.g., `className="w-96"`).

DrawerFooter

A container component for drawer action buttons.

Prop	Type	Default	Description
`className`	string	-	Additional CSS classes to apply to the footer container.

Drawer

On this page