Utility
Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/status-message
Usage
import { StatusMessage } from "@/components/ui/status-message";<StatusMessage variant="success">All tests passed.</StatusMessage>Examples
Variants
Terminal
import { Box } from "ink";
import { StatusMessage } from "@/components/ui/status-message";
export function StatusMessageVariants() {
return (
<Box flexDirection="column" gap={1}>
<StatusMessage variant="success">Build passed.</StatusMessage>
<StatusMessage variant="error">Connection failed.</StatusMessage>
<StatusMessage variant="warning">Rate limit at 80%.</StatusMessage>
<StatusMessage variant="loading">Fetching config...</StatusMessage>
</Box>
);
}API Reference
StatusMessage
| Prop | Type | Default |
|---|---|---|
variant | "success" | "error" | "warning" | "info" | "loading" | "pending" | "info" |
children | ReactNode | required |
icon | string | - |
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: Ink labels and semantic state expose the component without relying on visual styling alone.