StacklyUI
Components/Alert

Alert

A callout with a signature colored accent rail.

01

Preview & playground

Edit the code — the preview updates live. Try changing props, text, or classes.

playground.tsx
render(
  <Alert variant="info" className="max-w-md">
    <div>
      <AlertTitle>Heads up</AlertTitle>
      <AlertDescription>You can add components to your project via the CLI.</AlertDescription>
    </div>
  </Alert>
)
02

Examples

Common variations — edit any of them live.

Variants

playground.tsx
render(
  <div className="w-full max-w-md space-y-3">
    <Alert variant="success"><div><AlertTitle>Saved</AlertTitle><AlertDescription>Your changes are live.</AlertDescription></div></Alert>
    <Alert variant="warning"><div><AlertTitle>Careful</AlertTitle><AlertDescription>This will affect billing.</AlertDescription></div></Alert>
    <Alert variant="destructive"><div><AlertTitle>Error</AlertTitle><AlertDescription>Something went wrong.</AlertDescription></div></Alert>
  </div>
)
03

Installation

Copy the source into your project with the registry CLI:

$pnpm dlx shadcn@latest add @stacklyui/alert

Or install the package and import it:

$pnpm add @stacklyui/ui motion
04

Usage

Import Alert from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.