Docs
Alert
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="size-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="size-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@next add alert
Copy and paste the component source files linked at the top of this page into your project.
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>
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="size-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="size-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="size-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="size-4" />
<Alert.Title>Error</Alert.Title>
<Alert.Description
>Your session has expired. Please login again.</Alert.Description
>
</Alert.Root>
On This Page