480
Sponsor

Alert

PreviousNext

Alert box with success/error/warning/info variants

InkOpenTUI
Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/alert

Usage

import { Alert } from "@/components/ui/alert";
<Alert variant="success" title="Build complete">
  Everything is ready to ship.
</Alert>

Examples

Error

Use variant="error" to display an error alert.

Terminal
import { Alert } from "@/components/ui/alert";

export function AlertError() {
  return (
    <Alert variant="error" title="Build failed">
      TypeScript found 3 errors in src/index.ts.
    </Alert>
  );
}

Warning

Use variant="warning" to display a warning alert.

Terminal
import { Alert } from "@/components/ui/alert";

export function AlertWarning() {
  return (
    <Alert variant="warning" title="Deprecation notice">
      This API will be removed in v3.0.
    </Alert>
  );
}

Without Border

Set bordered={false} to remove the border.

Terminal
import { Alert } from "@/components/ui/alert";

export function AlertNoBorder() {
  return (
    <Alert variant="warning" title="Deprecation" bordered={false}>
      This API will be removed in v3.0.
    </Alert>
  );
}

Custom Icon and Color

Override the icon and color with icon and color props.

Terminal
import { Alert } from "@/components/ui/alert";

export function AlertCustom() {
  return (
    <Alert variant="success" icon="🚀" color="#a78bfa" title="Deployed">
      Production deploy finished in 42s.
    </Alert>
  );
}

API Reference

Alert

PropTypeDefault
variant"success" | "error" | "warning" | "info""info"
titlestring-
childrenReactNode-
iconstring-
borderedbooleantrue
borderStyle"single" | "double" | "round" | "bold" | "singleDouble" | "doubleSingle" | "classic"-
colorstring-
paddingXnumber1
paddingYnumber0