Drawer

Right-edge sliding panel for create and edit flows, with focus trap and dismiss.

Drawer is a portaled panel that slides in from the right edge — ideal for create/edit forms and detail views that need more room than a Modal but should keep the user oriented to the page behind. It traps focus, dims the page with a backdrop, and dismisses on Escape or backdrop click. Controlled via open/onClose; pick a width of 'sm', 'md' (default), or 'lg'.

Example

Preview

import { Drawer } from '@officina/ui';
import { useState } from 'react';

function EditPanel() {
  const [open, setOpen] = useState(false);
  return (
    <Drawer
      open={open}
      onClose={() => setOpen(false)}
      title="Edit user"
      description="Changes save when you submit."
      width="md"
    >
      {/* form fields */}
    </Drawer>
  );
}

API

Prop	Type	Default	Description
children*	ReactNode	—	Drawer body content.
onClose*	() => void	—	Called when the drawer requests to close (backdrop, escape, close button).
open*	boolean	—	Whether the drawer is open (controlled).
description	string	—	Optional supporting text below the title.
width	enum	md	Panel width preset. Defaults to `'md'`.

Example

API

On this page