Alert

A persistent message that helps people recover or continue.

npx shadcn@latest add @silicon-ui/alert
statusmessage
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/alert

Manually

  1. Install the dependencies.

    npm install lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/alert/alert.tsx
    • components/silicon-ui/alert/alert.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { Alert } from "@/components/silicon-ui/alert/alert";

API reference

PropTypeDefault
title*string—
toneAlertTone

"danger""info""success""warning"

—
childrenReactNode—
open

Controls presence. Hiding the alert collapses its height and fades it out.

boolean—
onDismiss

Shows a dismiss button. An uncontrolled alert collapses first, then calls this.

() => void—

Also accepts the props of HTMLAttributes<HTMLDivElement>.

Dependencies

npm
lucide-reactmotion
Registry
silicon-motion-tokens