Components / Feedback
Alert
A one-line inline band in four tones. The tone decides whether a screen reader interrupts.
Imports run overnight. Nothing sends until you approve the batch.
312 creators imported. 4 duplicates were merged into existing rows.
This account has 38 sends left today. The rest will queue until midnight.
Row 14: phone number is not a valid VN mobile — skipped.
demos.tsx
import { Alert } from "@/components/ui/hiip-ui/alert";
function AlertDemo() {
return (
<div className="flex w-full flex-col gap-2">
<Alert variant="info">
Imports run overnight. Nothing sends until you approve the batch.
</Alert>
<Alert variant="success">
312 creators imported. 4 duplicates were merged into existing rows.
</Alert>
<Alert variant="warning">
This account has 38 sends left today. The rest will queue until
midnight.
</Alert>
<Alert variant="error">
Row 14: phone number is not a valid VN mobile — skipped.
</Alert>
</div>
);
}Install — needs @hiip registered in components.json
bunx shadcn@latest add @hiip/alertOr by URL, with the token in the query
bunx shadcn@latest add "https://ui.hiip.ai/r/alert.json?token=$HIIP_REGISTRY_TOKEN"Both need a token — set one up.
Anatomy
Import from components/ui/hiip-ui/alert.
<Alert />
API Reference
Generated from the source. Props forwarded to the underlying element are not listed.
Alert
| Prop | Type | Default |
|---|---|---|
iconA different glyph, or `null` for none. | ReactNode | — |
variant | "info" | "success" | "warning" | "error" | null | undefined | "info" |
- Type
registry:ui- npm packages
@hugeicons/react @hugeicons/core-free-icons class-variance-authority- Files written
- components/ui/hiip-ui/alert.tsx