Alert
alertuiStatic, in-flow notice block with a leading icon, title, and description. Use for inline page-level messages — info banners, success confirmations, warning callouts. Two tones: `default` and `destructive`.
Installation
$pnpm dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/alert.json$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/alert.json$yarn dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/alert.json$bunx shadcn-svelte@latest add https://uipkge.dev/r/svelte/alert.jsonManifest:
https://uipkge.dev/r/svelte/alert.jsonInstalls to:src/lib/components/ui/alert/Examples
Loading interactive previews…
Loading interactive previews…
Props
| Name | Type / Values | Default | Required |
|---|---|---|---|
variant | 'default''destructive' | default | optional |
icon | 'info' | 'warning' | 'error' | 'success' | — | optional |
title | string | — | optional |
text | string | — | optional |
ref | HTMLDivElement | null | — | optional |
npm dependencies
Files installed (5)
src/lib/components/ui/alert/Alert.svelte1.7 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface AlertProps extends HTMLAttributes<HTMLDivElement> { variant?: 'default' | 'destructive' icon?: 'info' | 'warning' | 'error' | 'success' title?: string text?: string ref?: HTMLDivElement | null } </script> <script lang="ts"> import { CircleAlert, CircleCheck, Info, TriangleAlert } from '@lucide/svelte' import { cn } from '$lib/utils' import { alertVariants } from './alert.variants' let { class: className, variant = 'default', icon, title, text, children, ref = $bindable(null), ...restProps }: AlertProps = $props() </script> <div bind:this={ref} role="alert" data-uipkge="" data-slot="alert" class={cn(alertVariants({ variant }), className)} {...restProps}> <!-- Icons and composition children must be direct root descendants so the `[&>svg]` absolute layout in alertVariants can position and pad correctly. --> {#if icon === 'error'} <CircleAlert class="size-4" aria-hidden="true" /> {:else if icon === 'success'} <CircleCheck class="size-4" aria-hidden="true" /> {:else if icon === 'warning'} <TriangleAlert class="size-4" aria-hidden="true" /> {:else if icon === 'info'} <Info class="size-4" aria-hidden="true" /> {/if} {#if title} <p data-uipkge="" data-slot="alert-title" class="mb-1 text-sm leading-none font-medium tracking-tight"> {title} </p> {/if} {#if text} <div data-uipkge="" data-slot="alert-description" class="text-muted-foreground text-sm leading-relaxed [&_p]:leading-relaxed" > {text} </div> {/if} {@render children?.()} </div>src/lib/components/ui/alert/AlertDescription.svelte0.6 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface AlertDescriptionProps extends HTMLAttributes<HTMLDivElement> { ref?: HTMLDivElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, children, ref = $bindable(null), ...restProps }: AlertDescriptionProps = $props() </script> <div bind:this={ref} data-uipkge="" data-slot="alert-description" class={cn('text-muted-foreground text-sm leading-relaxed [&_p]:leading-relaxed', className)} {...restProps} > {@render children?.()} </div>src/lib/components/ui/alert/AlertTitle.svelte0.6 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface AlertTitleProps extends HTMLAttributes<HTMLElement> { as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' } </script> <script lang="ts"> import { cn } from '$lib/utils' let { as = 'h5', class: className, children, ...restProps }: AlertTitleProps = $props() </script> <svelte:element this={as} data-uipkge="" data-slot="alert-title" class={cn('mb-1 text-sm leading-none font-medium tracking-tight', className)} {...restProps} > {@render children?.()} </svelte:element>src/lib/components/ui/alert/alert.variants.ts1.1 kB
import type { VariantProps } from 'class-variance-authority' import { cva } from 'class-variance-authority' /** * Variant definitions live in their own file (rather than the package * `index.ts`) so `Alert.vue` can `import { alertVariants } from * './alert.variants'` without creating a circular dependency through the * index. See card.variants.ts for the same pattern + the SSR symptom that * motivated the split. * * Layout: composition children (svg + AlertTitle + AlertDescription) are * direct descendants of the root so `[&>svg]` absolute positioning works. */ export const alertVariants = cva( 'relative w-full rounded-lg border p-4 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-4 [&>svg]:text-foreground [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px]', { variants: { variant: { default: 'bg-background text-foreground border-border', destructive: 'border-destructive/20 text-destructive bg-destructive/5 [&>svg]:text-destructive', }, }, defaultVariants: { variant: 'default', }, }, ) export type AlertVariants = VariantProps<typeof alertVariants>src/lib/components/ui/alert/index.ts0.5 kB
export { default as Alert, type AlertProps } from './Alert.svelte' export { default as AlertDescription, type AlertDescriptionProps } from './AlertDescription.svelte' export { default as AlertTitle, type AlertTitleProps } from './AlertTitle.svelte' // Re-export variant API from the sibling file (kept separate to avoid the // Alert.svelte <-> index.ts circular import that broke dev SSR for Card). export { alertVariants, type AlertVariants } from './alert.variants'
Raw manifest:https://uipkge.dev/r/svelte/alert.json