Alert

Displays a callout for user attention.

Success! Your changes have been saved

This is an alert with icon, title and description.

This Alert has a title and an icon. No description.

Unable to process your payment.

Please verify your billing information and try again.

Check your card details
Ensure sufficient funds
Verify billing address

<script lang="ts">
  import * as Alert from "$lib/components/ui/alert/index.js";
  import CheckCircle2Icon from "@lucide/svelte/icons/check-circle-2";
  import AlertCircleIcon from "@lucide/svelte/icons/alert-circle";
  import PopcornIcon from "@lucide/svelte/icons/popcorn";
</script>
 
<div class="grid w-full max-w-xl items-start gap-4">
  <Alert.Root>
    <CheckCircle2Icon />
    <Alert.Title>Success! Your changes have been saved</Alert.Title>
    <Alert.Description
      >This is an alert with icon, title and description.</Alert.Description
    >
  </Alert.Root>
  <Alert.Root>
    <PopcornIcon />
    <Alert.Title
      >This Alert has a title and an icon. No description.</Alert.Title
    >
  </Alert.Root>
  <Alert.Root variant="destructive">
    <AlertCircleIcon />
    <Alert.Title>Unable to process your payment.</Alert.Title>
    <Alert.Description>
      <p>Please verify your billing information and try again.</p>
      <ul class="list-inside list-disc text-sm">
        <li>Check your card details</li>
        <li>Ensure sufficient funds</li>
        <li>Verify billing address</li>
      </ul>
    </Alert.Description>
  </Alert.Root>
</div>

Installation

pnpm dlx shadcn-svelte@latest add alert

npx shadcn-svelte@latest add alert

npx shadcn-svelte@latest add alert

bun x shadcn-svelte@latest add alert

Copy and paste the following code into your project.

<script lang="ts">
  import type { HTMLAttributes } from "svelte/elements";
  import { cn, type WithElementRef } from "$lib/utils.js";

  let {
    ref = $bindable(null),
    class: className,
    children,
    ...restProps
  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>

<div
  bind:this={ref}
  data-slot="alert-description"
  class={cn(
    "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
    className
  )}
  {...restProps}
>
  {@render children?.()}
</div>

Usage

<script lang="ts">
  import * as Alert from "$lib/components/ui/alert/index.js";
</script>

<Alert.Root>
  <Alert.Title>Heads up!</Alert.Title>
  <Alert.Description>
    You can add components to your app using the cli.
  </Alert.Description>
</Alert.Root>

Alert Dialog Aspect Ratio