Call out a notice or an error state

At a glanceCopy Anchor Link

• Who: Developers surfacing notices, warnings and errors inline.
• What: Notice/error callouts with title and description.
• Use when: For states tied to page content (load errors, warnings).
• Avoid when: For transient confirmations — use Toaster instead.
• See also: Show toast notifications

PreviewCopy Anchor Link

InstallCopy Anchor Link

pnpm add @zedtech/zedkit-ui

Latest: 0.3.0 (via changesets).

ExampleCopy Anchor Link

import { Alert, AlertDescription, AlertTitle } from "@zedtech/zedkit-ui";
<Alert><AlertTitle>Heads up</AlertTitle>
<AlertDescription>Something worth knowing.</AlertDescription></Alert>
<Alert variant="destructive"><AlertTitle>Failed</AlertTitle>
<AlertDescription>Something went wrong.</AlertDescription></Alert>

Wraps: class-variance-authority