KQ-168 · ALERT/BAR

Alert Bar

An inline notice that takes its own space rather than floating over the work. Opening glides the row down from zero height while a severity stripe draws itself down the leading edge; dismissing collapses it back and the space closes behind it, so nothing below jumps.

KQ-168 · ALERT/BAR

Raised warn

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/alert-bar

Props

PropTypeDefaultDescription
open / defaultOpenbooleanControlled or initial visibility.
severity"info" | "success" | "warn" | "danger""info"Sets the stripe, the title tone, and how loudly it speaks.
title / childrenstring / ReactNodeThe heading and an optional body.