Docs
Alert
Alert
Displays a callout for user attention.
Loading...
<script lang="ts">
import { Rocket } from "radix-icons-svelte";
import * as Alert from "$lib/components/ui/alert";
</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";
import * as Alert from "$lib/components/ui/alert";
</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
Loading...
<script lang="ts">
import { Rocket } from "radix-icons-svelte";
import * as Alert from "$lib/components/ui/alert";
</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";
import * as Alert from "$lib/components/ui/alert";
</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
Loading...
<script lang="ts">
import { ExclamationTriangle } from "radix-icons-svelte";
import * as Alert from "$lib/components/ui/alert";
</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 { AlertCircle } from "lucide-svelte";
import * as Alert from "$lib/components/ui/alert";
</script>
<Alert.Root variant="destructive">
<AlertCircle class="h-4 w-4" />
<Alert.Title>Error</Alert.Title>
<Alert.Description>
Your session has expired. Please login again.
</Alert.Description>
</Alert.Root>
On This Page