Alert

Callouts in info, success, warning, destructive and neutral tones — with actions, inline actions and dismiss.

2 files · 79 locdeps: clsx, tailwind-merge

New version available

OPUS 1.1 adds Reaction–Diffusion and a theme builder.

Deployment complete

Your site is live at opus-landing.vercel.app

Your trial ends in 3 days

Payment failed

We couldn’t charge the card ending 4242. Builds will pause in 24 hours.

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/alert.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs alert

import { Alert } from "@/components/opus/ui/alert";

<Alert tone="warning" title="Trial ends soon" action={<Button size="xs">Upgrade</Button>} />

Prop	Type	Default	Description
tone	"info" \| "success" \| "warning" \| "destructive" \| "neutral"	"info"	Colour + icon.
title / icon	ReactNode	—	Heading; icon={null} hides the icon.
action / inlineAction	ReactNode / boolean	—	Buttons below or at the right.
closable / onClose	boolean / () => void	—	Dismiss.