Colorful Alerts

Component

About

Colorful Alerts

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

Code

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

Usage.tsx

import { 
  AlertWrapper, 
  AlertText 
} from "@/components/ui/colorful-alerts"; // Adjust import path as needed

export default function DemoTen() {
  return (
    <div className={'h-screen w-full flex flex-col gap-6 items-center justify-center p-8'}>
      <AlertWrapper type="info">
        <AlertText>
          A new software update is available for download.
        </AlertText>
      </AlertWrapper>
      <AlertWrapper type="warning">
        <AlertText>
          Your trial period will expire in 3 days.
        </AlertText>
      </AlertWrapper>
      <AlertWrapper type="success">
        <AlertText>
          Your password has been updated successfully.
        </AlertText>
      </AlertWrapper>
    </div>
  )
}