Feedback

Alert.

Information that should stay visible.

LIVE PREVIEWTry it. It works.
Changes saved
Your project is up to date.
Review your settings
Some changes need your attention.

Install the source

Terminal
npx shadcn@latest add https://ui.bld8.dev/r/alert.json

Registry setup · Open the playground

Usage

React / TypeScript
<Alert title="Changes saved" tone="success">The project is up to date.</Alert>

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

tone: neutral | success | warning | danger. Set live only for dynamically inserted messages: danger uses role=alert, other tones use role=status.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.