HeroUI Alert

HeroUI v3 Alert — status-aware feedback messages built with the real @heroui/react package. Includes default, accent, success, warning and danger statuses, action buttons, close buttons, custom indicators, compact alerts, stacked notifications, maintenance notices and custom BEM/Tailwind styling. Works in light and dark themes.

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

"use client"

import { CloseButton } from "@heroui/react"
import { Alert } from "@/components/ui/heroui-alert"

export default function SuccessCloseDemo() {
  return (
    <div className="w-full max-w-xl">
      <Alert status="success">
        <Alert.Indicator />
        <Alert.Content>
          <Alert.Title>Profile updated successfully</Alert.Title>
        </Alert.Content>
        <CloseButton aria-label="Dismiss success message" />
      </Alert>
    </div>
  )
}