1Sponsor

Status Message

Inline status message with icon and color

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/status-message.json

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 "@/registry/ui/status-message";

export default 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

PropTypeDefault
variant"success" | "error" | "warning" | "info" | "loading" | "pending""info"
childrenReactNoderequired
iconstringundefined