Alert

Displays a callout for user attention with various styles.

Preview

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/alert.json

Usage

tsx
10 lines
1
2
3
4
5
6
7
8
9
10
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export default function MyComponent() {
  return (
    <Alert>
      <AlertTitle>Alert Title</AlertTitle>
      <AlertDescription>Alert Description</AlertDescription>
    </Alert>
  )
}

Examples

Default

Destructive

Success (Custom Styling)

Warning (Custom Styling)

Props

PropTypeDefaultDescription
variant"default" | "destructive"defaultThe visual style of the alert
classNamestringAdditional CSS classes