import { Alert } from "@elabs-ai/components-ui";npm install @elabs-ai/components-tokens @elabs-ai/components-uiPaste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui Alert component (from @elabs-ai/components-ui) to this project. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Look Alert up before writing code: `npx -y @elabs-ai/components-cli docs Alert` prints its real props, variants, what it pairs with and what to avoid. 3. If @elabs-ai/components-ui is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 4. Use it here: [the screen or file, and what it should show] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
Examples
Destructive
All Variants
`default` and `success` were selectable in the controls panel (`argTypes.variant.options`) but never actually rendered by any story (#388) — so neither one ever reached the blocking interaction + axe job. This renders them alongside `info`/`warning` to close that gap. `destructive` is intentionally NOT repeated here: it already has its own dedicated `Destructive` story above, with a known, separately-tracked contrast exemption (`states-alert--destructive` in scripts/a11y-baseline.json, #381) — folding it into this new story id would launder that pre-existing violation onto a brand-new, unbaselined surface.
Inline Form Error
`AlertTitle` defaults to `<h5>` (unchanged) but accepts `as` to render at a different heading level, avoiding a skipped-level jump when the alert sits inline in a form under an `<h2>`/`<h3>` (#329). Uses `variant="warning"`, not `"destructive"` — the destructive variant's text-on-tint contrast is a pre-existing, separately tracked issue (`states-alert--destructive` in scripts/a11y-baseline.json) unrelated to this fix; reusing it here would launder a second, avoidable a11y violation into a brand-new story.
Description Measure
`AlertDescription` gains an opt-in `measure` prop that caps genuine prose to a readable line length (`max-w-prose`, ~65ch) instead of running edge to edge in a wide alert (#339). Off by default.
API
Alert
AlertDescription
| Prop | Type | Description |
|---|---|---|
measure | boolean | Cap the line length to a readable prose measure (`max-w-prose`, ~65ch) for genuine paragraph content (#339). Off by default — short, label-style descriptions should stay full width. |
AlertTitle
| Prop | Type | Description |
|---|---|---|
as | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | Render at a different heading level to fit the surrounding document outline (#329), or as a `"div"` to stay out of the outline entirely. The visual (`mb-1 font-medium leading-none tracking-tight`) is identical for every value. @default "h5" `"div"` is for a title whose depth the author cannot know — content rendered into someone else's page, such as an A2UI surface, where a fixed `h5` breaks `heading-order` under any host that has no `h4` above it. The alert's own `role="alert"` announces the title either way, so nothing is lost; `CardTitle` makes the same default choice for the same reason. |