Alert

Share status and feedback without interrupting the page. Start with a title and description, then add an icon or action when useful.

Registry sync finished

New items are listed locally. Refresh the docs if a page still looks stale.

tsx

1import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"23export function Example() {4  return (5    <Alert>6      <AlertTitle>Registry sync finished</AlertTitle>7      <AlertDescription>8        New items are listed locally. Refresh the docs if a page still looks9        stale.10      </AlertDescription>11    </Alert>12  )13}

Installation

npx @arctis-sh/@arctis-sh/ui@latest add alert

Usage

1import {2  Alert,3  AlertAction,4  AlertDescription,5  AlertTitle,6} from "@/components/ui/alert"

1<Alert>2  <AlertTitle>Registry sync finished</AlertTitle>3  <AlertDescription>4    New items are available locally. Refresh the docs if a page still looks out of date.5  </AlertDescription>6</Alert>

Composition

Alert
├── Icon
├── AlertTitle
├── AlertDescription
└── AlertAction

The title and description carry the message. Add an SVG as a direct child for a leading icon, and use AlertAction for an optional control in the top-right.

Basic

A simple title and description, without an icon.

Registry sync finished

New items are listed locally. Refresh the docs if a page still looks stale.

tsx

1import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"23export function Example() {4  return (5    <Alert>6      <AlertTitle>Registry sync finished</AlertTitle>7      <AlertDescription>8        New items are listed locally. Refresh the docs if a page still looks9        stale.10      </AlertDescription>11    </Alert>12  )13}

With icon

Pass an SVG as a direct child of Alert to show a leading icon.

Component installed

Source landed in your repo. Open the file and tweak it like any other local module.

tsx

1import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"23export function Example() {4  return (5    <Alert>6      <CheckIcon />7      <AlertTitle>Component installed</AlertTitle>8      <AlertDescription>9        Source landed in your repo. Open the file and tweak it like any other10        local module.11      </AlertDescription>12    </Alert>13  )14}

Success

Use variant="success" to confirm a completed action.

Theme tokens applied

Light and dark variables are wired. Preview the docs site to confirm contrast.

tsx

1import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"23export function Example() {4  return (5    <Alert variant="success">6      <CheckIcon />7      <AlertTitle>Theme tokens applied</AlertTitle>8      <AlertDescription>9        Light and dark variables are wired. Preview the docs site to confirm10        contrast.11      </AlertDescription>12    </Alert>13  )14}

Warning

Use variant="warning" for cautionary or time-sensitive information.

CLI cache is outdated

Run a fresh install before adding components so you do not pull a stale registry snapshot.

tsx

1import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"23export function Example() {4  return (5    <Alert variant="warning">6      <WarningIcon />7      <AlertTitle>CLI cache is outdated</AlertTitle>8      <AlertDescription>9        Run a fresh install before adding components so you do not pull a10        stale registry snapshot.11      </AlertDescription>12    </Alert>13  )14}

Destructive

Use variant="destructive" for failures and errors that need attention.

Could not resolve registry

The namespace URL did not return an index. Check the registries map in your config and try again.

tsx

1import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"23export function Example() {4  return (5    <Alert variant="destructive">6      <AlertCircleIcon />7      <AlertTitle>Could not resolve registry</AlertTitle>8      <AlertDescription>9        The namespace URL did not return an index. Check the registries map in10        your config and try again.11      </AlertDescription>12    </Alert>13  )14}

Action

Wrap a button or other control in AlertAction. Add right padding to Alert so the message has room beside it.

New accordion patterns

Nested and card-grid examples shipped. Pull the latest docs when you have a minute.

tsx

1import {2  Alert,3  AlertAction,4  AlertDescription,5  AlertTitle,6} from "@/components/ui/alert"7import { Button } from "@/components/ui/button"89export function Example() {10  return (11    <Alert className="pr-28">12      <InfoIcon />13      <AlertTitle>New accordion patterns</AlertTitle>14      <AlertDescription>15        Nested and card-grid examples shipped. Pull the latest docs when you16        have a minute.17      </AlertDescription>18      <AlertAction>19        <Button type="button" size="sm">20          View21        </Button>22      </AlertAction>23    </Alert>24  )25}

API Reference

Prop	Type	Default
variant	"default" \| "success" \| "warning" \| "destructive"	"default"
className	string	—
role	"alert"	"alert"

1<Alert>2  <AlertTitle>Sync complete</AlertTitle>3  <AlertDescription>Your local registry is up to date.</AlertDescription>4</Alert>

AlertTitle

Prop	Type	Default
className	string	—

1<AlertTitle>Sync complete</AlertTitle>

AlertDescription

Prop	Type	Default
className	string	—

1<AlertDescription>Your local registry is up to date.</AlertDescription>

AlertAction

Prop	Type	Default
className	string	—

1<AlertAction>2  <Button size="sm" variant="outline">Undo</Button>3</AlertAction>