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.