Alert

@/components/kamod-ui/alert

Payment successful

Your payment of $29.99 has been processed. A receipt has been sent to your email address.

New feature available

We've added dark mode support. You can enable it in your account settings.

Installation

Import Alert parts from `@/components/kamod-ui/alert`.

pnpm add @kamod-ch/ui

import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/kamod-ui/alert";

Usage

Put an optional Lucide icon first, then AlertTitle and AlertDescription. Use AlertAction for a corner control.

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

<Alert />

import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/kamod-ui/alert"
import { Button } from "@/components/kamod-ui/button";
import { Info } from "lucide-preact";

<Alert>
  <Info />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>You can add components using the CLI.</AlertDescription>
  <AlertAction>
    <Button variant="outline">Enable</Button>
  </AlertAction>
</Alert>

Basic

Icon, title, and description in a max-width column.

Account updated successfully

Your profile information has been saved. Changes will be reflected immediately.

Destructive

Use variant="destructive" for errors and irreversible failures.

Payment failed

Your payment could not be processed. Please check your payment method and try again.

Action

AlertAction pins a button (or group) to the top-inline-end; the root adds padding so text does not overlap.

Dark mode is now available

Enable it under your profile settings to get started.

Custom colors

Override surface and border with utilities (e.g. amber) for marketing or billing warnings.

Your subscription will expire in 3 days.

Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.

API Reference

Props overview.

Alert

shadcn-compatible `default` and `destructive`, plus Kamod semantic variants (primary, secondary, info, success, warning, error).

Prop	Type	Default
variant	`"default" \| "destructive" \| "primary" \| "secondary" \| "info" \| "success" \| "warning" \| "error"`	`"default"`
class	`string`	`-`
children	`ComponentChildren`	`-`

AlertTitle

Prop	Type	Default
class	`string`	`-`

AlertDescription

Prop	Type	Default
class	`string`	`-`

AlertAction

Absolutely positioned at top-end; reserve space with parent padding.

Prop	Type	Default
class	`string`	`-`

Accessibility Notes

Use Alert with clear labels, keyboard-friendly interactions and semantic structure.