This is the llms.txt documentation for the "radios" directory of the Origin UI - Svelte project. # "radios" 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 19 components, each following best practices for accessibility, performance, and type safety. ## Components ## radio-01 > A type-safe, accessible radio-01 component for building modern UIs. This component is part of the radios collection. ### Core Information - **Component ID**: `radio-01` - **Location**: `/src/lib/components/radios/radio-01.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/radios/radio-01.svelte) ## radio-02 > A type-safe, accessible radio-02 component for building modern UIs. This component is part of the radios collection. ### Core Information - **Component ID**: `radio-02` - **Location**: `/src/lib/components/radios/radio-02.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/radios/radio-02.svelte) ## radio-03 > A type-safe, accessible radio-03 component for building modern UIs. This component is part of the radios collection. ### Core Information - **Component ID**: `radio-03` - **Location**: `/src/lib/components/radios/radio-03.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/radios/radio-03.svelte) ## radio-04 > A type-safe, accessible radio-04 component for building modern UIs. This component is part of the radios collection. ### Core Information - **Component ID**: `radio-04` - **Location**: `/src/lib/components/radios/radio-04.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte

You can use this card with a label and a description.

You can use this card with a label and a description.

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

You can use this radio with a label and a description.

You can use this checkbox with a label and a description.

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/radios/radio-05.svelte) ## radio-06 > A type-safe, accessible radio-06 component for building modern UIs. This component is part of the radios collection. ### Core Information - **Component ID**: `radio-06` - **Location**: `/src/lib/components/radios/radio-06.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`~icons/ri`](https://www.npmjs.com/package/@iconify-json/ri) (dev dependency) - [`~icons/ri`](https://github.com/antfu/unplugin-icons) (dev dependency) Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/radios/radio-06.svelte) ## radio-07 > A type-safe, accessible radio-07 component for building modern UIs. This component is part of the radios collection. ### Core Information - **Component ID**: `radio-07` - **Location**: `/src/lib/components/radios/radio-07.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
Choose a color
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/radios/radio-07.svelte) ## radio-08 > A type-safe, accessible radio-08 component for building modern UIs. This component is part of the radios collection. ### Core Information - **Component ID**: `radio-08` - **Location**: `/src/lib/components/radios/radio-08.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte

You can use this card with a label and a description.

You can use this card with a label and a description.

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

You can use this card with a label and a description.

You can use this card with a label and a description.

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

You can use this card with a label and a description.

You can use this card with a label and a description.

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/radios/radio-10.svelte) ## radio-11 > A type-safe, accessible radio-11 component for building modern UIs. This component is part of the radios collection. ### Core Information - **Component ID**: `radio-11` - **Location**: `/src/lib/components/radios/radio-11.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte {#each items as item (item.id)}
{/each} ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/radios/radio-11.svelte) ## radio-12 > A type-safe, accessible radio-12 component for building modern UIs. This component is part of the radios collection. ### Core Information - **Component ID**: `radio-12` - **Location**: `/src/lib/components/radios/radio-12.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`~icons/ri`](https://www.npmjs.com/package/@iconify-json/ri) (dev dependency) - [`~icons/ri`](https://github.com/antfu/unplugin-icons) (dev dependency) Full component implementation: ```svelte {#each items as item (item.id)} {/each} ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/radios/radio-12.svelte) ## radio-13 > A type-safe, accessible radio-13 component for building modern UIs. This component is part of the radios collection. ### Core Information - **Component ID**: `radio-13` - **Location**: `/src/lib/components/radios/radio-13.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
CPU Cores {#each items as item (item.id)} {/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/radios/radio-13.svelte) ## radio-14 > A type-safe, accessible radio-14 component for building modern UIs. This component is part of the radios collection. ### Core Information - **Component ID**: `radio-14` - **Location**: `/src/lib/components/radios/radio-14.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
Server location {#each items as item (item.id)}
{/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/radios/radio-14.svelte) ## radio-15 > A type-safe, accessible radio-15 component for building modern UIs. This component is part of the radios collection. ### Core Information - **Component ID**: `radio-15` - **Location**: `/src/lib/components/radios/radio-15.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
Choose plan {#each items as item (item.id)}
{item.price}
{/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/radios/radio-15.svelte) ## radio-16 > A type-safe, accessible radio-16 component for building modern UIs. This component is part of the radios collection. ### Core Information - **Component ID**: `radio-16` - **Location**: `/src/lib/components/radios/radio-16.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
How did it go? {#each items as item (item.id)} {/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/radios/radio-16.svelte) ## radio-17 > A type-safe, accessible radio-17 component for building modern UIs. This component is part of the radios collection. ### Core Information - **Component ID**: `radio-17` - **Location**: `/src/lib/components/radios/radio-17.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
How likely are you to recommend us? {#each [0, 1, 2, 3, 4, 5] as number (number)} {/each}

😡 Not likely

Very Likely 😍

``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/radios/radio-17.svelte) ## radio-18 > A type-safe, accessible radio-18 component for building modern UIs. This component is part of the radios collection. ### Core Information - **Component ID**: `radio-18` - **Location**: `/src/lib/components/radios/radio-18.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`lucide-svelte`](https://github.com/lucide-icons/lucide) - [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency) Full component implementation: ```svelte
Choose a theme {#each items as item (item.id)} {/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/radios/radio-18.svelte) ## radio-19 > A type-safe, accessible radio-19 component for building modern UIs. This component is part of the radios collection. ### Core Information - **Component ID**: `radio-19` - **Location**: `/src/lib/components/radios/radio-19.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/radios/radio-19.svelte)