Alert

Inline message with a semantic icon, three surfaces, and an optional dismiss with an exit animation.

Source: 1 file
Dependencies: none
Playground: yes

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

Variant

Heads up

You can adjust project defaults in the settings panel.

Deployment complete

Your site is live on production.

Approaching quota

You have used 90% of your build minutes.

Build failed

Type error in app/page.tsx — see logs.

New version available

v2.4 ships smaller bundles and faster builds.

<Alert variant="default | success | warning | destructive | info" />

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import { Alert, AlertTitle, AlertDescription } from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

alert-example.tsx

import { Alert, AlertTitle, AlertDescription } from "kipui";

<Alert variant="warning" appearance="soft" dismissible>
  <AlertTitle>Payment method expires soon</AlertTitle>
  <AlertDescription>
    Update the card on file before the next billing run.
  </AlertDescription>
</Alert>

Pass `icon={null}` to drop the icon; passing a node replaces it.
An alert stays on the page — reach for Toast when the message should leave on its own.

Playground

Change the props and the snippet underneath updates with them.

Preview

Update the card on file before the next billing run.

Props

variantwarning

appearancesoft

dismissible

<Alert variant="warning" appearance="soft">Update the card on file before the next billing run.</Alert>

API reference

Transcribed from the component's own types. Props with no default are required.

Prop	Default	Description
variant"default" \| "success" \| "warning" \| "destructive" \| "info"	"default"	Semantic colour and default icon.
appearance"soft" \| "outline" \| "solid"	"soft"	Surface treatment.
iconReactNode \| null	required	Overrides the built-in icon. `null` hides it.
dismissibleboolean	false	Shows a close button; the alert animates out.
onDismiss() => void	required	Fires after the exit animation.