Component

Alert

Inline feedback for state changes, warnings, and validation summaries.

Preview

Offline changes saved

Three entries will sync when the connection returns.

Review spending

This budget is already over its daily pace.

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { Alert } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/alert.json

Copied source import

code

import "@/styles/axie.css";import { Alert } from "@/components/axie/alert";

Prefer @axie/alert? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { Alert } from "axie-ui";export function Example() {  return <Alert title="Offline changes saved" description="Three entries will sync later." />;}

Accessibility

Use `role="status"` for neutral updates and `role="alert"` only for urgent messages.
Do not rely on tone alone. The title should describe the state clearly.
Keep alerts near the field, panel, or workflow they affect.

API Reference

Prop	Type	Default	Description
tone	neutral \| accent \| danger \| warning \| info	neutral	Controls border, background, and text color.
title	ReactNode	-	Short title for the alert.
description	ReactNode	-	Supporting message.