Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-alert"use client"
import { Button } from "@heroui/react"
import { Alert } from "@/components/ui/heroui-alert"
export default function DangerStepsDemo() {
return (
<div className="w-full max-w-xl">
<Alert status="danger">
<Alert.Indicator />
<Alert.Content>
<Alert.Title>Unable to connect to server</Alert.Title>
<Alert.Description>
We're experiencing connection issues. Please try the following:
<ul className="mt-2 list-inside list-disc space-y-1 text-sm">
<li>Check your internet connection</li>
<li>Refresh the page</li>
<li>Clear your browser cache</li>
</ul>
</Alert.Description>
<Button className="mt-2 sm:hidden" size="sm" variant="danger">
Retry
</Button>
</Alert.Content>
<Button className="hidden sm:block" size="sm" variant="danger">
Retry
</Button>
</Alert>
</div>
)
}