hiip/ui
14 items

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.
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/alert

Or 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

PropTypeDefault
icon

A 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