Drawer

Stable
WCAG 2.2 evidence
RTL

A side panel over the page for details, filters or a secondary task. Built on React Aria ModalOverlay + Modal + Dialog: a role="dialog" named by its title and described by its subtitle; focus moves inside on open, Tab stays inside while the rest of the page is inert and does not scroll, Escape, the close button or a click on the scrim closes it, and focus returns to the trigger (WCAG 2.1.1, 2.1.2, 2.4.3, 4.1.2). The body scrolls between a fixed header and footer and becomes focusable when it overflows. On narrow screens the panel fills the width (1.4.10). The slide-in only runs when motion is allowed (2.3.3). Consumer duties: title and action wording; use Dialog for blocking decisions.

import { Drawer } from "@nexera-ui/react";

Loading example…

7
examples: 20
props: 6
live controls: 1
platform: 10
WCAG criteria: 6
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

title

children

size

position

isDismissabletrue

defaultOpenfalse

Generated code

import { Drawer } from "@nexera-ui/react";

<Drawer />

Examples 6

The same examples as Storybook, rendered live. Open Code to copy one.

Medium

Figma Size=md (480 px).

Loading example…

app.tsx

import { Button, Drawer } from "@nexera-ui/react";

function ProfileDetails() {
  return (
    <dl className="m-0 grid grid-cols-1 gap-3">
      {[
        ["Department", "Finance"],
        ["Manager", "Sara Malik"],
        ["Joined", "4 March 2021"],
        ["Location", "Lahore office"],
      ].map(([term, value]) => (
        <div key={term} className="flex flex-col gap-0.5">
          <dt className="text-body-small text-muted">{term}</dt>
          <dd className="m-0 text-body-default text-primary">{value}</dd>
        </div>
      ))}
    </dl>
  );
}

<Drawer
  title="Ayesha Khan"
  subtitle="Senior accountant"
  trigger={<Button variant="secondary">View profile</Button>}
  secondaryAction={
    <Button variant="secondary" size="md">
      Edit
    </Button>
  }
  primaryAction={
    <Button size="md" slot="close">
      Done
    </Button>
  }
  defaultOpen
  size="md"
>
  {<ProfileDetails />}
</Drawer>;

Large

Figma Size=lg (640 px).

Loading example…

app.tsx

import { Button, Drawer } from "@nexera-ui/react";

function ProfileDetails() {
  return (
    <dl className="m-0 grid grid-cols-1 gap-3">
      {[
        ["Department", "Finance"],
        ["Manager", "Sara Malik"],
        ["Joined", "4 March 2021"],
        ["Location", "Lahore office"],
      ].map(([term, value]) => (
        <div key={term} className="flex flex-col gap-0.5">
          <dt className="text-body-small text-muted">{term}</dt>
          <dd className="m-0 text-body-default text-primary">{value}</dd>
        </div>
      ))}
    </dl>
  );
}

<Drawer
  title="Ayesha Khan"
  subtitle="Senior accountant"
  trigger={<Button variant="secondary">View profile</Button>}
  secondaryAction={
    <Button variant="secondary" size="md">
      Edit
    </Button>
  }
  primaryAction={
    <Button size="md" slot="close">
      Done
    </Button>
  }
  defaultOpen
  size="lg"
>
  {<ProfileDetails />}
</Drawer>;

Start

Figma Position=Left: the start edge, which is the right edge in right-to-left layouts.

Loading example…

app.tsx

import { Button, Drawer } from "@nexera-ui/react";

function ProfileDetails() {
  return (
    <dl className="m-0 grid grid-cols-1 gap-3">
      {[
        ["Department", "Finance"],
        ["Manager", "Sara Malik"],
        ["Joined", "4 March 2021"],
        ["Location", "Lahore office"],
      ].map(([term, value]) => (
        <div key={term} className="flex flex-col gap-0.5">
          <dt className="text-body-small text-muted">{term}</dt>
          <dd className="m-0 text-body-default text-primary">{value}</dd>
        </div>
      ))}
    </dl>
  );
}

<Drawer
  title="Ayesha Khan"
  subtitle="Senior accountant"
  trigger={<Button variant="secondary">View profile</Button>}
  secondaryAction={
    <Button variant="secondary" size="md">
      Edit
    </Button>
  }
  primaryAction={
    <Button size="md" slot="close">
      Done
    </Button>
  }
  defaultOpen
  position="start"
>
  {<ProfileDetails />}
</Drawer>;

With back

Figma Show back: a back button for drawers that step through nested views.

Loading example…

app.tsx

import { Button, Drawer } from "@nexera-ui/react";

function ProfileDetails() {
  return (
    <dl className="m-0 grid grid-cols-1 gap-3">
      {[
        ["Department", "Finance"],
        ["Manager", "Sara Malik"],
        ["Joined", "4 March 2021"],
        ["Location", "Lahore office"],
      ].map(([term, value]) => (
        <div key={term} className="flex flex-col gap-0.5">
          <dt className="text-body-small text-muted">{term}</dt>
          <dd className="m-0 text-body-default text-primary">{value}</dd>
        </div>
      ))}
    </dl>
  );
}

