Drawer

Use Drawer for navigation or settings that users open when needed. Its trigger opens a native dialog over the page without moving the page layout. Choose the left or right edge with side. It fills the viewport height and, at 425px and below, the full viewport width.

The drawer manages keyboard focus. Close it with its close button, Escape, or a click on the backdrop. Escape and backdrop dismissal can be configured with closeOnEscape and closeOnOverlay. It has no built-in sliding animation.

Import it from the client entry point. A Server Component can render it with the built-in trigger; controlled open state and event callbacks belong in a client wrapper. Use Sidebar for a persistent panel beside your content.

Drawer also accepts the Modal props, including title, description, trigger, open, defaultOpen, and onOpenChange.

Customize this component

1. Choose a name.
2. Add its CSS to your app’s theme.css, imported after the package styles.
3. Pass the same name to the prop. No registration, provider, or package edits are needed. Built-in TypeScript suggestions remain available.

A custom name alone does not create styles: until its CSS is loaded, it inherits the component’s base appearance. The examples below are application styles, not additional package defaults.

/* app/theme.css — import after @fwenthehunter/friendly-ui/styles.css */
@layer components {
  @media (min-width: 426px) {
    .fui-drawer[data-size="wide"] {
      width: 24rem;
      max-width: 100vw;
    }
  }
}

import { Drawer } from "@fwenthehunter/friendly-ui/client";

<Drawer size="wide" side="right" title="Workspace" trigger="Open wide sidebar">
  Workspace navigation
</Drawer>