/
1.1k
Sponsor

Panel

Titled bordered panel

Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/ink/panel

Usage

import { Panel } from "@/components/ui/panel";
<Panel title="System Status" borderStyle="round" width={40}>
  <Text>All services operational</Text>
</Panel>

API Reference

Panel

PropTypeDefault
titlestring-
titleColorstring-
borderColorstring-
borderStyle"single" | "double" | "round" | "bold" | "singleDouble" | "doubleSingle" | "classic"-
borderedbooleantrue
widthnumber-
heightnumber-
paddingXnumber1
paddingYnumber0
childrenReactNode-

Notes

Accessibility

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

  • Screen reader: Screen-reader mode removes decorative output while preserving meaningful labels and state.