Drawer

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @termcn/ink/drawer
Copy

Usage

Copyimport { Drawer } from "@/components/ui/drawer";

Copy<Drawer
  isOpen={true}
  edge="right"
  title="Details"
  width={40}
  onClose={() => close()}
>
  <Text>Name: my-project</Text>
  <Text>Status: active</Text>
</Drawer>

API Reference

Drawer

Notes

Accessibility

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

• Keyboard: Tab / Shift+Tab move through enabled controls inside the active scope; Enter / Space activate the focused control; Escape closes only the topmost active surface and restores focus.
• Focus and composition: While open, the active focus scope contains traversal, gives input ownership to the topmost scope, and restores focus when it closes.
• Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.