Alert

Guidelines#

Use it for state the user should know about on the page they are on: a mailbox still warming up, an expired integration, a paused campaign. For transient confirmations use a toast; for a decision, a dialog.

What you provide: variant (default, destructive; default default), then children in this order: an optional Lucide icon as the first child, AlertTitle, AlertDescription (wrap body copy in <p> to get leading-relaxed).

Anatomy: full width, rounded-lg, 1px border, px-4 py-3, text-sm, on bg-card. With an icon the grid becomes a 16px column plus content with a 12px gap (gap-x-3); the icon is size-4, nudged down 2px, in currentColor. The title is font-medium tracking-tight and clamped to one line; the description is text-muted-foreground with a 4px gap between paragraphs. destructive turns the text and icon text-destructive and the description text-destructive/90, keeping the card background.

Behaviour: static, no motion.

Don't put actions or long lists inside, stack more than two alerts, or use destructive for warnings that are not failures.

Facts#

Group	Feedback
Product	Crew OS
Global	window.DigitalCrew.Alert
Source	digitalcrew-orchestrator: components/ui/alert.tsx
Import in the app	import { Alert } from "@/components/ui/alert";

API#

TypeScript declarations emitted from components/ui/alert.tsx (the module also exports Alert, AlertTitle, AlertDescription).

declare const alertVariants: (props?: {
    variant?: "default" | "destructive";
} & ClassProp) => string;
declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): any;
declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): any;
declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): any;
export { Alert, AlertTitle, AlertDescription };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    return h("div", { className: "grid max-w-xl gap-3" },
      h(DC.Alert, null,
        h(I.Info),
        h(DC.AlertTitle, null, "Mailbox warm-up in progress"),
        h(DC.AlertDescription, null, h("p", null, "Sending from claire@northwind-traders.com is capped at 40 emails a day until day 14 of warm-up."))),
      h(DC.Alert, { variant: "destructive" },
        h(I.AlertTriangle),
        h(DC.AlertTitle, null, "Gmail connection expired"),
        h(DC.AlertDescription, null, h("p", null, "The Q3 CFO outreach campaign is paused. Reconnect the mailbox to resume sending."))));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Feedback#