Alert

Copy<script setup lang="ts">
import { PackageIcon, PopcornIcon } from 'lucide-vue-next'
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from '@/components/ui/alert'
</script>

<template>
  <div class="grid w-full max-w-xl items-start gap-4">
    <Alert>
      <PackageIcon />
      <AlertTitle>Your order has been shipped</AlertTitle>
      <AlertDescription>
        <p>Estimated delivery is 3–5 business days. You'll receive tracking details by email.</p>
        <ul class="mt-2 list-inside list-disc space-y-1">
          <li>Standard shipping via DHL Express</li>
          <li>Signature required on delivery</li>
          <li>Free returns within 30 days</li>
        </ul>
      </AlertDescription>
    </Alert>

    <Alert>
      <PopcornIcon />
      <AlertTitle>This Alert has a title and an icon. No description.</AlertTitle>
    </Alert>
  </div>
</template>

Copy<script setup lang="ts">
import { InfoIcon } from 'lucide-vue-next'
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from '@/components/ui/alert'
</script>

<template>
  <div class="grid w-full max-w-xl items-start gap-4">
    <Alert color="info">
      <InfoIcon />
      <AlertTitle>New products have been added to your wishlist.</AlertTitle>
      <AlertDescription>
        Check your wishlist to see the latest additions.
      </AlertDescription>
    </Alert>
  </div>
</template>

Copy<script setup lang="ts">
import { CheckCircle2Icon } from 'lucide-vue-next'
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from '@/components/ui/alert'
</script>

<template>
  <div class="grid w-full max-w-xl items-start gap-4">
    <Alert color="positive">
      <CheckCircle2Icon />
      <AlertTitle>Your order has been confirmed.</AlertTitle>
      <AlertDescription>
        You'll receive an email with tracking details shortly.
      </AlertDescription>
    </Alert>
  </div>
</template>

Copy<script setup lang="ts">
import { AlertTriangleIcon } from 'lucide-vue-next'
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from '@/components/ui/alert'
</script>

<template>
  <div class="grid w-full max-w-xl items-start gap-4">
    <Alert color="warning">
      <AlertTriangleIcon />
      <AlertTitle>Only 2 items left in stock.</AlertTitle>
      <AlertDescription>
        Order soon to secure your purchase before it sells out.
      </AlertDescription>
    </Alert>
  </div>
</template>

Copy<script setup lang="ts">
import { XCircleIcon } from 'lucide-vue-next'
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from '@/components/ui/alert'
</script>

<template>
  <div class="grid w-full max-w-xl items-start gap-4">
    <Alert color="destructive">
      <XCircleIcon />
      <AlertTitle>Unable to process your payment.</AlertTitle>
      <AlertDescription>
        <p>Please verify your billing information and try again.</p>
        <ul class="mt-2 list-inside list-disc space-y-1">
          <li>Check your card details</li>
          <li>Ensure sufficient funds</li>
          <li>Verify billing address</li>
        </ul>
      </AlertDescription>
    </Alert>
  </div>
</template>