Alert

Component 15

About

Neobrutalism-styled alert component.

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 { Terminal } from 'lucide-react'

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'

const Default = () => (
    <Alert className="w-[500px]">
        <Terminal className="h-4 w-4" />
        <AlertTitle>Default Alert</AlertTitle>
        <AlertDescription>
            You can add components and dependencies to your app using the cli.
        </AlertDescription>
    </Alert>
)

const Destructive = () => (
    <Alert variant="destructive" className="w-[500px]">
        <Terminal color="white" className="h-4 w-4" />
        <AlertTitle>Destructive  Alert</AlertTitle>
        <AlertDescription>
            You can add components and dependencies to your app using the cli.
        </AlertDescription>
    </Alert>
)

export { Default, Destructive }