<Drawer
  title="Leave balance"
  subtitle="Ayesha Khan"
  trigger={<Button variant="secondary">View profile</Button>}
  secondaryAction={
    <Button variant="secondary" size="md">
      Edit
    </Button>
  }
  primaryAction={
    <Button size="md" slot="close">
      Done
    </Button>
  }
  defaultOpen
  onBack={() => undefined}
>
  {<ProfileDetails />}
</Drawer>;

Long content

A body longer than the panel scrolls (and joins the tab order) between the fixed header and footer.

Loading example…

app.tsx

import { Button, Drawer } from "@nexera-ui/react";

<Drawer
  title="Activity of the payroll and finance team during the last quarter of the year"
  subtitle="Senior accountant"
  trigger={<Button variant="secondary">View profile</Button>}
  secondaryAction={
    <Button variant="secondary" size="md">
      Edit
    </Button>
  }
  primaryAction={
    <Button size="md" slot="close">
      Done
    </Button>
  }
  defaultOpen
>
  {
    <div className="flex flex-col gap-3">
      {Array.from({ length: 24 }, (_, index) => (
        <p key={index} className="m-0">
          {index + 1}. Sara Malik approved a leave request for the last week of December and updated
          the payroll calendar for the team.
        </p>
      ))}
    </div>
  }
</Drawer>;

Right to left

Right-to-left: the default end drawer opens from the left edge and the close button sits on the left.

Loading example…

app.tsx

import { Button, Drawer } from "@nexera-ui/react";

function ProfileDetails() {
  return (
    <dl className="m-0 grid grid-cols-1 gap-3">
      {[
        ["Department", "Finance"],
        ["Manager", "Sara Malik"],
        ["Joined", "4 March 2021"],
        ["Location", "Lahore office"],
      ].map(([term, value]) => (
        <div key={term} className="flex flex-col gap-0.5">
          <dt className="text-body-small text-muted">{term}</dt>
          <dd className="m-0 text-body-default text-primary">{value}</dd>
        </div>
      ))}
    </dl>
  );
}

<Drawer
  title="عائشة خان"
  subtitle="محاسبة أولى"
  trigger={<Button variant="secondary">عرض الملف</Button>}
  secondaryAction={
    <Button variant="secondary" size="md">
      تعديل
    </Button>
  }
  primaryAction={
    <Button size="md" slot="close">
      تم
    </Button>
  }
  defaultOpen
  closeLabel="إغلاق"
  backLabel="رجوع"
  onBack={() => undefined}
>
  {<ProfileDetails />}
</Drawer>;

Props 20

Press "Try it" on a card to load that prop into the playground.

title*Nexera

ReactNode

Title: a level 2 heading that names the dialog. It wraps instead of truncating.

subtitleNexera

ReactNode

Supporting line under the title. Also the dialog's description.

childrenNexera

ReactNode

The body: details, a form, a list. It fills the panel and scrolls.

primaryActionNexera

ReactNode

Main action at the end of the footer: <Button size="md">. Give it slot="close" to close the drawer when pressed. The footer is shown when an action is provided.

secondaryActionNexera

ReactNode

Action before it: <Button variant="secondary" size="md">.

onBackNexera

() => void

Shows the back button at the start of the header and is called when it is pressed, for drawers that step through nested views.

backLabelNexera

string

Accessible name of the back button. Translate it for your locale.

closeLabelNexera

string

Accessible name of the close button. Translate it for your locale.

sizeNexera

"sm" | "md" | "lg"

Width: 400 / 480 / 640 px, never wider than the viewport.

positionNexera

"start" | "end" | "left" | "right"

Edge the panel opens from. start and end follow the reading direction; left and right stay on that physical side in both directions.

isDismissableNexera

boolean

Whether a click on the scrim closes the drawer. Escape and the close button always close it unless isKeyboardDismissDisabled.

idNexera

string

Id of the panel element.

classNameNexera

string

Extra classes for the panel, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style for the panel.

triggerNexera

ReactElement<unknown, string | JSXElementConstructor<any>>

The element that opens the overlay, usually a Nexera Button. It toggles the overlay when pressed and gets focus back when the overlay closes. Leave it out to open the overlay from your own state (isOpen + onOpenChange).

isOpenNexera

boolean

Whether the overlay is open (controlled). Use with onOpenChange.

defaultOpenNexera

boolean

Whether the overlay is open on first render (uncontrolled).

onOpenChangeNexera

(isOpen: boolean) => void

Called when the overlay opens or closes (Escape, the close button, a slot="close" action, a click outside).

shouldCloseOnInteractOutsideReact Aria

(element: Element) => boolean

When user interacts with the argument element outside of the overlay ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, onClose will always be called on interaction outside the overlay ref.

isKeyboardDismissDisabledReact Aria

boolean

Whether pressing the escape key to close the modal should be disabled.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

5 direct · 5 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.3.2Meaningful SequenceLevel A · supporting test
1.4.10ReflowLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.1.2No Keyboard TrapLevel A · tested directly
2.3.3Animation from InteractionsLevel AAA · supporting test
2.4.3Focus OrderLevel A · tested directly
2.4.7Focus VisibleLevel AA · supporting test
2.5.8Target Size (Minimum)Level AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-entering
data-exiting

Usage

<Drawer className="data-entering:opacity-90 shadow-sm" />

Theme studio

Drawer

Try every prop. Copy the code.

Examples 6

Medium

Large

Start

With back

Long content

Right to left

Props 20

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components