iconiq.

Alert

Dismissible banners with your own leading icon, spring motion, and optional fixed positions. Built with Framer Motion and your theme tokens.

Live preview

Position

Calls from the touchline · Pins to your post · Timer runs it off the pitch

Install

v0

Ship the registry bundle to v0 and iterate on motion or layout with prompts.

Usage

Default export — see tile 05 for icon, position, and packages.

tsx
import Alert from "@/components/ui/alert";
import { CheckCircle2 } from "lucide-react";

export function FullTimeNotice() {
  return (
    <Alert
      dismissible
      icon={<CheckCircle2 aria-hidden className="size-[18px]" />}
      message="Three points in the bag — debrief in five minutes."
      title="Full time"
    />
  );
}

Dependencies

Registry peers — default export Alert.

icon — required

ReactNode for the leading graphic. Pass any icon sized to ~18 px (e.g. a Lucide icon with className="size-[18px]"). The wrapper applies [&_svg]:h-[18px] [&_svg]:w-[18px] as a fallback.

title — required

Primary bold line rendered above the message.

message — required

Secondary descriptive text shown below the title.

dismissible — optional · default true

When true a ✕ close button is rendered. Clicking it hides the alert and fires onDismiss. Set to false to remove the button entirely — auto-timeout still applies unless timeout={0} is also passed.

timeout — optional · default 10 000 ms

Auto-dismisses the alert after this many milliseconds. A thin progress bar at the bottom visualises the countdown. Pass 0 to disable auto-dismiss and keep the alert open until manually closed.

position — optional

Fixes the alert to the viewport at the chosen corner via createPortal, escaping any ancestor transforms. On mobile (< 640 px) every value falls back to full-width top. Values: top-left · top-center · top-right · bottom-left · bottom-center · bottom-right. Omit for in-flow layout.

onDismiss — optional

Callback fired after the alert is hidden — whether by the user clicking ✕ or by the auto-timeout. Internal visibility is cleared first.

framer-motion

Drives all motion: spring entrance (opacity + blur + y), staggered children (icon → title → message → close button), linear progress bar countdown, and animated close button. Peer dependency — install separately.

createPortal · react-dom

When position is set the alert mounts on document.body so CSS transforms on ancestor elements (Framer Motion cards, modals, etc.) can never break fixed viewport positioning.

shadcn registry

Only peer dependency is framer-motion.

npx shadcn@latest add https://iconiqui.com/r/alert.json