This is the llms.txt documentation for the "avatars" directory of the Origin UI - Svelte project.
# "avatars" 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
## avatar-01
> A type-safe, accessible avatar-01 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-01`
- **Location**: `/src/lib/components/avatars/avatar-01.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
CN
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-01.svelte)
## avatar-02
> A type-safe, accessible avatar-02 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-02`
- **Location**: `/src/lib/components/avatars/avatar-02.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
KK
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-02.svelte)
## avatar-03
> A type-safe, accessible avatar-03 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-03`
- **Location**: `/src/lib/components/avatars/avatar-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/avatars/avatar-03.svelte)
## avatar-04
> A type-safe, accessible avatar-04 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-04`
- **Location**: `/src/lib/components/avatars/avatar-04.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
KK
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-04.svelte)
## avatar-05
> A type-safe, accessible avatar-05 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-05`
- **Location**: `/src/lib/components/avatars/avatar-05.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
KKOnline
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-05.svelte)
## avatar-06
> A type-safe, accessible avatar-06 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-06`
- **Location**: `/src/lib/components/avatars/avatar-06.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
KKOffline
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-06.svelte)
## avatar-07
> A type-safe, accessible avatar-07 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-07`
- **Location**: `/src/lib/components/avatars/avatar-07.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
KKOnline
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-07.svelte)
## avatar-08
> A type-safe, accessible avatar-08 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-08`
- **Location**: `/src/lib/components/avatars/avatar-08.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
KKVerified
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-08.svelte)
## avatar-09
> A type-safe, accessible avatar-09 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-09`
- **Location**: `/src/lib/components/avatars/avatar-09.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
KK6
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-09.svelte)
## avatar-10
> A type-safe, accessible avatar-10 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-10`
- **Location**: `/src/lib/components/avatars/avatar-10.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
KK6
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-10.svelte)
## avatar-11
> A type-safe, accessible avatar-11 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-11`
- **Location**: `/src/lib/components/avatars/avatar-11.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-11.svelte)
## avatar-12
> A type-safe, accessible avatar-12 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-12`
- **Location**: `/src/lib/components/avatars/avatar-12.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-12.svelte)
## avatar-13
> A type-safe, accessible avatar-13 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-13`
- **Location**: `/src/lib/components/avatars/avatar-13.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-13.svelte)
## avatar-14
> A type-safe, accessible avatar-14 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-14`
- **Location**: `/src/lib/components/avatars/avatar-14.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-14.svelte)
## avatar-15
> A type-safe, accessible avatar-15 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-15`
- **Location**: `/src/lib/components/avatars/avatar-15.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-15.svelte)
## avatar-16
> A type-safe, accessible avatar-16 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-16`
- **Location**: `/src/lib/components/avatars/avatar-16.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-16.svelte)
## avatar-17
> A type-safe, accessible avatar-17 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-17`
- **Location**: `/src/lib/components/avatars/avatar-17.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-17.svelte)
## avatar-18
> A type-safe, accessible avatar-18 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-18`
- **Location**: `/src/lib/components/avatars/avatar-18.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-18.svelte)
## avatar-19
> A type-safe, accessible avatar-19 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-19`
- **Location**: `/src/lib/components/avatars/avatar-19.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-19.svelte)
## avatar-20
> A type-safe, accessible avatar-20 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-20`
- **Location**: `/src/lib/components/avatars/avatar-20.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-20.svelte)
## avatar-21
> A type-safe, accessible avatar-21 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-21`
- **Location**: `/src/lib/components/avatars/avatar-21.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-21.svelte)
## avatar-22
> A type-safe, accessible avatar-22 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-22`
- **Location**: `/src/lib/components/avatars/avatar-22.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/avatars/avatar-22.svelte)
## avatar-23
> A type-safe, accessible avatar-23 component for building modern UIs. This component is part of the avatars collection.
### Core Information
- **Component ID**: `avatar-23`
- **Location**: `/src/lib/components/avatars/avatar-23.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)
Full component implementation:
```svelte