Utility
Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/banner
Usage
import { Banner } from "@/components/ui/banner";<Banner variant="info" title="Update">
A new version is available. Run npx update to upgrade.
</Banner>Examples
Success Banner
Terminal
Error with Custom Icon
Terminal
API Reference
Banner
| Prop | Type | Default |
|---|---|---|
children | ReactNode | required |
variant | "info" | "warning" | "error" | "success" | "neutral" | "info" |
icon | string | - |
title | string | - |
dismissible | boolean | false |
onDismiss | () => void | - |
color | string | - |
accentChar | string | "┃" |
gap | number | 1 |
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/Spaceactivate the focused action when enabled;Escapedismisses or cancels when supported;Tab/Shift+Tabmove 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.