Many apps need to surface alerts, warnings, notices, and status messages in the page—but rolling them by hand means hardcoding border colors, shadows, spacing, and dark-mode variants into your JSX. Alerts scattered across a codebase with inconsistent padding, color values, and dismiss behaviors create visual clutter and make redesigns painful.

Callout is a forward-ref-wrapped alert component with a colored left border, semantic role="alert", and a stable data-react-fancy-callout attribute for agent selection. It accepts color (any Tailwind v4 named color—5 grays + 17 hues), an optional icon (ReactNode), a dismissible boolean that shows an X button, and an onDismiss callback. Dark mode is built in; className lets you override or extend.

Import from @particle-academy/react-fancy, then render <Callout color="amber" icon={<AlertTriangle />} dismissible onDismiss={() => setState(false)}>Your message here</Callout>. Agents can select the alert via [data-react-fancy-callout] and observe or trigger the dismiss button by querying its DOM state.