Primitives

Drawer

Sliding panel that overlays the page from any edge. Ideal for navigation menus, filters, detail views, and form sidebars.

Live Demo

Interactive Drawer

Installation

npm install @trinkui/react

Import

import { Drawer } from "@trinkui/react";

Usage

Drawer Title

Drawer content goes here. This panel slides in from the right side of the screen.

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open Drawer</Button>

<Drawer
  open={open}
  onClose={() => setOpen(false)}
  title="Drawer Title"
  footer={
    <>
      <Button onClick={() => setOpen(false)}>Confirm</Button>
      <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
    </>
  }
>
  <p>Drawer content goes here.</p>
</Drawer>

Positions

Left

Right

Top

Bottom

<Drawer position="left" ... />
<Drawer position="right" ... />
<Drawer position="top" ... />
<Drawer position="bottom" ... />

Sizes

320px

448px

640px

full

100%

<Drawer size="sm" ... />
<Drawer size="md" ... />
<Drawer size="lg" ... />
<Drawer size="full" ... />

Props

Prop	Type	Default	Description
open	boolean	false	Whether the drawer is visible
onClose	() => void	--	Callback to close the drawer
position	"left" \| "right" \| "top" \| "bottom"	"right"	Edge from which the drawer slides in
size	"sm" \| "md" \| "lg" \| "full"	"md"	Width (left/right) or height (top/bottom) of the panel
title	string	--	Title displayed in the drawer header
children	ReactNode	--	Body content of the drawer
footer	ReactNode	--	Footer content, typically action buttons
closeOnBackdrop	boolean	true	Close the drawer when clicking the backdrop overlay

Accessibility

Implements a focus trap to keep keyboard navigation within the open drawer.
Pressing Escape closes the drawer.
Uses role="dialog" and aria-modal="true".
Title is announced via aria-labelledby.
Focus is returned to the trigger element when the drawer closes.

Divider Dropdown