/
1.1k
Sponsor

Notification Center

PreviousNext

Persistent queue-based notification panel with useNotifications hook

InkOpenTUI
Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/ink/notification-center

Usage

import { NotificationCenter } from "@/components/ui/notification-center";
import { useNotifications } from "@/hooks/use-notifications";
const { notify } = useNotifications();
 
notify({
  title: "Build complete",
  body: "All checks passed",
  variant: "success",
});
 
<NotificationCenter maxVisible={5} width={40} />;

API Reference

NotificationCenter

PropTypeDefault
maxVisiblenumber5
widthnumber40

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: Enter / Space activate the focused action when enabled; Escape dismisses or cancels when supported; Tab / Shift+Tab move through Ink focus targets.
  • Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
  • Screen reader: Screen-reader mode removes decorative output while preserving meaningful labels and state.