### Install Shiki Syntax Highlighter

Source: https://skeleton.dev/llms-svelte.txt

Installs the Shiki syntax highlighter using npm. This package provides accurate and fast syntax highlighting for various programming languages.

```bash
npm install -D shiki
```

--------------------------------

### Basic Menu Example

Source: https://skeleton.dev/llms-svelte.txt

Demonstrates the basic implementation of a dropdown menu with several action items.

```APIDOC
## Menu Component Usage

### Description
Standard dropdown menu implementation.

### Method
N/A (Component Usage)

### Endpoint
N/A

### Parameters
None

### Request Example
```svelte
<script lang="ts">
	import { Menu, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<Menu>
	<Menu.Trigger class="btn preset-filled">Open Menu</Menu.Trigger>
	<Portal>
		<Menu.Positioner>
			<Menu.Content>
				<Menu.Item value="new">
					<Menu.ItemText>New File</Menu.ItemText>
				</Menu.Item>
				<Menu.Item value="open">
					<Menu.ItemText>Open File</Menu.ItemText>
				</Menu.Item>
				<Menu.Separator />
				<Menu.Item value="save">
					<Menu.ItemText>Save</Menu.ItemText>
				</Menu.Item>
				<Menu.Item value="export">
					<Menu.ItemText>Export</Menu.ItemText>
				</Menu.Item>
			</Menu.Content>
		</Menu.Positioner>
	</Portal>
</Menu>
```

### Response
N/A
```

--------------------------------

### Skeleton UI Button Presets Example (Astro)

Source: https://skeleton.dev/llms-svelte.txt

Provides an example of using Skeleton UI's preset utility classes for styling buttons and other interface elements within an Astro component. It showcases filled, tonal, and outlined button presets with color variations.

```astro
---
const diagramCircle = 'preset-tonal w-8 aspect-square flex justify-center items-center rounded-full';
---

<div class="grid grid-cols-3 gap-10">
	<!-- Preset: Filled -->
	<div class="flex flex-col items-center gap-4">
		<button type="button" class="btn preset-filled-primary-500">Filled</button>
		<div class={diagramCircle}>1</div>
	</div>
	<!-- Preset: Tonal -->
	<div class="flex flex-col items-center gap-4">
		<button type="button" class="btn preset-tonal-primary">Tonal</button>
		<div class={diagramCircle}>2</div>
	</div>
	<!-- Preset: Outlined -->
	<div class="flex flex-col items-center gap-4">
		<button type="button" class="btn preset-outlined-primary-500">Outlined</button>
		<div class={diagramCircle}>3</div>
	</div>
</div>
```

--------------------------------

### Install Radix UI Component Package

Source: https://skeleton.dev/llms-svelte.txt

Installs the Radix UI component package using npm. This is a prerequisite for using Radix components in your project.

```bash
npm install @radix-ui/react-toggle-group
```

--------------------------------

### Astro Kitchen Sink Form Example

Source: https://skeleton.dev/llms-svelte.txt

A comprehensive example of various input types in Astro, including date, file, range, progress, and color pickers.

```astro
<form class="mx-auto w-full max-w-md space-y-4">
	<!-- Date Picker -->
	<label class="label">
		<span class="label-text">Date</span>
		<input class="input" type="date" />
	</label>
	<!-- File Input -->
	<label class="label">
		<span class="label-text">File Input</span>
		<input class="input" type="file" />
	</label>
	<!-- Range -->
	<label class="label">
		<span class="label-text">Range</span>
		<input class="input" type="range" value="75" max="100" />
	</label>
	<!-- Progress -->
	<label class="label">
		<span class="label-text">Progress</span>
		<progress class="progress" value="50" max="100"></progress>
	</label>
	<!-- Color -->
	<div class="grid grid-cols-[auto_1fr] gap-2">
		<input class="input" type="color" value="#bada55" />
		<input class="input" type="text" value="#bada55" readonly tabindex="-1" />
	</div>
</form>
```

--------------------------------

### Outlined Presets Example (Astro)

Source: https://skeleton.dev/llms-svelte.txt

Demonstrates applying 'preset-outlined' classes to buttons in Astro, showing different color and shade combinations.

```astro
<div class="grid w-full grid-cols-2 gap-2 lg:grid-cols-3">
	{/* Neutral */}
	<button type="button" class="btn preset-outlined">(neutral)</button>
	{/* Colors */}
	<button type="button" class="btn preset-outlined-primary-950-50">950-50</button>
	<button type="button" class="btn preset-outlined-primary-900-100">900-100</button>
	<button type="button" class="btn preset-outlined-primary-800-200">800-200</button>
	<button type="button" class="btn preset-outlined-primary-700-300">700-300</button>
	<button type="button" class="btn preset-outlined-primary-600-400">600-400</button>
	<button type="button" class="btn preset-outlined-primary-500">500</button>
	<button type="button" class="btn preset-outlined-primary-400-600">400-600</button>
	<button type="button" class="btn preset-outlined-primary-300-700">300-700</button>
	<button type="button" class="btn preset-outlined-primary-200-800">200-800</button>
	<button type="button" class="btn preset-outlined-primary-100-900">100-900</button>
	<button type="button" class="btn preset-outlined-primary-50-950">50-950</button>
</div>
```

--------------------------------

### Outlined Presets Example (TXT)

Source: https://skeleton.dev/llms-svelte.txt

Defines the naming convention for outlined presets in TXT format, including variations for color and shade.

```txt
preset-outlined
preset-outlined-{color}-{shade}-{shade}
```

--------------------------------

### Responsive Grid Layout Example (HTML)

Source: https://skeleton.dev/llms-svelte.txt

This example demonstrates how to create a responsive grid layout using Tailwind CSS. It shows a two-column layout on medium screens and larger, collapsing to a single column on smaller screens. The sidebar is hidden on small screens and displayed from the medium breakpoint upwards.

```html
<div class="grid grid-cols-1 md:grid-cols-[auto_1fr]">
	<!-- Hide the sidebar on small screens; show at the medium breakpoint or wider -->
	<aside class="hidden md:block">(sidebar)</aside>
	<!-- Remains visible at all breakpoints -->
	<main>(main)</main>
</div>
```

--------------------------------

### Install Bits UI and Date Formatting Package

Source: https://skeleton.dev/llms-svelte.txt

Installs the core Bits UI package and the Adobe Internationalized Date package for date/time formatting. These are essential for using Bits UI components like the Calendar.

```bash
npm install bits-ui
npm i -D @internationalized/date
```

--------------------------------

### Install Custom Font with npm

Source: https://skeleton.dev/llms-svelte.txt

Install a custom font package using npm. This example shows how to install the 'Open Sans' font from the Fontsource library.

```bash
npm install @fontsource/open-sans
```

--------------------------------

### Basic Accordion Example

Source: https://skeleton.dev/llms-svelte.txt

A fundamental example of the Accordion component, displaying content in collapsible sections. It uses Svelte and the Skeleton UI library, along with icons from Lucide.

```svelte
<script lang="ts">
	import { ChevronDownIcon } from '@lucide/svelte';
	import { Accordion } from '@skeletonlabs/skeleton-svelte';
	import { slide } from 'svelte/transition';

	/**
	 * Attribution
	 * @see https://www.healthline.com/health/fun-facts-about-the-skeletal-system#8-More-than-half-your-bones-are-in-your-hands-and-feet
	 */
	const items = [
		{
			id: '1',
			title: 'Your skeleton is made of more than 200 bones',
			description:
				'Inside your body are 206 bones. Each bone plays a very important role in making all the mechanics of your body function properly. If a bone is broken, all the bones around it can’t perform their duty properly.',
		},
		{
			id: '2',
			title: 'The smallest bone in the body is in your ear',
			description:
				'The stapes, a bone in your inner ear, is the smallest of all your bones. This bone is also sometimes called the stirrup because of its Y shape. Together with the anvil and hammer bones, the stapes helps translate sounds you hear into waves your brain can understand.',
		},
		{
			id: '3',
			title: 'One bone isn’t connected to any other bones',
			description:
				'The hyoid bone, which is in your throat, is the only bone that doesn’t connect to a joint. The hyoid is responsible for holding your tongue in place.',
		}
	];
</script>

<Accordion>
	{#each items as item, i (item)}
		{#if i !== 0}
			<hr class="hr" />
		{/if}
		<Accordion.Item value={item.id}>
			<h3>
				<Accordion.ItemTrigger class="font-bold flex items-center justify-between gap-2">
					{item.title}
					<Accordion.ItemIndicator class="group">
						<ChevronDownIcon class="h-5 w-5 transition group-data-[state=open]:rotate-180" />
					</Accordion.ItemIndicator>
				</Accordion.ItemTrigger>
			</h3>
			<Accordion.ItemContent>
				{#snippet element(attributes)}
					{#if !attributes.hidden}
						<div {...attributes} transition:slide={{ duration: 150 }}>
							{item.description}
						</div>
					{/if}
				{/snippet}
			</Accordion.ItemContent>
		</Accordion.Item>
	{/each}
</Accordion>

```

--------------------------------

### Configure Toast Placement

Source: https://skeleton.dev/llms-svelte.txt

Shows how to initialize the toaster with a specific `placement` option to control the global screen position of toast notifications. This example sets the toasts to appear at the 'bottom-end'.

```svelte
<script lang="ts">
	import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';

	const toaster = createToaster({
		placement: 'bottom-end',
	});
</script>

<button
	class="btn preset-filled"
	onclick={() =>
		toaster.info({
			title: 'Title',
			description: 'This is a description.',
		})}
>
	Toast
</button>

<Toast.Group {toaster}>
	{#snippet children(toast)}
		<Toast {toast}>
			<Toast.Message>
				<Toast.Title>{toast.title}</Toast.Title>
				<Toast.Description>{toast.description}</Toast.Description>
			</Toast.Message>
			<Toast.CloseTrigger />
		</Toast>
	{/snippet}
</Toast.Group>
```

--------------------------------

### Astro Checkboxes Example

Source: https://skeleton.dev/llms-svelte.txt

Demonstrates how to create a set of checkboxes in Astro. Each checkbox is wrapped in a label for accessibility.

```astro
<form class="space-y-2">
	<label class="flex items-center space-x-2">
		<input class="checkbox" type="checkbox" checked />
		<p>Option 1</p>
	</label>
	<label class="flex items-center space-x-2">
		<input class="checkbox" type="checkbox" />
		<p>Option 2</p>
	</label>
	<label class="flex items-center space-x-2">
		<input class="checkbox" type="checkbox" />
		<p>Option 3</p>
	</label>
</form>
```

--------------------------------

### Carousel Usage Example

Source: https://skeleton.dev/llms-svelte.txt

Demonstrates how to implement the Carousel component with slides, controls, and indicators.

```APIDOC
## Carousel Usage Example

This example showcases the implementation of the Carousel component.

### Code

```svelte
<script lang="ts">
	import { Carousel } from '@skeletonlabs/skeleton-svelte';

	const slides = [
		{ title: 'Slide 1' },
		{ title: 'Slide 2' },
		{ title: 'Slide 3' },
		{ title: 'Slide 4' },
		{ title: 'Slide 5' },
		{ title: 'Slide 6' },
		{ title: 'Slide 7' },
		{ title: 'Slide 8' },
		{ title: 'Slide 9' },
		{ title: 'Slide 10' },
	];
</script>

<Carousel slideCount={slides.length} slidePerView={3} spacing="16px" loop>
	<Carousel.Control class="flex justify-between mb-4">
		<Carousel.PrevTrigger class="btn preset-filled">
			<span>&larr;</span>
			<span>Back</span>
		</Carousel.PrevTrigger>
		<Carousel.AutoplayTrigger class="btn preset-tonal">Toggle Autoplay</Carousel.AutoplayTrigger>
		<Carousel.NextTrigger class="btn preset-filled">
			<span>Next</span>
			<span>&rarr;</span>
		</Carousel.NextTrigger>
	</Carousel.Control>
	<Carousel.ItemGroup>
		{#each slides as slide, i}
			<Carousel.Item index={i} class="card bg-surface-100-900 h-50 p-4 flex justify-center items-center">
				{slide.title}
			</Carousel.Item>
		{/each}
	</Carousel.ItemGroup>
	<Carousel.IndicatorGroup>
		<Carousel.Context>
			{#snippet children(carousel)}
				{#each carousel().pageSnapPoints as _, index}
					<Carousel.Indicator {index} />
				{/each}
			{/snippet}
		</Carousel.Context>
	</Carousel.IndicatorGroup>
</Carousel>
```

### Notes

This component adopts a headless design, meaning default styles are not applied, allowing for maximum user control over styling.
```

--------------------------------

### Basic Tags Input Example - Skeleton Svelte

Source: https://skeleton.dev/llms-svelte.txt

Demonstrates the fundamental usage of the TagsInput component in Skeleton Svelte, allowing users to input a list of predefined values.

```svelte
<script lang="ts">
	import { TagsInput } from '@skeletonlabs/skeleton-svelte';
</script>

<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
	<TagsInput.Label>Flavors</TagsInput.Label>
	<TagsInput.Control>
		<TagsInput.Context>
			{#snippet children(tagsInput)}
				{#each tagsInput().value as value, index (index)}
					<TagsInput.Item {value} {index}>
						<TagsInput.ItemPreview>
							<TagsInput.ItemText>{value}</TagsInput.ItemText>
							<TagsInput.ItemDeleteTrigger />
						</TagsInput.ItemPreview>
						<TagsInput.ItemInput />
					</TagsInput.Item>
				{/each}
			{/snippet}
		</TagsInput.Context>
		<TagsInput.Input placeholder="Add a flavor..." />
	</TagsInput.Control>
	<TagsInput.ClearTrigger>Clear All</TagsInput.ClearTrigger>
	<TagsInput.HiddenInput />
</TagsInput>
```

--------------------------------

### Complete Skeleton Calendar Example (Svelte)

Source: https://skeleton.dev/llms-svelte.txt

A full example of the Skeleton Calendar component in Svelte, demonstrating its integration with internationalization libraries for date handling and custom configuration for date unavailability. It includes styling for headers, navigation, and the calendar grid.

```svelte
<script lang="ts">
	import { getLocalTimeZone, today } from '@internationalized/date';
	import { Calendar } from 'bits-ui';

	const isDateUnavailable: Calendar.RootProps['isDateUnavailable'] = (date) => {
		return date.day === 17 || date.day === 18;
	};

	let value = $state(today(getLocalTimeZone()));
<\/script>

<Calendar.Root
	class="card inline-block border border-surface-200-800 bg-surface-50-950 shadow-xl mt-6 p-4"
	{isDateUnavailable}
	weekdayFormat="short"
	fixedWeeks={true}
	type="single"
	bind:value
>
	{#snippet children({ months, weekdays })}
		<Calendar.Header class="flex items-center justify-between">
			<Calendar.PrevButton class="btn-icon preset-filled-primary-500" title="Previous month" aria-label="Previous month">
				<span>&larr;</span>
			</Calendar.PrevButton>
			<Calendar.Heading class="text-lg font-bold" />
			<Calendar.NextButton class="btn-icon preset-filled-primary-500" title="Next month" aria-label="Next month">
				<span>&rarr;</span>
			</Calendar.NextButton>
		</Calendar.Header>
		<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
			{#each months as month, i (i)}
				<Calendar.Grid class="w-full border-collapse select-none space-y-1">
					<Calendar.GridHead>
						<Calendar.GridRow class="mb-1 flex w-full justify-between">
							{#each weekdays as day}
								<Calendar.HeadCell class="text-surface-600-400 font-normal! w-10 rounded-md text-xs">
									<div>{day.slice(0, 2)}</div>
								</Calendar.HeadCell>
							{/each}
						</Calendar.GridRow>
					</Calendar.GridHead>
					<Calendar.GridBody>
						{#each month.weeks as weekDates}
							<Calendar.GridRow class="flex w-full">
								{#each weekDates as date}
									<Calendar.Cell {date} month={month.value} class="p-0! relative size-10 text-center text-sm">
										<Calendar.Day
											class="rounded hover:border-surface-200-800 data-selected:bg-foreground data-disabled:text-surface-600-400 data-selected:preset-filled data-unavailable:text-surface-600-400 data-disabled:pointer-events-none data-outside-month:pointer-events-none data-selected:font-medium data-unavailable:line-through group relative inline-flex size-10 items-center justify-center whitespace-nowrap border border-transparent bg-transparent p-0 text-sm font-normal"
										>
											<div
												class="bg-foreground group-data-selected:bg-surface-50-950 group-data-today:block absolute top-[5px] hidden size-1 rounded-full"
											></div>
											{date.day}
										</Calendar.Day>
									</Calendar.Cell>
								{/each}
							</Calendar.GridRow>
						{/each}
					</Calendar.GridBody>
				</Calendar.Grid>
			{/each}
		</div>
	{/snippet}
</Calendar.Root>
```

--------------------------------

### Migrate to Tailwind Vite Plugin

Source: https://skeleton.dev/llms-svelte.txt

Replaces the PostCSS setup with the Tailwind CSS Vite plugin for improved integration. This involves uninstalling old packages and installing the new Vite plugin, then configuring `vite.config.ts`.

```typescript
import tailwindcss from '@tailwindcss/vite'

// ... other imports

plugins: [
	ttailwindcss(),
	sveltekit(), // or svelte()
]
```

--------------------------------

### Custom Presets Example (Astro)

Source: https://skeleton.dev/llms-svelte.txt

Illustrates creating and applying custom presets like 'glass', 'elevated', 'ghost', and 'gradient' within an Astro component, utilizing dynamic class generation.

```astro
---
const presets = [
	{
		label: 'Glass',
		class: 'preset-glass-primary',
	},
	{
		label: 'Elevated',
		class: 'preset-filled-surface-100-900 shadow-xl',
	},
	{
		label: 'Ghost',
		class: 'hover:preset-tonal',
	},
	{
		label: 'Gradient',
		class: 'preset-gradient-secondary-primary',
	},
];
const cell = 'flex flex-col items-center gap-4';
const diagramCircle = 'preset-tonal w-8 aspect-square flex justify-center items-center rounded-full';
---

<div class="grid grid-cols-2 md:grid-cols-4 gap-10">
	{
		presets.map((preset, index) => (
			<div class={cell}>
				<button type="button" class={`btn ${preset.class}`}>
					{preset.label}
				</button>
				<div class={diagramCircle}>{index + 1}</div>
			</div>
		))
	}
</div>

<style>
	/* TIP: In a real world project you would implement the following in your global stylesheet. */
	.preset-gradient-secondary-primary {
		background-image: linear-gradient(-45deg, var(--color-secondary-500), var(--color-primary-500));
		color: var(--color-primary-contrast-500);
	}
	.preset-glass-primary {
		background: color-mix(in oklab, var(--color-primary-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-primary-500) 50%, transparent) inset;
		backdrop-filter: blur(16px);
	}
</style>
```

--------------------------------

### Collapsible Alignment in React

Source: https://skeleton.dev/llms-react.txt

Illustrates controlling the alignment of the trigger and content using CSS flexbox properties like `items-start`. This example aligns items to the start.

```tsx
import { Collapsible } from '@skeletonlabs/skeleton-react';

export default function Alignment() {
	return (
		<Collapsible className="items-start">
			<Collapsible.Content>
				The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the
				skeleton which support the body can become the bars of the cage which imprison the spirit.
			</Collapsible.Content>
			<Collapsible.Trigger className="btn preset-filled">Toggle</Collapsible.Trigger>
		</Collapsible>
	);
}
```

--------------------------------

### Disable Listbox Globally with Skeleton Svelte

Source: https://skeleton.dev/llms-svelte.txt

This example shows how to disable the entire Skeleton Svelte Listbox component by setting the `disabled` prop to `true`. This prevents any user interaction with the listbox and its items. Ensure you have `@skeletonlabs/skeleton-svelte` installed.

```svelte
<script lang="ts">
	import { Listbox, useListCollection } from '@skeletonlabs/skeleton-svelte';

	const data = [
		{ label: 'Apple', value: 'apple' },
		{ label: 'Banana', value: 'banana' },
		{ label: 'Orange', value: 'orange' },
		{ label: 'Carrot', value: 'carrot' },
		{ label: 'Broccoli', value: 'broccoli' },
		{ label: 'Spinach', value: 'spinach' },
	];

	const collection = useListCollection({
		items: data,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
	});
</script>

<Listbox class="w-full max-w-md" {collection} disabled={true}>
	<Listbox.Content>
		{#each collection.items as item (item.value)}
			<Listbox.Item {item}>
				<Listbox.ItemText>{item.label}</Listbox.ItemText>
				<Listbox.ItemIndicator />
			</Listbox.Item>
		{/each}
	</Listbox.Content>
</Listbox>

```

--------------------------------

### Enable Date Range Selection with Skeleton React DatePicker

Source: https://skeleton.dev/llms-react.txt

Demonstrates how to configure the DatePicker component for range selection by setting `selectionMode='range'` and associating two input fields for start and end dates. This setup allows users to pick a date interval.

```tsx
import { DatePicker, Portal } from '@skeletonlabs/skeleton-react';

export default function Range() {
	return (
		<DatePicker selectionMode="range">
			<DatePicker.Label>Select Date Range</DatePicker.Label>
			<DatePicker.Control>
				<DatePicker.Input index={0} placeholder="Start date..." />
				<DatePicker.Input index={1} placeholder="End date..." />
				<DatePicker.Trigger />
			</DatePicker.Control>
			<Portal>
				<DatePicker.Positioner>
					<DatePicker.Content>
						<DatePicker.View view="day">
							<DatePicker.Context>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableHead>
												<DatePicker.TableRow>
													{datePicker.weekDays.map((weekDay, id) => (
														<DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>
													))}
												</DatePicker.TableRow>
											</DatePicker.TableHead>
											<DatePicker.TableBody>
												{datePicker.weeks.map((week, id) => (
													<DatePicker.TableRow key={id}>
														{week.map((day, id) => (
															<DatePicker.TableCell key={id} value={day}>
																<DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
										<>
											{datePicker.weeks.map((week, id) => (
												<DatePicker.TableRow key={id}>
													{week.map((day, id) => (
														<DatePicker.TableCell key={id} value={day}>
															<DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
														</DatePicker.TableCell>
													))}
												</DatePicker.TableRow>
											))}
										</>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
						<DatePicker.View view="month">
							<DatePicker.Context>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableBody>
												{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
													<DatePicker.TableRow key={id}>
														{months.map((month, id) => (
															<DatePicker.TableCell key={id} value={month.value}>
																<DatePicker.TableCellTrigger>{month.label}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
						<DatePicker.View view="year">
							<DatePicker.Context>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableBody>
												{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
													<DatePicker.TableRow key={id}>
														{years.map((year, id) => (
															<DatePicker.TableCell key={id} value={year.value}>
																<DatePicker.TableCellTrigger>{year.label}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
					</DatePicker.Content>
				</DatePicker.Positioner>
			</Portal>
		</DatePicker>
	);
}

```

--------------------------------

### Display Inline Calendar with Skeleton Svelte DatePicker

Source: https://skeleton.dev/llms-svelte.txt

This Svelte code snippet demonstrates how to render the Skeleton DatePicker component in inline mode. By adding the 'inline' prop to the root DatePicker component, it displays the calendar directly on the page without a popover. The example includes the necessary script setup and the structure for day, month, and year views, along with navigation elements.

```svelte
<script lang="ts">
	import { DatePicker } from '@skeletonlabs/skeleton-svelte';
</script>

<DatePicker inline>
	<DatePicker.Label>Choose Date</DatePicker.Label>
	<DatePicker.Content>
		<DatePicker.View view="day">
			<DatePicker.Context>
				{#snippet children(datePicker)}
					<DatePicker.ViewControl>
						<DatePicker.PrevTrigger />
						<DatePicker.ViewTrigger>
							<DatePicker.RangeText />
						</DatePicker.ViewTrigger>
						<DatePicker.NextTrigger />
					</DatePicker.ViewControl>
					<DatePicker.Table>
						<DatePicker.TableHead>
							<DatePicker.TableRow>
								{#each datePicker().weekDays as weekDay, id (id)}
									<DatePicker.TableHeader>{weekDay.short}</DatePicker.TableHeader>
								{/each}
							</DatePicker.TableRow>
						</DatePicker.TableHead>
						<DatePicker.TableBody>
							{#each datePicker().weeks as week, id (id)}
								<DatePicker.TableRow>
									{#each week as day, id (id)}
										<DatePicker.TableCell value={day}>
											<DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
										</DatePicker.TableCell>
									{/each}
								</DatePicker.TableRow>
							{/each}
						</DatePicker.TableBody>
					</DatePicker.Table>
				{/snippet}
			</DatePicker.Context>
		</DatePicker.View>
		<DatePicker.View view="month">
			<DatePicker.Context>
				{#snippet children(datePicker)}
					<DatePicker.ViewControl>
						<DatePicker.PrevTrigger />
						<DatePicker.ViewTrigger>
							<DatePicker.RangeText />
						</DatePicker.ViewTrigger>
						<DatePicker.NextTrigger />
					</DatePicker.ViewControl>
					<DatePicker.Table>
						<DatePicker.TableBody>
							{#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months, id (id)}
								<DatePicker.TableRow>
									{#each months as month, id (id)}
										<DatePicker.TableCell value={month.value}>
											<DatePicker.TableCellTrigger>{month.label}</DatePicker.TableCellTrigger>
										</DatePicker.TableCell>
									{/each}
								</DatePicker.TableRow>
							{/each}
						</DatePicker.TableBody>
					</DatePicker.Table>
				{/snippet}
			</DatePicker.Context>
		</DatePicker.View>
		<DatePicker.View view="year">
			<DatePicker.Context>
				{#snippet children(datePicker)}
					<DatePicker.ViewControl>
						<DatePicker.PrevTrigger />
						<DatePicker.ViewTrigger>
							<DatePicker.RangeText />
						</DatePicker.ViewTrigger>
						<DatePicker.NextTrigger />
					</DatePicker.ViewControl>
					<DatePicker.Table>
						<DatePicker.TableBody>
							{#each datePicker().getYearsGrid({ columns: 4 }) as years, id (id)}
								<DatePicker.TableRow>
									{#each years as year, id (id)}
										<DatePicker.TableCell value={year.value}>
											<DatePicker.TableCellTrigger>{year.label}</DatePicker.TableCellTrigger>
										</DatePicker.TableCell>
									{/each}
								</DatePicker.TableRow>
							{/each}
						</DatePicker.TableBody>
					</DatePicker.Table>
				{/snippet}
			</DatePicker.Context>
		</DatePicker.View>
	</DatePicker.Content>
</DatePicker>
```

--------------------------------

### Basic Switch Usage with State Management

Source: https://skeleton.dev/llms-svelte.txt

Demonstrates the fundamental usage of the Switch component, including state binding and handling the checked state change. It shows how to integrate the Switch with a label and display the current checked state.

```svelte
<script lang="ts">
	import { Switch } from '@skeletonlabs/skeleton-svelte';

	let checked = $state(false);
</script>

<div class="flex flex-col items-center gap-4">
	<Switch {checked} onCheckedChange={(details) => (checked = details.checked)}>
		<Switch.Control>
			<Switch.Thumb />
		</Switch.Control>
		<Switch.Label>Label</Switch.Label>
		<Switch.HiddenInput />
	</Switch>
	<p>
		<span class="opacity-60">Checked: </span>
		<code class="code">{checked}</code>
	</p>
</div>

```

--------------------------------

### Creating a List of Switches

Source: https://skeleton.dev/llms-svelte.txt

Shows how to render multiple Switch components within a list layout using Svelte's `#each` block. This example demonstrates assigning unique labels to each switch and separating them with horizontal rules.

```svelte
<script lang="ts">
	import { Switch } from '@skeletonlabs/skeleton-svelte';
</script>

<div class="grid gap-2 w-full">
	{#each ['Label 1', 'Label 2', 'Label 3'] as label, i (label)}
		<Switch class="flex justify-between p-2">
			<Switch.Label>{label}</Switch.Label>
			<Switch.Control>
				<Switch.Thumb />
			</Switch.Control>
			<Switch.HiddenInput />
		</Switch>
		{#if i < 2}
			<hr class="hr" />
		{/if}
	{/each}
</div>

```

--------------------------------

### Install Melt UI Package

Source: https://skeleton.dev/llms-svelte.txt

Installs the Melt UI package using npm. This is a prerequisite for using Melt UI components in your Svelte project.

```bash
npm install melt
```

--------------------------------

### Responsive AppBar Layout with Skeleton Svelte

Source: https://skeleton.dev/llms-svelte.txt

Demonstrates how to create a responsive AppBar layout using Skeleton Svelte components. It utilizes conditional classes to adjust the grid columns for mobile and desktop views, ensuring optimal display across devices. Dependencies include '@lucide/svelte' for icons and '@skeletonlabs/skeleton-svelte' for the AppBar.

```svelte
<script lang="ts">
	import { CalendarIcon, CircleUserIcon, MenuIcon, SearchIcon } from '@lucide/svelte';
	import { AppBar } from '@skeletonlabs/skeleton-svelte';
</script>

<AppBar>
	<!-- 1. Set dynamic layout columns -->
	<AppBar.Toolbar class="grid-cols-[auto_1fr_auto] md:grid-cols-[auto_auto]">
		<AppBar.Lead>
			<button type="button" class="btn-icon btn-icon-lg hover:preset-tonal"><MenuIcon /></button>
		</AppBar.Lead>

		<!-- 2. Set Mobile display -->
		<AppBar.Headline class="md:hidden">
			<p class="text-2xl">Headline</p>
		</AppBar.Headline>

		<AppBar.Trail>
			<button type="button" class="btn-icon hover:preset-tonal"><SearchIcon class="size-6" /></button>
			<button type="button" class="btn-icon hover:preset-tonal"><CalendarIcon class="size-6" /></button>
			<button type="button" class="btn-icon hover:preset-tonal"><CircleUserIcon class="size-6" /></button>
		</AppBar.Trail>
	</AppBar.Toolbar>

	<!-- 3 Set Desktop display -->
	<AppBar.Headline class="hidden md:block">
		<p class="text-2xl">Headline</p>
	</AppBar.Headline>
</AppBar>

```

--------------------------------

### Install Tailwind Forms Plugin (npm)

Source: https://skeleton.dev/llms-svelte.txt

Command to install the official Tailwind Forms plugin, which is a prerequisite for using Skeleton's form styling utilities.

```sh
npm install -D @tailwindcss/forms
```

--------------------------------

### Basic App Bar Layout with Skeleton UI

Source: https://skeleton.dev/llms-svelte.txt

Demonstrates a standard App Bar layout with a menu icon, page title, and action icons. This example utilizes Svelte and the Skeleton UI library, importing necessary icons from '@lucide/svelte'. The layout is defined using Tailwind CSS grid classes within AppBar.Toolbar.

```svelte
<script lang="ts">
	import { CalendarIcon, CircleUserIcon, MenuIcon, SearchIcon } from '@lucide/svelte';
	import { AppBar } from '@skeletonlabs/skeleton-svelte';
</script>

<AppBar>
	<AppBar.Toolbar class="grid-cols-[auto_1fr_auto]">
		<AppBar.Lead>
			<button type="button" class="btn-icon btn-icon-lg hover:preset-tonal"><MenuIcon /></button>
		</AppBar.Lead>
		<AppBar.Headline>
			<p class="text-2xl">Skeleton</p>
		</AppBar.Headline>
		<AppBar.Trail>
			<button type="button" class="btn-icon hover:preset-tonal"><SearchIcon class="size-6" /></button>
			<button type="button" class="btn-icon hover:preset-tonal"><CalendarIcon class="size-6" /></button>
			<button type="button" class="btn-icon hover:preset-tonal"><CircleUserIcon class="size-6" /></button>
		</AppBar.Trail>
	</AppBar.Toolbar>
</AppBar>

```

--------------------------------

### Display Direct Use, Presets, and Pairings of Contrast Colors

Source: https://skeleton.dev/llms-svelte.txt

This Astro component example showcases how to utilize Skeleton's contrast colors. It includes sections for 'Direct Use' (applying color and contrast shades directly), 'Presets' (using predefined color combinations), and 'Preset + Pairings' (combining presets with inverse contrast shades). This is useful for creating accessible text and icons across different themes and dark mode settings.

```astro
---
import { SwatchBookIcon } from 'lucide-react';
---

<section class="space-y-8">
	<div class="grid grid-cols-3 gap-6">
		<!-- Standard Colors -->
		<div class="flex flex-col space-y-2">
			<p class="text-xs">Direct Use</p>
			<div class="badge justify-start bg-primary-500 text-primary-contrast-500">
				<SwatchBookIcon className="size-4" />
				<span>Primary</span>
			</div>
			<div class="badge justify-start bg-secondary-500 text-secondary-contrast-500">
				<SwatchBookIcon className="size-4" />
				<span>Secondary</span>
			</div>
			<div class="badge justify-start bg-tertiary-500 text-tertiary-contrast-500">
				<SwatchBookIcon className="size-4" />
				<span>Tertiary</span>
			</div>
		</div>
		<!-- Presets -->
		<div class="flex flex-col space-y-2">
			<p class="text-xs">Presets</p>
			<div class="badge justify-start preset-filled-primary-950-50">
				<SwatchBookIcon className="size-4" />
				<span>Primary</span>
			</div>
			<div class="badge justify-start preset-filled-secondary-950-50">
				<SwatchBookIcon className="size-4" />
				<span>Secondary</span>
			</div>
			<div class="badge justify-start preset-filled-tertiary-950-50">
				<SwatchBookIcon className="size-4" />
				<span>Tertiary</span>
			</div>
		</div>
		<!-- Preset + Pairings -->
		<div class="flex flex-col space-y-2">
			<p class="text-xs">Preset + Pairings</p>
			<div class="badge justify-start preset-filled-primary-50-950">
				<SwatchBookIcon className="size-4" />
				<span>Primary</span>
			</div>
			<div class="badge justify-start preset-filled-secondary-50-950">
				<SwatchBookIcon className="size-4" />
				<span>Secondary</span>
			</div>
			<div class="badge justify-start preset-filled-tertiary-50-950">
				<SwatchBookIcon className="size-4" />
				<span>Tertiary</span>
			</div>
		</div>
	</div>
</section>

```

--------------------------------

### Basic Collapsible Component in Svelte

Source: https://skeleton.dev/llms-svelte.txt

A foundational example of the Collapsible component in Svelte. It requires importing the component and its sub-components like Trigger and Content. The example shows a collapsible section with a title and navigation links.

```svelte
<script lang="ts">
	import { ArrowUpDownIcon } from '@lucide/svelte';
	import { Collapsible } from '@skeletonlabs/skeleton-svelte';
</script>

<Collapsible class="items-start card preset-filled-surface-100-900 p-4 w-56 mx-auto">
	<div class="w-full flex justify-between items-center">
		<p class="font-bold">Design System</p>
		<Collapsible.Trigger class="btn-icon hover:preset-tonal">
			<ArrowUpDownIcon class="size-4" />
		</Collapsible.Trigger>
	</div>
	<Collapsible.Content class="flex flex-col gap-2">
		<nav class="contents">
			<a class="anchor" href="/docs/design/themes">Themes</a>
			<a class="anchor" href="/docs/design/colors">Colors</a>
			<a class="anchor" href="/docs/design/presets">Presets</a>
			<a class="anchor" href="/docs/design/typography">Typography</a>
			<a class="anchor" href="/docs/design/spacing">Spacing</a>
			<a class="anchor" href="/docs/design/iconography">Iconography</a>
		</nav>
	</Collapsible.Content>
</Collapsible>
```

--------------------------------

### Basic Steps Implementation in Svelte

Source: https://skeleton.dev/llms-svelte.txt

Demonstrates the fundamental usage of the Steps component. It requires the '@skeletonlabs/skeleton-svelte' library and defines an array of step objects, each with a title and content. The component then renders these steps, including navigation buttons.

```svelte
<script lang="ts">
	import { Steps } from '@skeletonlabs/skeleton-svelte';

	const steps = [
		{ title: 'First', content: 'First do this.' },
		{ title: 'Then', content: 'Then do that.' },
		{ title: 'Finally', content: 'Almost done...' },
	];
</script>

<Steps count={steps.length} class="w-full">
	<Steps.List>
		{#each steps as item, index}
			<Steps.Item {index}>
				<Steps.Trigger>
					<Steps.Indicator>{index + 1}</Steps.Indicator>
					{item.title}
				</Steps.Trigger>
				{#if index < steps.length - 1}
					<Steps.Separator />
				{/if}
			</Steps.Item>
		{/each}
	</Steps.List>
	{#each steps as item, index}
		<Steps.Content {index}>
			{item.content}
		</Steps.Content>
	{/each}
	<Steps.Content index={steps.length}>All done!</Steps.Content>
	<div class="flex justify-between items-center gap-2">
		<Steps.PrevTrigger class="btn preset-filled">Back</Steps.PrevTrigger>
		<Steps.NextTrigger class="btn preset-filled">Next</Steps.NextTrigger>
	</div>
</Steps>

```

--------------------------------

### Install Tailwind Forms Plugin using npm

Source: https://skeleton.dev/llms-react.txt

Command to install the `@tailwindcss/forms` package as a development dependency. This plugin is essential for normalizing form styling within a Tailwind CSS project.

```sh
npm install -D @tailwindcss/forms

```

--------------------------------

### Create a Drawer with Skeleton Dialog

Source: https://skeleton.dev/llms-svelte.txt

This example demonstrates repurposing the Skeleton UI Dialog component to function as a side-panel drawer. It imports necessary components from '@lucide/svelte' and '@skeletonlabs/skeleton-svelte'. Optional animations are defined for visual effects.

```svelte
<script lang="ts">
	import { XIcon } from '@lucide/svelte';
	import { Dialog, Portal } from '@skeletonlabs/skeleton-svelte';

	// The following animations are optional.
	// These may also be included inline.
	const animBackdrop = 'transition transition-discrete opacity-0 starting:data-[state=open]:opacity-0 data-[state=open]:opacity-100';
	const animModal =
		'transition transition-discrete opacity-0 -translate-x-full starting:data-[state=open]:opacity-0 starting:data-[state=open]:-translate-x-full data-[state=open]:opacity-100 data-[state=open]:translate-x-0';
</script>

<Dialog>
	<Dialog.Trigger class="btn preset-filled">Trigger</Dialog.Trigger>
	<Portal>
		<Dialog.Backdrop class="fixed inset-0 z-50 bg-surface-50-950/50 transition transition-discrete {animBackdrop}" />
		<Dialog.Positioner class="fixed inset-0 z-50 flex justify-start">
			<Dialog.Content class="h-screen card bg-surface-100-900 w-sm p-4 space-y-4 shadow-xl {animModal}">
				<header class="flex justify-between items-center">
					<Dialog.Title class="text-2xl font-bold">Drawer</Dialog.Title>
					<Dialog.CloseTrigger class="btn-icon preset-tonal">
						<XIcon />
					</Dialog.CloseTrigger>
				</header>
				<p>A slide out drawer panel.</p>
			</Dialog.Content>
		</Dialog.Positioner>
	</Portal>
</Dialog>

```

--------------------------------

### Installing and Importing Custom Fonts with NPM

Source: https://skeleton.dev/llms-react.txt

Shows the process of installing a custom font using npm and then importing it into your global stylesheet. This is a prerequisite for applying custom fonts via theme properties.

```bash
npm install @fontsource/open-sans
```

```css
@import '@fontsource/open-sans';
```