Alert

Renders an inline alert with a title, icon, and body text. It displays different styles based on variant: info, success, warning, or destructive. Use it to show contextual messages on a page.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/alert

npx layro-cli add @educlopez/alert

npx layro-cli add @educlopez/alert

bunx layro-cli add @educlopez/alert

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import type { ComponentProps, ReactNode } from "react";

export type AlertVariant = "info" | "success" | "warning" | "destructive";

export interface AlertProps extends Omit<ComponentProps<"div">, "title"> {
  /** Body copy under the title */
  children?: ReactNode;
  /** Optional leading icon */
  icon?: ReactNode;
  /** Bold heading line */
  title?: ReactNode;