Componentfeedback0.52 KB gzipZero dependencies

Alert

Notice box with tone bar and status eyebrow.

Preview

Live Preview

Notice

Gate Change

Boarding moved to Gate B7.

Info

Ticket Validated

Admitted at Box Office.

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add alert

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { Alert } from "@/components/ui/alert";

<Alert tone="accent" title="Limited seats">Only a few stubs left.</Alert>

Usage guidance

Use Alert when a ticket stub surface needs Notice box with tone bar and status eyebrow. Keep props minimal and prefer composition with sibling stubs.

Avoid Alert for long form flows or dense data grids where a dedicated layout block fits better.

Source code

alert.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

import * as React from "react";
import { cn } from "./lib/utils";

type Tone = "info" | "accent" | "destructive";

export type AlertProps = {
  tone?: Tone;
  title?: string;
  className?: string;
  children: React.ReactNode;
};

const bars: Record<Tone, string> = {
  info: "bg-foreground",
  accent: "bg-accent",
  destructive: "bg-destructive",
};

const eyebrows: Record<Tone, string> = {
  info: "Info",
  accent: "Notice",
  destructive: "Alert",
};

export function Alert({ tone = "info", title, className, children }: AlertProps) {
  return (
    <div role="alert" className={cn("relative rounded-md border border-border bg-card p-4 ps-5", className)}>
      <span aria-hidden className={cn("absolute bottom-3 left-2 top-3 w-1 rounded-full", bars[tone])} />
      <p className="font-mono text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
        {eyebrows[tone]}
      </p>
      {title && <p className="mt-1 text-sm font-semibold">{title}</p>}
      <div className={cn("text-sm text-muted-foreground", title && "mt-1")}>{children}</div>
    </div>
  );
}

Props

Prop	Type	Description
tone	"info" \| "accent" \| "destructive"	Stamp bar color and eyebrow (default info).
title	string	Optional bold title line.