<SYSTEM>This is the llms.txt documentation for the "notifications" directory of the Origin UI - Svelte project.</SYSTEM>
# "notifications" directory
> A collection of production-ready, accessible UI components built with Svelte 5 and Tailwind CSS. These components are designed to be drop-in solutions for rapidly building modern web applications.
This documentation covers 23 components, each following best practices for accessibility, performance, and type safety.
## Components
## notification-01
> A type-safe, accessible notification-01 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-01`
- **Location**: `/src/lib/components/notifications/notification-01.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import TriangleAlert from 'lucide-svelte/icons/triangle-alert';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background px-4 py-3 shadow-lg shadow-black/5"
>
<div class="flex gap-2">
<p class="grow text-sm">
<TriangleAlert
class="-mt-0.5 me-3 inline-flex text-amber-500"
size={16}
strokeWidth={2}
aria-hidden="true"
/>Some information is missing!
</p>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close notification"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-01.svelte)
## notification-02
> A type-safe, accessible notification-02 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-02`
- **Location**: `/src/lib/components/notifications/notification-02.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import CircleCheck from 'lucide-svelte/icons/circle-check';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background px-4 py-3 shadow-lg shadow-black/5"
>
<div class="flex gap-2">
<p class="grow text-sm">
<CircleCheck
class="-mt-0.5 me-3 inline-flex text-red-500"
size={16}
strokeWidth={2}
aria-hidden="true"
/>An error occurred!
</p>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close notification"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-02.svelte)
## notification-03
> A type-safe, accessible notification-03 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-03`
- **Location**: `/src/lib/components/notifications/notification-03.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import CircleCheck from 'lucide-svelte/icons/circle-check';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background px-4 py-3 shadow-lg shadow-black/5"
>
<div class="flex gap-2">
<p class="grow text-sm">
<CircleCheck
class="-mt-0.5 me-3 inline-flex text-emerald-500"
size={16}
strokeWidth={2}
aria-hidden="true"
/>Completed successfully!
</p>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close notification"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-03.svelte)
## notification-04
> A type-safe, accessible notification-04 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-04`
- **Location**: `/src/lib/components/notifications/notification-04.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import Info from 'lucide-svelte/icons/info';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background px-4 py-3 shadow-lg shadow-black/5"
>
<div class="flex gap-2">
<p class="grow text-sm">
<Info
class="-mt-0.5 me-3 inline-flex text-blue-500"
size={16}
strokeWidth={2}
aria-hidden="true"
/>Just a quick note!
</p>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close notification"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-04.svelte)
## notification-05
> A type-safe, accessible notification-05 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-05`
- **Location**: `/src/lib/components/notifications/notification-05.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import ArrowRight from 'lucide-svelte/icons/arrow-right';
import TriangleAlert from 'lucide-svelte/icons/triangle-alert';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background px-4 py-3 shadow-lg shadow-black/5"
>
<div class="flex gap-2">
<div class="flex grow gap-3">
<TriangleAlert
class="mt-0.5 shrink-0 text-amber-500"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
<div class="flex grow justify-between gap-12">
<p class="text-sm">Some information is missing!</p>
<a href="#title" class="group whitespace-nowrap text-sm font-medium">
Link<ArrowRight
class="-mt-0.5 ms-1 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
</a>
</div>
</div>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close banner"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-05.svelte)
## notification-06
> A type-safe, accessible notification-06 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-06`
- **Location**: `/src/lib/components/notifications/notification-06.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import ArrowRight from 'lucide-svelte/icons/arrow-right';
import CircleAlert from 'lucide-svelte/icons/circle-alert';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background px-4 py-3 shadow-lg shadow-black/5"
>
<div class="flex gap-2">
<div class="flex grow gap-3">
<CircleAlert
class="mt-0.5 shrink-0 text-red-500"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
<div class="flex grow justify-between gap-12">
<p class="text-sm">An error occurred!</p>
<a href="#title" class="group whitespace-nowrap text-sm font-medium">
Link<ArrowRight
class="-mt-0.5 ms-1 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
</a>
</div>
</div>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close banner"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-06.svelte)
## notification-07
> A type-safe, accessible notification-07 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-07`
- **Location**: `/src/lib/components/notifications/notification-07.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import ArrowRight from 'lucide-svelte/icons/arrow-right';
import CircleCheck from 'lucide-svelte/icons/circle-check';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background px-4 py-3 shadow-lg shadow-black/5"
>
<div class="flex gap-2">
<div class="flex grow gap-3">
<CircleCheck
class="mt-0.5 shrink-0 text-emerald-500"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
<div class="flex grow justify-between gap-12">
<p class="text-sm">Completed successfully!</p>
<a href="#title" class="group whitespace-nowrap text-sm font-medium">
Link<ArrowRight
class="-mt-0.5 ms-1 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
</a>
</div>
</div>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close banner"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-07.svelte)
## notification-08
> A type-safe, accessible notification-08 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-08`
- **Location**: `/src/lib/components/notifications/notification-08.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import ArrowRight from 'lucide-svelte/icons/arrow-right';
import Info from 'lucide-svelte/icons/info';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background px-4 py-3 shadow-lg shadow-black/5"
>
<div class="flex gap-2">
<div class="flex grow gap-3">
<Info class="mt-0.5 shrink-0 text-blue-500" size={16} strokeWidth={2} aria-hidden="true" />
<div class="flex grow justify-between gap-12">
<p class="text-sm">Just a quick note!</p>
<a href="#title" class="group whitespace-nowrap text-sm font-medium">
Link<ArrowRight
class="-mt-0.5 ms-1 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
</a>
</div>
</div>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close banner"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-08.svelte)
## notification-09
> A type-safe, accessible notification-09 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-09`
- **Location**: `/src/lib/components/notifications/notification-09.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import CircleCheck from 'lucide-svelte/icons/circle-check';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background px-4 py-3 shadow-lg shadow-black/5"
>
<div class="flex items-center gap-2">
<div class="flex grow items-center gap-3">
<CircleCheck
class="mt-0.5 shrink-0 text-emerald-500"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
<div class="flex grow items-center justify-between gap-12">
<p class="text-sm">You‘ve made changes!</p>
<Button size="sm">Undo</Button>
</div>
</div>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close banner"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-09.svelte)
## notification-10
> A type-safe, accessible notification-10 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-10`
- **Location**: `/src/lib/components/notifications/notification-10.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import CircleCheck from 'lucide-svelte/icons/circle-check';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background px-4 py-3 shadow-lg shadow-black/5"
>
<div class="flex gap-2">
<div class="flex grow gap-3">
<CircleCheck
class="mt-0.5 shrink-0 text-emerald-500"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
<div class="flex grow justify-between gap-12">
<p class="text-sm">Message sent</p>
<div class="whitespace-nowrap text-sm">
<button class="text-sm font-medium hover:underline">View</button>
<span class="mx-1 text-muted-foreground">·</span>
<button class="text-sm font-medium hover:underline">Undo</button>
</div>
</div>
</div>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close banner"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-10.svelte)
## notification-11
> A type-safe, accessible notification-11 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-11`
- **Location**: `/src/lib/components/notifications/notification-11.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import TriangleAlert from 'lucide-svelte/icons/triangle-alert';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background p-4 shadow-lg shadow-black/5"
>
<div class="flex gap-2">
<div class="flex grow gap-3">
<TriangleAlert
class="mt-0.5 shrink-0 text-amber-500"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
<div class="flex grow flex-col gap-3">
<div class="space-y-1">
<p class="text-sm font-medium">Something requires your action!</p>
<p class="text-sm text-muted-foreground">
It conveys that a specific action is needed to resolve or address a situation.
</p>
</div>
<div>
<Button size="sm">Learn more</Button>
</div>
</div>
</div>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close notification"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-11.svelte)
## notification-12
> A type-safe, accessible notification-12 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-12`
- **Location**: `/src/lib/components/notifications/notification-12.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import CircleAlert from 'lucide-svelte/icons/circle-alert';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background p-4 shadow-lg shadow-black/5"
>
<div class="flex gap-2">
<div class="flex grow gap-3">
<CircleAlert
class="mt-0.5 shrink-0 text-red-500"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
<div class="flex grow flex-col gap-3">
<div class="space-y-1">
<p class="text-sm font-medium">We couldn‘t complete your request!</p>
<p class="text-sm text-muted-foreground">
It indicates that an issue has prevented the processing of the request.
</p>
</div>
<div class="flex gap-2">
<Button size="sm">Learn more</Button>
</div>
</div>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close notification"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-12.svelte)
## notification-13
> A type-safe, accessible notification-13 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-13`
- **Location**: `/src/lib/components/notifications/notification-13.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import CircleCheck from 'lucide-svelte/icons/circle-check';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background p-4 shadow-lg shadow-black/5"
>
<div class="flex gap-2">
<div class="flex grow gap-3">
<CircleCheck
class="mt-0.5 shrink-0 text-emerald-500"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
<div class="flex grow flex-col gap-3">
<div class="space-y-1">
<p class="text-sm font-medium">Your request was completed!</p>
<p class="text-sm text-muted-foreground">
It demonstrates that the task or request has been processed.
</p>
</div>
<div class="flex gap-2">
<Button size="sm">Learn more</Button>
</div>
</div>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close notification"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-13.svelte)
## notification-14
> A type-safe, accessible notification-14 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-14`
- **Location**: `/src/lib/components/notifications/notification-14.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import Info from 'lucide-svelte/icons/info';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background p-4 shadow-lg shadow-black/5"
>
<div class="flex gap-2">
<div class="flex grow gap-3">
<Info class="mt-0.5 shrink-0 text-blue-500" size={16} strokeWidth={2} aria-hidden="true" />
<div class="flex grow flex-col gap-3">
<div class="space-y-1">
<p class="text-sm font-medium">Here is some helpful information!</p>
<p class="text-sm text-muted-foreground">
It aims to provide clarity or support for better decision-making.
</p>
</div>
<div class="flex gap-2">
<Button size="sm">Learn more</Button>
</div>
</div>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close notification"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-14.svelte)
## notification-15
> A type-safe, accessible notification-15 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-15`
- **Location**: `/src/lib/components/notifications/notification-15.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background p-4 shadow-lg shadow-black/5"
>
<div class="flex gap-2">
<div class="flex grow flex-col gap-3">
<div class="space-y-1">
<p class="text-sm font-medium">We Value Your Privacy 🍪</p>
<p class="text-sm text-muted-foreground">
We use cookies to improve your experience, and show personalized content.
</p>
</div>
<div class="flex gap-2">
<Button size="sm">Accept</Button>
<Button size="sm" variant="outline">Decline</Button>
</div>
</div>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close notification"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-15.svelte)
## notification-16
> A type-safe, accessible notification-16 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-16`
- **Location**: `/src/lib/components/notifications/notification-16.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import RefreshCw from 'lucide-svelte/icons/refresh-cw';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background p-4 shadow-lg shadow-black/5"
>
<div class="flex gap-3">
<div
class="flex size-9 shrink-0 items-center justify-center rounded-full border border-border"
aria-hidden="true"
>
<RefreshCw class="opacity-60" size={16} strokeWidth={2} />
</div>
<div class="flex grow flex-col gap-3">
<div class="space-y-1">
<p class="text-sm font-medium">Version 1.4 is now available!</p>
<p class="text-sm text-muted-foreground">
This update contains several bug fixes and performance improvements.
</p>
</div>
<div class="flex gap-2">
<Button size="sm">Install</Button>
<Button size="sm" variant="link">Later</Button>
</div>
</div>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close notification"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-16.svelte)
## notification-17
> A type-safe, accessible notification-17 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-17`
- **Location**: `/src/lib/components/notifications/notification-17.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import Avatar from '$assets/avatar-32-01.jpg';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background p-4 shadow-lg shadow-black/5"
>
<div class="flex gap-3">
<img class="size-9 rounded-full" src={Avatar} width={32} height={32} alt="Mary Palmer" />
<div class="flex grow flex-col gap-3">
<div class="space-y-1">
<p class="text-sm text-muted-foreground">
<a class="font-medium text-foreground hover:underline" href="#title"> Mary Palmer </a>
mentioned you in
<a class="font-medium text-foreground hover:underline" href="#title">
project-campaign-02
</a>.
</p>
<p class="text-xs text-muted-foreground">2 min ago</p>
</div>
<div class="flex gap-2">
<Button size="sm">Accept</Button>
<Button size="sm" variant="outline">Decline</Button>
</div>
</div>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close notification"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-17.svelte)
## notification-18
> A type-safe, accessible notification-18 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-18`
- **Location**: `/src/lib/components/notifications/notification-18.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import Radio from 'lucide-svelte/icons/radio';
import X from 'lucide-svelte/icons/x';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element. -->
<div
class="z-[100] max-w-[400px] rounded-lg border border-border bg-background p-4 shadow-lg shadow-black/5"
>
<div class="flex items-center gap-2">
<div
class="flex size-9 shrink-0 items-center justify-center rounded-full border border-border"
aria-hidden="true"
>
<Radio class="opacity-60" size={16} strokeWidth={2} />
</div>
<div class="flex grow items-center gap-12">
<div class="space-y-1">
<p class="text-sm font-medium">Live in 27 hours</p>
<p class="text-xs text-muted-foreground">November 20 at 8:00 PM.</p>
</div>
<Button size="sm">Notify me</Button>
</div>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close notification"
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-18.svelte)
## notification-19
> A type-safe, accessible notification-19 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-19.todo`
- **Location**: `/src/lib/components/notifications/notification-19.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-19.todo.svelte)
## notification-20
> A type-safe, accessible notification-20 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-20.todo`
- **Location**: `/src/lib/components/notifications/notification-20.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-20.todo.svelte)
## notification-21
> A type-safe, accessible notification-21 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-21`
- **Location**: `/src/lib/components/notifications/notification-21.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`svelte-sonner`](https://github.com/wobsoriano/svelte-sonner)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import { toast } from 'svelte-sonner';
</script>
<Button
variant="outline"
onclick={() => {
toast('Your request was completed!', {
action: {
label: 'Undo',
onClick: () => console.info('Undo')
},
description: 'It was a long journey, but we made it!'
});
}}
>
Show sonner
</Button>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-21.svelte)
## notification-22
> A type-safe, accessible notification-22 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-22`
- **Location**: `/src/lib/components/notifications/notification-22.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
- [`svelte-sonner`](https://github.com/wobsoriano/svelte-sonner)
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
import CircleCheck from 'lucide-svelte/icons/circle-check';
import X from 'lucide-svelte/icons/x';
import { toast, type ToastT } from 'svelte-sonner';
function openToast() {
const newId = Math.random();
//the implementation will change, once https://github.com/wobsoriano/svelte-sonner/pull/126 lands
//@ts-expect-error - this is a hack to get the toast id, dont use in production
toast.custom((node) => customToastSnippet(node, () => newId), {
id: newId
});
}
</script>
{#snippet customToastSnippet(toastId: ToastT['id'])}
<div class="w-[var(--width)] rounded-lg border border-border bg-background px-4 py-3">
<div class="flex gap-2">
<div class="flex grow gap-3">
<CircleCheck
class="mt-0.5 shrink-0 text-emerald-500"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
<div class="flex grow justify-between gap-12">
<p class="text-sm">Message sent</p>
<div class="whitespace-nowrap text-sm">
<button class="text-sm font-medium hover:underline">View</button>
<span class="mx-1 text-muted-foreground">·</span>
<button
class="text-sm font-medium hover:underline"
onclick={() => toast.dismiss(toastId)}
>
Undo
</button>
</div>
</div>
</div>
<Button
variant="ghost"
class="group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent"
aria-label="Close banner"
onclick={() => toast.dismiss(toastId)}
>
<X
size={16}
strokeWidth={2}
class="opacity-60 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
</Button>
</div>
</div>
{/snippet}
<Button variant="outline" onclick={() => openToast()}>Custom sonner</Button>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-22.svelte)
## notification-23
> A type-safe, accessible notification-23 component for building modern UIs. This component is part of the notifications collection.
### Core Information
- **Component ID**: `notification-23`
- **Location**: `/src/lib/components/notifications/notification-23.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
<script lang="ts">
import Button from '$lib/components/ui/button.svelte';
</script>
<!-- To make the notification fixed, add classes like `fixed bottom-4 inset-x-4` to the container element. -->
<div
class="z-[100] rounded-lg border border-border bg-background px-4 py-3 shadow-lg shadow-black/5"
>
<div class="flex flex-col justify-between gap-3 md:flex-row md:items-center">
<p class="text-sm">
We use cookies to improve your experience, analyze site usage, and show personalized content.
</p>
<div class="flex gap-2 max-md:flex-wrap">
<Button size="sm">Accept</Button>
<Button variant="outline" size="sm">Decline</Button>
</div>
</div>
</div>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-23.svelte)