RadCN
Displayreadycomponentready

Alert

A server-rendered alert primitive for important status, success, and destructive messages with app-owned icon composition.

Importimport { Alert, AlertDescription, AlertTitle } from 'radcn/alert'
Preview

Live package example

Render the upstream Alert demo and destructive examples with exact copy, variants, description lists, and app-owned icons.

Example Parity

Render the upstream Alert demo and destructive examples with exact copy, variants, description lists, and app-owned icons.

Preview
import { Alert, AlertDescription, AlertTitle } from 'radcn/alert'

function AlertIcon({ label }: { label: string }) {
  return (
    <svg aria-hidden="true" class="alert-icon" fill="none" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" />
      <path d="m9 12 2 2 4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
      <title>{label}</title>
    </svg>
  )
}

export function AlertExamples() {
  return (
    <div class="alert-example-grid">
      <Alert>
        <AlertIcon label="CheckCircle2Icon" />
        <div>
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertDescription>This is an alert with icon, title and description.</AlertDescription>
        </div>
      </Alert>

      <Alert>
        <AlertIcon label="PopcornIcon" />
        <div>
          <AlertTitle>This Alert has a title and an icon. No description.</AlertTitle>
        </div>
      </Alert>

      <Alert variant="destructive">
        <AlertIcon label="AlertCircleIcon" />
        <div>
          <AlertTitle>Unable to process your payment.</AlertTitle>
          <AlertDescription>
            <p>Please verify your billing information and try again.</p>
            <ul>
              <li>Check your card details</li>
              <li>Ensure sufficient funds</li>
              <li>Verify billing address</li>
            </ul>
          </AlertDescription>
        </div>
      </Alert>

      <Alert variant="destructive">
        <AlertIcon label="AlertCircleIcon" />
        <div>
          <AlertTitle>Error</AlertTitle>
          <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
        </div>
      </Alert>
    </div>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Alert, AlertDescription, AlertTitle } from 'radcn/alert'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Alert renders role="alert" so important messages are exposed as assertive status content.
  • AlertTitle and AlertDescription keep title and supporting copy separate for screen readers and visual hierarchy.
  • Description content may include paragraphs and lists because AlertDescription accepts app-owned children.
  • Decorative icons should be aria-hidden unless the app provides additional accessible text.

Customization

  • Alert exposes data-radcn-alert, data-radcn-alert-title, data-radcn-alert-description, and data-radcn-alert-action hooks.
  • Use variant="destructive" for destructive alert styling and data-variant for tests or app-level styling.
  • Use class, style, and CSS variables such as --radcn-alert-bg, --radcn-alert-border, and --radcn-alert-fg for customization.
  • Icon grid layout, SVG presentation, and stacked example layout remain app-owned composition.

Remix 3 Notes

  • className maps to class, data-slot maps to data-radcn-alert* hooks, and React prop spreading maps to explicit Remix UI props.
  • cva and Tailwind utilities map to RadCN package classes, style, and CSS variables.
  • AlertCircleIcon, CheckCircle2Icon, PopcornIcon, and lucide-react are app-owned presentation, not RadCN package dependencies.
  • Icon grid and SVG layout stay in docs or application markup rather than the Alert package API.
  • Alert Dialog is a separate component surface and is not part of Alert example parity.
  • vendor source remains read-only evidence and is not imported by RadCN.