Fluixi UI
GitHub ↗

Examples

Loading preview…

drawer

A modal off-canvas panel that slides in from an edge.

A headless drawer (sheet) built on the same overlay primitives as dialog — dismissable layer, focus trap, scroll lock. It slides from any edge via the side prop and composes from header, body, and footer parts. For a persistent, in-layout navigation rail, use sidenav instead.

Installation

pnpm add @fluixi-ui/drawer

Usage

import {
  Drawer, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent,
  DrawerHeader, DrawerTitle, DrawerBody, DrawerFooter, DrawerClose,
} from '@fluixi-ui/drawer';

<Drawer side="right">
  <DrawerTrigger>Open filters</DrawerTrigger>
  <DrawerPortal>
    <DrawerOverlay />
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Filters</DrawerTitle>
        <DrawerClose aria-label="Close">×</DrawerClose>
      </DrawerHeader>
      <DrawerBody>…</DrawerBody>
      <DrawerFooter>
        <DrawerClose>Apply</DrawerClose>
      </DrawerFooter>
    </DrawerContent>
  </DrawerPortal>
</Drawer>

Props (Drawer)

Prop Type Default Description
side 'left' | 'right' | 'top' | 'bottom' 'right' The edge the panel slides from.
open boolean — Controlled open state.
defaultOpen boolean false Initial uncontrolled open state.
onOpenChange (open: boolean) => void — Called when open state changes.
modal boolean true Trap focus and lock scroll.

Parts

Part Description
Drawer Root; owns open state and side.
DrawerTrigger Button that opens the drawer.
DrawerPortal Portals overlay + content to <body> while open.
DrawerOverlay The backdrop.
DrawerContent The focus-trapped panel; data-side, dismisses on Escape / outside pointer-down.
DrawerHeader / DrawerTitle / DrawerDescription Header region and accessible label/description.
DrawerBody Scrollable content region.
DrawerFooter Footer, typically actions.
DrawerClose Button that closes the drawer.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.