craftbits*

Alert

An inline banner for surfacing a status, error, success, or warning inside a page or panel. Four semantic variants (default, destructive, success, warning) drive the border, background tint, and heading color. Compose with AlertTitle and AlertDescription, or pass children directly for a single-line banner.

Preview

Installation

npx shadcn@latest add https://craftbits.dev/r/alert.json

Usage

import { Alert, AlertTitle, AlertDescription } from "@craft-bits/core";
 
<Alert variant="success">
  <AlertTitle>Deployment succeeded</AlertTitle>
  <AlertDescription>
    The build finished in 42 seconds and is live at the production URL.
  </AlertDescription>
</Alert>
 
<Alert variant="destructive">
  <AlertTitle>Couldn&rsquo;t save</AlertTitle>
  <AlertDescription>
    The server rejected the request. Check your connection and try again.
  </AlertDescription>
</Alert>

Single-line banner (no title / description):

<Alert variant="warning">You are approaching your monthly quota.</Alert>

Anatomy

  • Variant — default (neutral surface), destructive (red), success (green), warning (amber). Drives border, background tint, and title color.
  • AlertTitle — heading. Inherits the variant color so destructive titles read red, success titles read green.
  • AlertDescription — body. Stays in the muted foreground regardless of variant so long bodies remain readable. Wraps with [text-wrap:pretty].

Props

Alert

PropTypeDefaultDescription
variant'default' | 'destructive' | 'success' | 'warning''default'Semantic variant. Drives border, background, and title color.
childrenReactNoderequiredAlert content — typically AlertTitle + AlertDescription.
classNamestring—Merged onto the root <div> via cn().

AlertTitle / AlertDescription

Both forward all standard HTMLDivElement attributes. className is merged via cn().

Accessibility

  • Renders the root as <div role="alert"> so assistive tech announces the content as it appears.
  • The colored border + tinted background are reinforced by the title's variant color so color is never the only signal of severity.
  • No motion to suppress.

Credits

  • Extracted from: algoflashcards (src/platform/ui/alert.tsx). Generalized the source's two-variant CVA (default / destructive) into four semantic variants, dropped the AlertAction slot and the dense shadcn slot selectors, and wrapped each part in forwardRef.