Drawer - HapplyUI

A slide-in drawer panel with overlay backdrop, header with close button, body, and footer sections.

Installation

bunx @happlyui/cli@latest add drawer

Dependencies

npm packages

@radix-ui/react-dialog
@remixicon/react

Registry dependencies

These are automatically installed when you add this component.

happly-ui-utils
compact-button

Usage

import * as Drawer from "@/components/ui/drawer"

<Drawer.Root>
  <Drawer.Trigger>Open</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>

Examples

Basic

Simple drawer with header, body placeholder, and footer button.

<Drawer.Root>
  <Drawer.Trigger asChild>
    <Button.Root>Open Drawer</Button.Root>
  </Drawer.Trigger>
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title>Drawer Title</Drawer.Title>
    </Drawer.Header>
    <Drawer.Body>Content</Drawer.Body>
    <Drawer.Footer className="border-t">
      <Button.Root>Footer Button</Button.Root>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Demo

Drawer with contact details, information sections, and transaction list.

<Drawer.Root>
  <Drawer.Trigger asChild>
    <Button.Root>Open Drawer</Button.Root>
  </Drawer.Trigger>
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title>Contact Details</Drawer.Title>
    </Drawer.Header>
    <Drawer.Body>...</Drawer.Body>
    <Drawer.Footer className="border-t">
      <Button.Root>See All Transactions</Button.Root>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

API Reference

Drawer.Root

The root drawer container. Passes through Radix Dialog.Root props.

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes

Drawer.Trigger

The element that opens the drawer.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element using Radix Slot

Drawer.Content

The drawer panel that slides in from the right with overlay.

Prop	Type	Default	Description

Drawer.Header

Header area with optional close button.

Prop	Type	Default	Description
`showCloseButton`	`boolean`	`true`	Show the close button

Drawer.Title

The drawer title text.

Prop	Type	Default	Description

Drawer.Body

The main scrollable content area.

Prop	Type	Default	Description

Drawer.Footer

Footer area for action buttons.

Prop	Type	Default	Description

Drawer.Close

Closes the drawer when clicked.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element using Radix Slot