ALERT

Full-width contextual message with left accent border. Four semantic variants for status, warning, critical, and info states.

PREVIEW

◈

SYSTEM STATUS

All subsystems operating within normal parameters.

INSTALLATION

BASH

npx shadcn@latest add @scificn/alert

USAGE

TSX

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

export function Example() {
  return (
    <Alert variant="WARNING">
      <AlertTitle>WARNING</AlertTitle>
      <AlertDescription>
        Power core temperature exceeding safe threshold.
      </AlertDescription>
    </Alert>
  )
}

VARIANTS

◈

STATUS

All systems nominal. Ready for operation.

variant="STATUS"

⚠

WARNING

Elevated power consumption detected. Monitor closely.

variant="WARNING"

CRITICAL

Hull breach imminent. Evacuate affected sector immediately.

variant="CRITICAL"

ℹ

INFO

Scheduled maintenance cycle begins in 48 hours.

variant="INFO"

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
variant	STATUS \| WARNING \| CRITICAL \| INFO	STATUS	Controls left border color, glow, and prefix symbol.
className	string	—	Additional classes merged via cn().

AlertTitle and AlertDescription extend React.HTMLAttributes<HTMLDivElement>.