Alert

Component 99

About

Alert in shadcn/ui format

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 } from "@/components/ui/alert";
import { TriangleAlert } from "lucide-react";

function AlertBasic() {
  return (
    <Alert
      layout="row"
      icon={
        <TriangleAlert className="text-amber-500" size={16} strokeWidth={2} />
      }
    >
      <p className="text-sm">Some information is missing!</p>
    </Alert>
  );
}

export { AlertBasic };

export default AlertBasic;