Alert

Component 58

About

Displays a callout for user attention, such as a success message, warning, or error.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Alert to your project and fits it to your theme.

Code

How Alert is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Alert, AlertContent, AlertDescription, AlertIcon, AlertTitle } from '@/components/ui/alert-1';
import { Button } from '@/components/ui/button-1';
import { RiAlertFill } from '@remixicon/react';

export default function AlertDemo() {
  return (
    <div className="flex flex-col gap-5 p-10 w-full mx-auto max-w-[600px] h-screen justify-center items-center">
      <Alert variant="primary" close={false}>
        <AlertIcon>
          <RiAlertFill />
        </AlertIcon>
        <AlertContent>
          <AlertTitle>Example Alert Title</AlertTitle>
          <AlertDescription>
            <p>
              Insert the alert description here. This is an example of a two-line message for better visual clarity.
            </p>
            <div className="space-x-3.5">
              <Button variant="inverse" mode="link" underlined="solid" size="md">
                Upgrade
              </Button>
              <Button variant="inverse" mode="link" underline="solid" size="md">
                Dismiss
              </Button>
            </div>
          </AlertDescription>
        </AlertContent>
      </Alert>
      <Alert variant="destructive" appearance="light" close={false}>
        <AlertIcon>
          <RiAlertFill />
        </AlertIcon>
        <AlertContent>
          <AlertTitle>Example Alert Title</AlertTitle>
          <AlertDescription>
            <p>
              Insert the alert description here. This is an example of a two-line message for better visual clarity.
            </p>
            <div className="space-x-3.5">
              <Button variant="foreground" mode="link" underlined="solid" size="md">
                Upgrade
              </Button>
              <Button variant="foreground" mode="link" underline="solid" size="md">
                Dismiss
              </Button>
            </div>
          </AlertDescription>
        </AlertContent>
      </Alert>
    </div>
  );
}