Components

Alert

Tonal callout.

Phase three is live

Twenty new components just landed in the gallery.

Sync interrupted

Dismiss me — the row collapses as it fades.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add alert

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Alert } from "@lumora/ui/components/alert";
// or from the barrel:
import { Alert } from "@lumora/ui";

Props worth knowing

tone: neutral | accent | positive | negative — the negative tone announces assertively via role="alert", the rest stay polite. title bolds the first line and icon overrides the tone glyph. dismissible (default false) adds a close button that collapses the height while it fades; onDismiss fires after. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.