A collection of beautifully designed, accessible, and customizable terminal UI components. Built on Ink and OpenTUI. Works with shadcn/ui.

How do I publish components with termcn?

Add or edit components under registry/bases/ink/ or registry/bases/opentui/, register them in registry.json, run pnpm registry:build (which refreshes public/r/), then deploy. Consumers install with npx shadcn@latest add against your published registry URL.

Is termcn open source?

Yes. The source is on GitHub and released under the MIT License.

Banner

Full-width announcement banner

Ink OpenTUI

Terminal

Installation


$ pnpm dlx shadcn@latest add @termcn/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

import { Banner } from "@/components/ui/banner";

export function BannerSuccess() {
  return (
    <Banner variant="success" title="Deployed">
      All services are live.
    </Banner>
  );
}

Error with Custom Icon

Terminal

import { Banner } from "@/components/ui/banner";

export function BannerError() {
  return (
    <Banner variant="error" icon="💥" title="Crash">
      Worker process exited with code 1.
    </Banner>
  );
}

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`

Alert Multi Progress

On This Page

Installation Usage Examples Success Banner Error with Custom Icon API Reference Banner

Edit this page Follow @shadcnlabs Join community