Alert: React Alert component

Alert example: an inline status callout with title, description and an optional top-right action. Default and destructive variants; a leading icon moves the text into a second column.

pnpm dlx shadcn add @01orbital/alert

File

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

const alertVariants = cva(
  "group/alert relative grid w-full gap-0.5 rounded-2xl border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
        default: "bg-card text-card-foreground",
        destructive:
          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function Alert({
  className,
  variant,
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
  return (
    <div
      data-slot="alert"
      role="alert"
      className={cn(alertVariants({ variant }), className)}
      {...props}
    />
  )
}

function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-title"
      className={cn(
        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
        className
      )}
      {...props}
    />
  )
}

function AlertDescription({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-description"
      className={cn(
        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
        className
      )}
      {...props}
    />
  )
}

function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-action"
      className={cn("absolute top-2.5 right-3", className)}
      {...props}
    />
  )
}

export { Alert, AlertTitle, AlertDescription, AlertAction }

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

// The copy: change text here, not in the markup.
const COPY = {
  title: "Your license key was emailed",
  description:
    "Paste it into your CLI config to install paid blocks. It never expires.",
} as const

/** Alert with a title and a description. */
export default function AlertDemo() {
  return (
    <Alert className="max-w-lg">
      <AlertTitle>{COPY.title}</AlertTitle>
      <AlertDescription>{COPY.description}</AlertDescription>
    </Alert>
  )
}

Platform Change

Alert example: a flat notice on a train booking, set in accent color. Shows an Alert as a quiet inline announcement about a change.

pnpm dlx shadcn add @01orbital/alert-platform-change

npx shadcn add @01orbital/alert-platform-change

yarn shadcn add @01orbital/alert-platform-change

bunx --bun shadcn add @01orbital/alert-platform-change

File

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Card } from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Eutropia Rail · Your journey",
  booking: "Booking ER–4821",
  title: "Your platform has changed",
  platform: "platform 5",
  footnote: "Station update · 14:18 GMT · Departure in 14 minutes",
  origin: "York",
  destination: "London King’s Cross",
  lead: "The 14:32 service now leaves from",
  detail:
    "across the footbridge. Your coach C seat 24 reservation is unchanged.",
} as const

/** An Alert as a flat notice on a train booking, set in accent ink. */
export default function AlertPlatformChange() {
  return (
    <div className="flex w-full items-center justify-center rounded-xl border bg-background px-3 py-8 text-foreground [--radius:0.75rem] sm:px-6 dark:[--radius:0.75rem]">
      <Card className="w-full max-w-lg gap-0 rounded-xl p-5 shadow-none ring-0">
        <div className="mb-2 flex justify-between gap-3">
          <Eyebrow>{COPY.eyebrow}</Eyebrow>
          <span className="text-sm/5 text-muted-foreground">
            {COPY.booking}
          </span>
        </div>
        <p className="mb-5 text-2xl font-medium tracking-tight">
          {COPY.origin} <span aria-hidden="true">→</span> {COPY.destination}
        </p>
        <Alert className="bg-accent p-5 text-accent-foreground">
          <AlertTitle className="text-base">{COPY.title}</AlertTitle>
          <AlertDescription className="mt-2 text-accent-foreground/80">
            {COPY.lead} <strong>{COPY.platform}</strong>, {COPY.detail}
          </AlertDescription>
        </Alert>
        <p className="mt-4 text-xs text-muted-foreground">{COPY.footnote}</p>
      </Card>
    </div>
  )
}

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

New

alert-offline-save

Offline Save

Alert example: a notice explaining a save waiting to sync, on a game launcher card. Shows an Alert for offline and pending-state messages.

pnpm dlx shadcn add @01orbital/alert-offline-save

npx shadcn add @01orbital/alert-offline-save

yarn shadcn add @01orbital/alert-offline-save

bunx --bun shadcn add @01orbital/alert-offline-save

File

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Card } from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Valdrada Games · Mossbound",
  save: "Save 02",
  title: "Saved here. Cloud sync is waiting.",
  description:
    "Your progress at the Glass Orchard is safe on this device. We’ll sync it when your connection returns. Stay on this device until then.",
  saved: "Local save · 21:46",
  playTime: "Play time · 08h 32m",
} as const

/** An Alert that explains a save waiting to sync, on a game launcher card. */
export default function AlertOfflineSave() {
  return (
    <div className="flex w-full items-center justify-center rounded-xl border bg-background px-3 py-8 text-foreground [--radius:0.5rem] sm:px-6 dark:[--radius:0.5rem]">
      <Card className="w-full max-w-md gap-0 rounded-lg border p-5 shadow-none ring-0">
        <div className="mb-5 flex justify-between gap-4">
          <Eyebrow>{COPY.eyebrow}</Eyebrow>
          <span className="text-sm/5 text-muted-foreground">{COPY.save}</span>
        </div>
        <Alert
          role="status"
          className="rounded-sm border-primary bg-muted p-5 text-foreground"
        >
          <AlertTitle className="text-base">{COPY.title}</AlertTitle>
          <AlertDescription className="mt-2">
            {COPY.description}
          </AlertDescription>
        </Alert>
        <div className="mt-5 flex justify-between gap-4 font-mono text-xs text-muted-foreground">
          <span>{COPY.saved}</span>
          <span>{COPY.playTime}</span>
        </div>
      </Card>
    </div>
  )
}

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

Alert components

The library's own alert components, each installed on its own.

failed-run-01

Failed run alert for a CI or deploy dashboard: a destructive alert with the failing step, a per-step list with timings and states, an L shortcut that opens the failing log, and Re-run that runs through to a passed state. Open its docs page

pnpm dlx shadcn add @01orbital/failed-run-01

npx shadcn add @01orbital/failed-run-01

yarn shadcn add @01orbital/failed-run-01

bunx --bun shadcn add @01orbital/failed-run-01

offline-maps-01

Offline state alert for an app that keeps working without a connection: what still works, a retry button that reports its result, and a list of resources saved on the device against those that need a signal. Open its docs page

pnpm dlx shadcn add @01orbital/offline-maps-01

npx shadcn add @01orbital/offline-maps-01

yarn shadcn add @01orbital/offline-maps-01

bunx --bun shadcn add @01orbital/offline-maps-01

status-strip-01

Service Status Strip

Service status strip: a slim bar with an operational check, three uptime and latency figures and a status page link. Reflows from stacked rows to a single line as it widens. Open its docs page

pnpm dlx shadcn add @01orbital/status-strip-01

npx shadcn add @01orbital/status-strip-01

yarn shadcn add @01orbital/status-strip-01

bunx --bun shadcn add @01orbital/status-strip-01

Dependencies

npm: class-variance-authority, cn. The CLI installs them for you.

No other registry pieces.

Alert

ExamplesCopy Anchor Link

Platform ChangeNew

Offline SaveNew

Alert componentsCopy Anchor Link

failed-run-01

offline-maps-01

Service Status Strip

DependenciesCopy Anchor Link

Examples

New

New

Alert components

Dependencies