animui

Alert

A persistent message that helps people recover or continue.

npm install https://animui.stracture.net/__local/package.tgz
Live · keyboard ready
  • Persistent, in-flow messages about a page or form, such as an expiring card.
  • Status that changes over time, where one alert should morph between tones.
  • Dismissible notices that should collapse and close the gap below them.
  • Use toast or toast-stack for transient results of an action.
  • Use empty-state when there is no content to show.
  • Use dialog when people must respond before continuing.

Installation

Install animui once, then import any component or block from its typed package entry.

animui · 250 components and blocks

React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.

npm install https://animui.stracture.net/__local/package.tgz

Load the stylesheet once at your app root, then use the typed component import:

import 'animui/styles.css';
import { Alert } from 'animui/alert';

Read the Code tab for the implementation files and the API reference below for required props.

Download animui 0.3.0 · Agent guide
example.tsx
import { Alert } from "animui/alert"; export function BillingNotice() {  return (    <Alert tone="warning" title="Card expires soon" onDismiss={() => track("dismissed")}>      Update your payment method before March 1 to avoid interruption.    </Alert>  );}

Alert

An inline message with a tone icon, title, and optional details that morph when they change.

PropTypeDefaultDescription
titleRequiredstring–Headline. A new title rises in over the old one.
tone"info" | "success" | "warning" | "danger""info"Colour and icon. Danger uses role="alert"; the rest use role="status".
childrenReactNode–Details under the title. String children crossfade when they change.
openboolean–Controls presence. Hiding collapses the height and fades it out.
onDismiss() => void–Shows a dismiss button. Uncontrolled alerts collapse first, then call this.
...propsHTMLAttributes<HTMLDivElement>–Forwarded to the alert element, such as className and id.
EnterorSpace
Activates the dismiss button when present.
  • Danger alerts use role="alert" and interrupt; other tones use role="status" and announce politely.
  • Outgoing copies are aria-hidden while they fade, so the live region reads only the current text.
  • The dismiss button is labelled "Dismiss: <title>"; the tone icon is aria-hidden.
  • Presence collapses or expands the height on a smooth spring with a fade, so content below closes the gap.
  • Tone changes morph the icon through a small scale and blur; copy changes rise in while the height springs to fit.
  • Reduced motion swaps content with short fades and no height animation.
  • The alert fills its container and the copy wraps; the icon and dismiss button keep fixed sizes.
  • Hover styles on the dismiss button apply only on hover-capable fine pointers.
  • A ResizeObserver lets the height spring when copy changes; keep only a few alerts mounted per page.

Notes for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Use for persistent, in-flow messages tied to a page or form. Use toast or toast-stack for transient results of an action.
  • Keep one Alert mounted and change tone, title, and children to morph between states instead of swapping components.
/components/alert/markdown

The full library index for assistants is at /llms.txt.

ToastComponentBrief confirmation for a completed background action.Toast stackComponentStack short results at the edge until you reach for them.Empty stateComponentA useful next step when there is nothing to show yet.