Components / Alert

Alert

Displays a callout for user attention. Use it to communicate status, guidance, or important context without interrupting the user's flow.

Preview

Everything looks good.

Your project is ready to be shipped.

Heads up.

You can review this action before continuing.

Installation

Install the component into your project with the CLI.

Usage

app/page.tsx

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'

export function StatusAlert() {
  return (
    <Alert>
      <AlertTitle>Success</AlertTitle>
      <AlertDescription>Your project is ready.</AlertDescription>
    </Alert>
  )
}