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.

Toast

Auto-dismissing toast notification

Ink OpenTUI

Terminal

Installation


$ pnpm dlx shadcn@latest add @termcn/toast

Usage

import { Toast } from "@/components/ui/toast";

<Toast
  variant="success"
  message="Settings saved successfully."
  duration={5000}
  onDismiss={() => console.log("toast closed")}
/>

Examples

Error with Longer Duration

Terminal

import { Toast } from "@/components/ui/toast";

export function ToastError() {
  return (
    <Toast
      variant="error"
      message="Deploy failed. Check logs."
      duration={8000}
    />
  );
}

API Reference

Toast

Prop	Type	Default
`message`	`string`	`required`
`variant`	`"success" \| "error" \| "warning" \| "info"`	`"info"`
`duration`	`number`	`3000`
`onDismiss`	`() => void`	-
`icon`	`string`	-

Status Message Navigation

On This Page

Installation Usage Examples Error with Longer Duration API Reference Toast

Edit this page Follow @shadcnlabs Join community