This is the llms.txt documentation for the "notifications" directory of the Origin UI - Svelte project. # "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

``` ### 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

``` ### 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

``` ### 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

``` ### 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

``` ### 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

``` ### 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

``` ### 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

``` ### 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

``` ### 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

``` ### 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

``` ### 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

``` ### 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

``` ### 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

``` ### 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

We Value Your Privacy 🍪

We use cookies to improve your experience, and show personalized content.

``` ### 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

Version 1.4 is now available!

This update contains several bug fixes and performance improvements.

``` ### 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

Mary Palmer mentioned you in project-campaign-02 .

2 min ago

``` ### 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

Live in 27 hours

November 20 at 8:00 PM.

``` ### 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 ``` ### 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 {#snippet customToastSnippet(toastId: ToastT['id'])}

{/snippet} ``` ### 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

We use cookies to improve your experience, analyze site usage, and show personalized content.

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/notifications/notification-23.svelte)