This is the llms.txt documentation for the "badges" directory of the Origin UI - Svelte project. # "badges" 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 13 components, each following best practices for accessibility, performance, and type safety. ## Components ## badge-01 > A type-safe, accessible badge-01 component for building modern UIs. This component is part of the badges collection. ### Core Information - **Component ID**: `badge-01` - **Location**: `/src/lib/components/badges/badge-01.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte Badge ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-01.svelte) ## badge-02 > A type-safe, accessible badge-02 component for building modern UIs. This component is part of the badges collection. ### Core Information - **Component ID**: `badge-02` - **Location**: `/src/lib/components/badges/badge-02.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte Badge ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-02.svelte) ## badge-03 > A type-safe, accessible badge-03 component for building modern UIs. This component is part of the badges collection. ### Core Information - **Component ID**: `badge-03` - **Location**: `/src/lib/components/badges/badge-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/badges/badge-03.svelte) ## badge-04 > A type-safe, accessible badge-04 component for building modern UIs. This component is part of the badges collection. ### Core Information - **Component ID**: `badge-04` - **Location**: `/src/lib/components/badges/badge-04.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte 6 ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-04.svelte) ## badge-05 > A type-safe, accessible badge-05 component for building modern UIs. This component is part of the badges collection. ### Core Information - **Component ID**: `badge-05` - **Location**: `/src/lib/components/badges/badge-05.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte Link ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-05.svelte) ## badge-06 > A type-safe, accessible badge-06 component for building modern UIs. This component is part of the badges collection. ### Core Information - **Component ID**: `badge-06` - **Location**: `/src/lib/components/badges/badge-06.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte Badge 73 ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-06.svelte) ## badge-07 > A type-safe, accessible badge-07 component for building modern UIs. This component is part of the badges collection. ### Core Information - **Component ID**: `badge-07` - **Location**: `/src/lib/components/badges/badge-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/badges/badge-07.svelte) ## badge-08 > A type-safe, accessible badge-08 component for building modern UIs. This component is part of the badges collection. ### Core Information - **Component ID**: `badge-08` - **Location**: `/src/lib/components/badges/badge-08.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte Badge ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-08.svelte) ## badge-09 > A type-safe, accessible badge-09 component for building modern UIs. This component is part of the badges collection. ### Core Information - **Component ID**: `badge-09` - **Location**: `/src/lib/components/badges/badge-09.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte Badge ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-09.svelte) ## badge-10 > A type-safe, accessible badge-10 component for building modern UIs. This component is part of the badges collection. ### Core Information - **Component ID**: `badge-10` - **Location**: `/src/lib/components/badges/badge-10.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte Badge ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-10.svelte) ## badge-11 > A type-safe, accessible badge-11 component for building modern UIs. This component is part of the badges collection. ### Core Information - **Component ID**: `badge-11` - **Location**: `/src/lib/components/badges/badge-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/badges/badge-11.svelte) ## badge-12 > A type-safe, accessible badge-12 component for building modern UIs. This component is part of the badges collection. ### Core Information - **Component ID**: `badge-12` - **Location**: `/src/lib/components/badges/badge-12.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte {#if isActive} Removable {/if} ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-12.svelte) ## badge-13 > A type-safe, accessible badge-13 component for building modern UIs. This component is part of the badges collection. ### Core Information - **Component ID**: `badge-13` - **Location**: `/src/lib/components/badges/badge-13.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte {#if isActive} Tag {/if} ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/badges/badge-13.svelte)