This is the llms.txt documentation for the "banners" directory of the Origin UI - Svelte project. # "banners" 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 12 components, each following best practices for accessibility, performance, and type safety. ## Components ## banner-01 > A type-safe, accessible banner-01 component for building modern UIs. This component is part of the banners collection. ### Core Information - **Component ID**: `banner-01` - **Location**: `/src/lib/components/banners/banner-01.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/banners/banner-01.svelte) ## banner-02 > A type-safe, accessible banner-02 component for building modern UIs. This component is part of the banners collection. ### Core Information - **Component ID**: `banner-02` - **Location**: `/src/lib/components/banners/banner-02.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte

✨Introducing transactional and marketing emails

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/banners/banner-02.svelte) ## banner-03 > A type-safe, accessible banner-03 component for building modern UIs. This component is part of the banners collection. ### Core Information - **Component ID**: `banner-03` - **Location**: `/src/lib/components/banners/banner-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/banners/banner-03.svelte) ## banner-04 > A type-safe, accessible banner-04 component for building modern UIs. This component is part of the banners collection. ### Core Information - **Component ID**: `banner-04` - **Location**: `/src/lib/components/banners/banner-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/banners/banner-04.svelte) ## banner-05 > A type-safe, accessible banner-05 component for building modern UIs. This component is part of the banners collection. ### Core Information - **Component ID**: `banner-05` - **Location**: `/src/lib/components/banners/banner-05.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte {#if visible}

{/if} ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/banners/banner-05.svelte) ## banner-06 > A type-safe, accessible banner-06 component for building modern UIs. This component is part of the banners collection. ### Core Information - **Component ID**: `banner-06` - **Location**: `/src/lib/components/banners/banner-06.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte {#if visible}

{/if} ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/banners/banner-06.svelte) ## banner-07 > A type-safe, accessible banner-07 component for building modern UIs. This component is part of the banners collection. ### Core Information - **Component ID**: `banner-07` - **Location**: `/src/lib/components/banners/banner-07.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte {#if visible}

{/if} ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/banners/banner-07.svelte) ## banner-08 > A type-safe, accessible banner-08 component for building modern UIs. This component is part of the banners collection. ### Core Information - **Component ID**: `banner-08` - **Location**: `/src/lib/components/banners/banner-08.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte {#if visible}

{/if} ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/banners/banner-08.svelte) ## banner-09 > A type-safe, accessible banner-09 component for building modern UIs. This component is part of the banners collection. ### Core Information - **Component ID**: `banner-09` - **Location**: `/src/lib/components/banners/banner-09.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte {#if visible}

Boost your experience with Origin UI

The new feature is live! Try it out and let us know what you think.

{/if} ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/banners/banner-09.svelte) ## banner-10 > A type-safe, accessible banner-10 component for building modern UIs. This component is part of the banners collection. ### Core Information - **Component ID**: `banner-10` - **Location**: `/src/lib/components/banners/banner-10.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte {#if visible && !timeLeft.isExpired}

Black Friday Sale!

It kicks off today and is available for just 24 hours—don‘t miss out!

{#if timeLeft.days > 0} {timeLeft.days} d {/if} {timeLeft.hours.toString().padStart(2, '0')} h {timeLeft.minutes.toString().padStart(2, '0')} m {timeLeft.seconds.toString().padStart(2, '0')} s

{/if} ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/banners/banner-10.svelte) ## banner-11 > A type-safe, accessible banner-11 component for building modern UIs. This component is part of the banners collection. ### Core Information - **Component ID**: `banner-11` - **Location**: `/src/lib/components/banners/banner-11.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte

📫 Subscribe to our newsletter and get 10% off your first order! · Subscribe

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/banners/banner-11.svelte) ## banner-12 > A type-safe, accessible banner-12 component for building modern UIs. This component is part of the banners collection. ### Core Information - **Component ID**: `banner-12` - **Location**: `/src/lib/components/banners/banner-12.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte

v2.1.0 • New features and improvements available

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