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 alertCopy and paste the following code into your project.
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from '$UTILS$.js';
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>
<div
bind:this={ref}
data-slot="alert-action"
class={cn('absolute top-2.5 right-3 [&_[data-slot=button]]:rounded-full', className)}
{...restProps}
>
{@render children?.()}
</div>
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from '$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-sm leading-relaxed text-zinc-400 text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:text-[#d0e891] [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-zinc-50',
className
)}
{...restProps}
>
{@render children?.()}
</div>
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from '$UTILS$.js';
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>
<div
bind:this={ref}
data-slot="alert-title"
class={cn(
'font-mono text-xs font-semibold uppercase tracking-[0.08em] text-zinc-50 group-has-[>svg]/alert:col-start-2 [&_a]:text-[#d0e891] [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-zinc-50',
className
)}
{...restProps}
>
{@render children?.()}
</div>
<script lang="ts" module>
import { type VariantProps, tv } from 'tailwind-variants';
export const alertVariants = tv({
base: "relative grid w-full gap-1 border border-[#222225] bg-[#09090b] px-4 py-3 text-left text-sm shadow-none after:absolute after:-inset-y-px after:-left-px after:w-0.5 has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert",
variants: {
variant: {
default: 'text-zinc-50 after:bg-[#d0e891]',
destructive:
'border-[#d1242f]/60 text-[#f85149] *:data-[slot=alert-description]:text-[#f85149]/90 after:bg-[#f85149] *:[svg]:text-current'
}
},
defaultVariants: {
variant: 'default'
}
});
export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
</script>
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from '$UTILS$.js';
let {
ref = $bindable(null),
class: className,
variant = 'default',
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
variant?: AlertVariant;
} = $props();
</script>
<div
bind:this={ref}
data-slot="alert"
role="alert"
class={cn(alertVariants({ variant }), className)}
{...restProps}
>
{@render children?.()}
</div>
import Root from './alert.svelte';
import Description from './alert-description.svelte';
import Title from './alert-title.svelte';
import Action from './alert-action.svelte';
export { alertVariants, type AlertVariant } from './alert.svelte';
export {
Root,
Description,
Title,
Action,
//
Root as Alert,
Description as AlertDescription,
Title as AlertTitle,
Action as AlertAction
};
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>