next 13 with shadcn ui alert message example

In this tutorial, we will create alert message in next js 13 with shadcn ui. First you need to setup next js 13 with shadcn ui project.

how to use shadcn ui in next js 13

Before use alert message in next js 13 with shadcn ui you need to install npx shadcn-ui add alert.

npx shadcn-ui add alert

npx shadcn-ui@latest add

Next 13 with Shadcn UI Alert Message Example

1. Create next js 13 with shadcn ui simple alert message using shadcn-ui Alert, AlertDescription, AlertTitle component and lucide-react icon.

import { Terminal, Waves } from "lucide-react"

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

export default function AlertDemo() {
  return (
    <Alert>
      <Terminal className="h-4 w-4" />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the cli.
      </AlertDescription>
    </Alert>
  )
}

next js 13 with shadcn ui alert message

2. next js 13 with shadcn ui alert destructive error message.

import { AlertCircle } from "lucide-react"

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

export default function AlertDestructive() {
  return (
    <Alert variant="destructive">
      <AlertCircle className="w-4 h-4" />
      <AlertTitle>Error</AlertTitle>
      <AlertDescription>
        Your session has expired. Please log in again.
      </AlertDescription>
    </Alert>
  )
}

next js 13 with shadcn ui alert error message

3. next 13 with shadcn ui alert success message.

import { Check  } from "lucide-react"

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

export default function AlertSuccess() {
  return (
    <Alert className="text-green-600 border border-green-600">
      <Check className="w-4 h-4 text-green-600" />
      <AlertTitle>Success</AlertTitle>
      <AlertDescription>
        Your operation was successful.
      </AlertDescription>
    </Alert>
  )
}