Chuv Studio

02 — COMPONENTS

Alert

Inline status and feedback surface for project updates, warnings, operational notices, and contextual system messaging. Built from shadcn/ui and adapted to the Chuv Studio foundation with straight edges, controlled emphasis, and consistent typography.

Core States

Alerts can communicate neutral status, positive confirmation, or destructive warnings

Default
<Alert>
  <Info />
  <AlertTitle>Design system update available</AlertTitle>
  <AlertDescription>
    A new component set was added to the styleguide and is ready for review.
  </AlertDescription>
</Alert>
Success
<Alert>
  <CheckCircle2 />
  <AlertTitle>Deploy approved</AlertTitle>
</Alert>
Destructive
<Alert variant="destructive">
  <AlertCircle />
  <AlertTitle>Build failed</AlertTitle>
  <AlertDescription>
    A production check failed.
  </AlertDescription>
</Alert>

Studio Contexts

Examples that make sense for a design and tech studio workflow

Portfolio Notice

Tooling Status

Risk Warning

<Alert>
  <Wrench />
  <AlertTitle>Implementation aligned</AlertTitle>
  <AlertDescription>
    The component already follows the current tokens, sections, and card rules.
  </AlertDescription>
</Alert>

Content Patterns

Short alerts, richer alerts, and action-based alerts

Title Only
<Alert>
  <Sparkles />
  <AlertTitle>The content is ready for review.</AlertTitle>
</Alert>
With Action
<Alert>
  <Info />
  <AlertTitle>New preview available</AlertTitle>
  <AlertAction>
    <Button size="sm" variant="outline">Open</Button>
  </AlertAction>
</Alert>

Interactive Demo

Adjust tone and content density to preview how the component behaves in real UI states

Tone

Description

Action

Usage

Import, key props, and accessibility behavior

Import

import {
  Alert,
  AlertTitle,
  AlertDescription,
  AlertAction,
} from "@/components/ui/alert"

Key Props

Use variant on Alert, then compose AlertTitle, AlertDescription, and AlertAction depending on the amount of context needed.

When To Use

Use alerts for inline status, warnings, confirmations, and contextual feedback directly inside a section or card.

When Not To Use

Avoid using an alert for every piece of helper text. Use it when the message has contextual importance or urgency.

Accessibility Notes

The root uses role="alert". Keep the copy concise, use meaningful headings, and reserve destructive styling for real warnings.