Alert - shadcn-svelte

shadcn-svelte for Svelte 5 has been released! - Visit the preview docs

Docs

Alert

Displays a callout for user attention.

	<script lang="ts">
  import Rocket from "svelte-radix/Rocket.svelte";
  import * as Alert from "$lib/components/ui/alert/index.js";
</script>
 
<Alert.Root>
  <Rocket class="h-4 w-4" />
  <Alert.Title>Heads up!</Alert.Title>
  <Alert.Description
    >You can add components to your app using the cli.</Alert.Description
  >
</Alert.Root>

	<script lang="ts">
  import Terminal from "lucide-svelte/icons/terminal";
  import * as Alert from "$lib/components/ui/alert/index.js";
</script>
 
<Alert.Root>
  <Terminal class="h-4 w-4" />
  <Alert.Title>Heads up!</Alert.Title>
  <Alert.Description
    >You can add components to your app using the cli.</Alert.Description
  >
</Alert.Root>

Installation

	npx  shadcn-svelte@latest add alert

Usage

	<script lang="ts">
  import * as Alert from "$lib/components/ui/alert";
</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>

Examples

Default

	<script lang="ts">
  import Rocket from "svelte-radix/Rocket.svelte";
  import * as Alert from "$lib/components/ui/alert/index.js";
</script>
 
<Alert.Root>
  <Rocket class="h-4 w-4" />
  <Alert.Title>Heads up!</Alert.Title>
  <Alert.Description
    >You can add components to your app using the cli.</Alert.Description
  >
</Alert.Root>

	<script lang="ts">
  import Terminal from "lucide-svelte/icons/terminal";
  import * as Alert from "$lib/components/ui/alert/index.js";
</script>
 
<Alert.Root>
  <Terminal class="h-4 w-4" />
  <Alert.Title>Heads up!</Alert.Title>
  <Alert.Description
    >You can add components to your app using the cli.</Alert.Description
  >
</Alert.Root>

Destructive

	<script lang="ts">
  import ExclamationTriangle from "svelte-radix/ExclamationTriangle.svelte";
  import * as Alert from "$lib/components/ui/alert/index.js";
</script>
 
<Alert.Root variant="destructive">
  <ExclamationTriangle class="h-4 w-4" />
  <Alert.Title>Error</Alert.Title>
  <Alert.Description
    >Your session has expired. Please login again.</Alert.Description
  >
</Alert.Root>

	<script lang="ts">
  import CircleAlert from "lucide-svelte/icons/circle-alert";
  import * as Alert from "$lib/components/ui/alert/index.js";
</script>
 
<Alert.Root variant="destructive">
  <CircleAlert class="h-4 w-4" />
  <Alert.Title>Error</Alert.Title>
  <Alert.Description
    >Your session has expired. Please login again.</Alert.Description
  >
</Alert.Root>

Accordion Alert Dialog

On This Page