Info, success, warning and error alerts with dismiss buttons.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/alerts
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { useState } from "react";4import { AlertBanners, type AlertBannerItem } from "@/components/nextui/alerts";56export function Notices() {7const [alerts, setAlerts] = useState<AlertBannerItem[]>([8{ variant: "success", title: "Changes saved", body: "Your profile is up to date." },9{ variant: "warning", title: "Trial ends in 3 days", body: "Add a card to keep your projects." },10]);1112return <AlertBanners alerts={alerts} onDismiss={(_, i) => setAlerts((list) => list.filter((_, j) => j !== i))} />;13}
| Prop | Type | Default | Description |
|---|---|---|---|
| alerts | AlertBannerItem[] | 4 sample alerts | Banners: title, body, variant and optional icon or tone override |
| onDismiss | (alert: AlertBannerItem, index: number) => void | – | Called when an alert's × is clicked |
| dismissible | boolean | true | Show the × on each alert |
| className | string | – | Extra classes on the stack |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.