SYS:ONLINE● ACTIVE
THEME
GITHUBv0.1.0

ALERT

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

PREVIEW

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

variant="STATUS"
variant="WARNING"
variant="CRITICAL"
variant="INFO"

PROPS

PROPTYPEDEFAULTDESCRIPTION
variantSTATUS | WARNING | CRITICAL | INFOSTATUSControls left border color, glow, and prefix symbol.
classNamestringAdditional classes merged via cn().

AlertTitle and AlertDescription extend React.HTMLAttributes<HTMLDivElement>.