### PNPM Workspace Configuration Example

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

An example snippet showing how to define a package catalog in a 'pnpm-workspace.yaml' file for managing shared dependency versions across a monorepo.

```yaml
catalog:
  # ...
  <package>: <version>
```

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

### Install Shiki Syntax Highlighter

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

Command to install Shiki, a syntax highlighter, as a development dependency in a Node.js project. This is the first step for integrating code highlighting.

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

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

### Starting Local Dev Server with PNPM

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

Illustrates how to start a local development server for a specific project within a PNPM monorepo. This command should be run from within the target project's directory.

```shell
pnpm dev
```

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

### HTML Skeleton Placeholder Examples

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

Provides examples of skeleton placeholders using plain HTML and CSS classes. These are designed to display a placeholder UI while actual content is loading, often with animation to indicate activity.

```html
<div class="w-full space-y-4">
	<div class="flex items-center justify-between">
		<div class="flex items-center justify-center space-x-4">
			<div class="placeholder-circle size-16 animate-pulse"></div>
			<div class="placeholder-circle size-14 animate-pulse"></div>
			<div class="placeholder-circle size-10 animate-pulse"></div>
		</div>
	</div>
	<div class="space-y-4">
		<div class="placeholder animate-pulse"></div>
		<div class="grid grid-cols-4 gap-4">
			<div class="placeholder animate-pulse"></div>
			<div class="placeholder animate-pulse"></div>
			<div class="placeholder animate-pulse"></div>
			<div class="placeholder animate-pulse"></div>
		</div>
		<div class="placeholder animate-pulse"></div>
		<div class="placeholder animate-pulse"></div>
	</div>
</div>

```

```html
<div class="placeholder animate-pulse">...</div>

```

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

### PNPM Monorepo Dependency Installation

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

Shows the command to install all project dependencies within a PNPM monorepo. This assumes PNPM is installed and configured for workspaces.

```shell
pnpm i
```

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

### Skeleton Switch List Example

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

Illustrates how to render multiple Skeleton Switch components within a list using Svelte's `#each` block. This example demonstrates iterating over labels and applying basic grid layout and separators.

```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>

```

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

### Start Specific Development Server Sub-commands

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

Starts a development server for a more limited set of packages or specific applications within the monorepo. This allows for targeted development and testing of individual parts like documentation, themes, or specific framework playgrounds (Svelte, React).

```shell
pnpm dev:{command}
```

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

### Astro Input Element Examples

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

A comprehensive example in Astro showcasing various form input types including date, file, range, progress, and color pickers. It demonstrates basic styling and structure for these elements within a form.

```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 -->
	<!-- TODO: convert to mini-component for reactive value -->
	<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>

```

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

### Start Development Server (Shell)

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

Initiates the development server for all packages and playgrounds in watch mode. Specific sub-commands are available to run dependencies for individual sites or playgrounds.

```shell
pnpm dev

```

```shell
pnpm dev:{command}

```

```shell
# Example sub-commands:
# pnpm dev:docs
# pnpm dev:themes
# pnpm dev:svelte
# pnpm dev:react
```

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

### HTML Example: Color Pairings (Tailwind)

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

Provides an HTML example demonstrating how color pairings can be applied using Tailwind CSS utilities, specifically leveraging the `dark:` variant for dark mode styles. This is a more compact alternative to the CSS `light-dark()` function.

```html
<div class="text-primary-300 dark:text-primary-700">...</div>
```

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

### Complete Melt UI Accordion Example with Skeleton and Svelte

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

A full Svelte component demonstrating the Melt UI Accordion, integrated with Skeleton UI and Tailwind CSS. Includes script setup for item data, Accordion builder instantiation, and template for rendering items with transitions.

```svelte
<script lang="ts">
	import { Accordion, type AccordionItem } from 'melt/builders';
	import { slide } from 'svelte/transition';

	type Item = AccordionItem<{
		title: string;
		description: string;
	}>;

	const items: Item[] = [
		{
			id: 'item-1',
			title: 'Bulbasaur',
			description: 'For some time after its birth, it uses the nutrients that are packed into the seed on its back in order to grow.',
		},
		{
			id: 'item-2',
			title: 'Charmander',
			description: 'The flame on its tail shows the strength of its life-force. If Charmander is weak, the flame also burns weakly.',
		},
		{
			id: 'item-3',
			title: 'Squirtle',
			description: 'After birth, its back swells and hardens into a shell. It sprays a potent foam from its mouth.',
		},
	];

	const accordion = new Accordion({ multiple: true });
</script>

<div {...accordion.root} class="card w-full max-w-xl overflow-hidden">
	{#each items as i, index}
		{@const item = accordion.getItem(i)}
		<h2 {...item.heading}>
			<button {...item.trigger} class="preset-filled-surface-200-800 hover:preset-filled-primary-500 w-full cursor-pointer p-4 text-left">
				{item.item.title}
			</button>
		</h2>
		{#if item.isExpanded}
			<div {...item.content} class="preset-filled-surface-100-900 cursor-pointer p-4" transition:slide={{ duration: 100 }}>
				{item.item.description}
			</div>
		{/if}
		{#if index < items.length - 1}<hr class="hr border-surface-50-950" />{/if}
	{/each}
</div>
```

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

### Skeleton CSS Custom Variant Example (CSS)

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

An example of defining a custom CSS variant (`skb`) for Skeleton components, targeting the base layer and slots for customization.

```css
@custom-variant skb {
	@layer base {
		@slot;
	}
}
```

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

### Install Floating UI

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

Installs the core Floating UI library using npm. This is a prerequisite for using Floating UI in your Svelte project for advanced attachment creation.

```console
npm install @floating-ui/dom
```

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

### Complete Radix ToggleGroup Component Example

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

A full React component example demonstrating the integration of Radix UI ToggleGroup within a SvelteKit application using Skeleton UI. It includes state management for the selected value and basic configuration.

```tsx
import * as RadixToggleGroup from '@radix-ui/react-toggle-group';
import { useState, type FC } from 'react';

interface ToggleGroupProps {
	/* ... */
}

export const ToggleGroup: FC<ToggleGroupProps> = () => {
	const [value, setValue] = useState('left');

	return (
		<RadixToggleGroup.Root
			className="btn-group preset-outlined-surface-200-800 flex-col p-2 md:flex-row"
			type="single"
			value={value}
			onValueChange={(value) => {
				if (value) setValue(value);
			}}
			aria-label="Text alignment"
		>
			<RadixToggleGroup.Item className="btn hover:preset-tonal data-[state=on]:preset-filled" value="left" aria-label="Left aligned">
				Left
			</RadixToggleGroup.Item>
			<RadixToggleGroup.Item className="btn hover:preset-tonal data-[state=on]:preset-filled" value="center" aria-label="Center aligned">
				Center
			</RadixToggleGroup.Item>
			<RadixToggleGroup.Item className="btn hover:preset-tonal data-[state=on]:preset-filled" value="right" aria-label="Right aligned">
				Right
			</RadixToggleGroup.Item>
		</RadixToggleGroup.Root>
	);
};
```

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

### HTML Skeleton Placeholders Example

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

Provides examples of HTML structure for creating skeleton loading placeholders. These use simple `div` elements with specific classes and animate-pulse for visual feedback. This is purely for front-end display and does not involve any dynamic data fetching logic.

```html
<div class="w-full space-y-4">
	<div class="flex items-center justify-between">
		<div class="flex items-center justify-center space-x-4">
			<div class="placeholder-circle size-16 animate-pulse"></div>
			<div class="placeholder-circle size-14 animate-pulse"></div>
			<div class="placeholder-circle size-10 animate-pulse"></div>
		</div>
	</div>
	<div class="space-y-4">
		<div class="placeholder animate-pulse"></div>
		<div class="grid grid-cols-4 gap-4">
			<div class="placeholder animate-pulse"></div>
			<div class="placeholder animate-pulse"></div>
			<div class="placeholder animate-pulse"></div>
			<div class="placeholder animate-pulse"></div>
		</div>
		<div class="placeholder animate-pulse"></div>
		<div class="placeholder animate-pulse"></div>
	</div>
</div>
```

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

### Component File Structure (Example)

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

Demonstrates the standard directory and file naming convention for Skeleton components, showcasing the organization within the anatomy and modules folders.

```plaintext
avatar/
├── anatomy/
│   ├── fallback.{tsx|svelte}
│   ├── image.{tsx|svelte}
│   ├── root-context.{tsx|svelte}
│   ├── root-provider.{tsx|svelte}
│   └── root.{tsx|svelte}
├── modules/
│   ├── anatomy.ts
│   ├── provider(.svelte).ts
│   └── root-context.ts
└── index.ts
```

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

### Install Tailwind Forms Plugin

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

Provides instructions for installing the `@tailwindcss/forms` package using npm. This is a prerequisite for using Skeleton's form utility classes. The plugin normalizes form styling across different browsers.

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

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

### Navigation Bar Example in React (TypeScript)

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

A React component demonstrating the usage of the Skeleton Navigation Bar. This example is recommended for small screens and vertical layouts, supporting 3-5 navigation items.

```tsx
import { Navigation } from '@skeletonlabs/skeleton-react';
import { BookIcon } from 'lucide-react';
import { HouseIcon } from 'lucide-react';
import { PopcornIcon } from 'lucide-react';
import { TvIcon } from 'lucide-react';

export default function Default() {
	const links = [
		{ label: 'Home', href: '#', icon: HouseIcon },
		{ label: 'Books', href: '#', icon: BookIcon },
		{ label: 'Movies', href: '#', icon: PopcornIcon },
		{ label: 'Television', href: '#', icon: TvIcon },
	];
	let anchorBar = 'btn hover:preset-tonal flex-col items-center gap-1';

	return (
		<div className="w-[375px] h-[667px] grid grid-rows-[1fr_auto] border border-surface-200-800">
			<div className="flex justify-center items-center">
				<p>Contents</p>
			</div>
			<Navigation layout="bar">
				<Navigation.Menu className="grid grid-cols-4 gap-2">
					{links.map((link) => {
						const Icon = link.icon;
						return (
							<a key={link.label} href={link.href} className={anchorBar}>
								<Icon className="size-5" />
								<span className="text-xs">{link.label}</span>
							</a>
						);
					})}
				</Navigation.Menu>
			</Navigation>
		</div>
	);
}

```

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

### Server-Side Pagination Count Example

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

This example shows how to specify the total number of records for server-side pagination using the `count` property in Skeleton UI's Pagination component. This is crucial when the data source is truncated and doesn't return the full dataset.

```json
{
	"data": [...],
	"pagination": {
		"page": 1,
		"limit": 10,
		"count": 500,
	}
}
```

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

### Astro Form Elements (Kitchen Sink) Example

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

A comprehensive example in Astro showcasing various form input types including date, file, range, progress, and color pickers. This snippet demonstrates how to structure different input fields within a form, using standard HTML input types. Styling classes are applied for presentation.

```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 -->
	<!-- TODO: convert to mini-component for reactive value -->
	<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>
```

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

### Complete Melt UI Accordion Example with Skeleton and Svelte

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

A full Svelte component example demonstrating the integration of Melt UI's Accordion builder with Skeleton UI and Tailwind CSS for styling. Includes data structure, component instantiation, and dynamic rendering with transitions.

```svelte
<script lang="ts">
	import { Accordion, type AccordionItem } from 'melt/builders';
	import { slide } from 'svelte/transition';

	type Item = AccordionItem <{
		title: string;
		description: string;
	}>;

	const items: Item[] = [
		{
			id: 'item-1',
			title: 'Bulbasaur',
			description: 'For some time after its birth, it uses the nutrients that are packed into the seed on its back in order to grow.',
		},
		{
			id: 'item-2',
			title: 'Charmander',
			description: 'The flame on its tail shows the strength of its life-force. If Charmander is weak, the flame also burns weakly.',
		},
		{
			id: 'item-3',
			title: 'Squirtle',
			description: 'After birth, its back swells and hardens into a shell. It sprays a potent foam from its mouth.',
		},
	];

	const accordion = new Accordion({ multiple: true });
</script>

<div {...accordion.root} class="card w-full max-w-xl overflow-hidden">
	{#each items as i, index}
		{@const item = accordion.getItem(i)}
		<h2 {...item.heading}>
			<button {...item.trigger} class="preset-filled-surface-200-800 hover:preset-filled-primary-500 w-full cursor-pointer p-4 text-left">
				{item.item.title}
			</button>
		</h2>
		{#if item.isExpanded}
			<div {...item.content} class="preset-filled-surface-100-900 cursor-pointer p-4" transition:slide={{ duration: 100 }}>
				{item.item.description}
			</div>
		{/if}
		{#if index < items.length - 1}<hr class="hr border-surface-50-950" />{/if}
	{/each}
</div>
```

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

### Astro Input Groups with Lucide Icons Example

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

Demonstrates complex input group configurations in Astro, utilizing Lucide React icons. This example shows how to combine text prefixes, icon elements, input fields, select dropdowns, and buttons within a single input group structure. It requires `lucide-react` for icon components.

```astro
---
import { CheckIcon, CircleDollarSignIcon, SearchIcon } from 'lucide-react';
---

<form class="w-full space-y-8">
	<!-- Website -->
	<div class="input-group grid-cols-[auto_1fr_auto]">
		<div class="ig-cell preset-tonal">https://</div>
		<input class="ig-input" type="text" placeholder="www.example.com" />
	</div>
	<!-- Amount -->
	<div class="input-group grid-cols-[auto_1fr_auto]">
		<div class="ig-cell preset-tonal">
			<CircleDollarSignIcon size={16} />
		</div>
		<input class="ig-input" type="text" placeholder="Amount" />
		<select class="ig-select">
			<option>USD</option>
			<option>CAD</option>
			<option>EUR</option>
		</select>
	</div>
	<!-- Username -->
	<div class="input-group grid-cols-[1fr_auto]">
		<input class="ig-input" type="text" placeholder="Enter Username..." />
		<button class="ig-btn preset-filled" title="Username already in use.">
			<CheckIcon size={16} />
		</button>
	</div>
	<!-- Search -->
	<div class="input-group grid-cols-[auto_1fr_auto]">
		<div class="ig-cell preset-tonal">
			<SearchIcon size={16} />
		</div>
		<input class="ig-input" type="search" placeholder="Search..." />
		<button class="ig-btn preset-filled">Submit</button>
	</div>
</form>
```

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

### Astro Chip Component Examples

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

Illustrates the creation of interactive chip components using Astro, including variations with icons, text, and combined text with icons. It utilizes 'lucide-react' for icon integration.

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

<div class="flex items-center gap-4">
	<!-- A simple icon chip -->
	<button type="button" class="chip-icon preset-filled">
		<CheckIcon size={16} />
	</button>
	<!-- A standard chip -->
	<button type="button" class="chip preset-filled">Chip</button>
	<!-- A chip + icon -->
	<button type="button" class="chip preset-filled">
		<span>Chip</span>
		<CheckIcon size={16} />
	</button>
</div>
```

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

### Astro Button Example with Lucide React Icons

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

Provides examples of creating various button styles in Astro, including icon-only, standard text buttons, and buttons with both text and icons. It utilizes lucide-react for icons and Tailwind CSS classes for styling, with a preset-filled style applied.

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

<div class="flex items-center gap-4">
	<button type="button" class="btn-icon preset-filled" title="Go" aria-label="Go"><ArrowRightIcon size={18} /></button>
	<button type="button" class="btn preset-filled">Button</button>
	<button type="button" class="btn preset-filled">
		<span>Button</span>
		<ArrowRightIcon size={18} />
	</button>
</div>

```

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

### Astro Example: Filled Button Presets with Color Variations

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

This Astro code snippet demonstrates the usage of 'filled' presets for buttons. It shows how to apply different shades of primary colors for both light and dark modes, providing visual examples of the 'preset-filled-{color}-{lightModeShade}-{darkModeShade}' pattern.

```astro
<div class="w-full grid grid-cols-2 lg:grid-cols-4 gap-2">
	{/* Neutral */}
	<div class="preset-filled flex items-center justify-center p-4">(neutral)</div>
	{/* Colors */}
	<div class="preset-filled-primary-950-50 flex items-center justify-center p-4">950-50</div>
	<div class="preset-filled-primary-900-100 flex items-center justify-center p-4">900-100</div>
	<div class="preset-filled-primary-800-200 flex items-center justify-center p-4">800-200</div>
	<div class="preset-filled-primary-700-300 flex items-center justify-center p-4">700-300</div>
	<div class="preset-filled-primary-600-400 flex items-center justify-center p-4">600-400</div>
	<div class="preset-filled-primary-500 flex items-center justify-center p-4">500</div>
	<div class="preset-filled-primary-400-600 flex items-center justify-center p-4">400-600</div>
	<div class="preset-filled-primary-300-700 flex items-center justify-center p-4">300-700</div>
	<div class="preset-filled-primary-200-800 flex items-center justify-center p-4">200-800</div>
	<div class="preset-filled-primary-100-900 flex items-center justify-center p-4">100-900</div>
	<div class="preset-filled-primary-50-950 flex items-center justify-center p-4">50-950</div>
</div>

```

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

### Astro Example: Tonal Button Presets with Various Colors

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

This Astro code snippet illustrates the use of 'tonal' presets for buttons. It displays examples using different color categories such as primary, secondary, tertiary, success, warning, error, and surface, following the 'preset-tonal-{color}' convention.

```astro
<div class="w-full grid grid-cols-2 lg:grid-cols-4 gap-2">
	{/* Neutral */}
	<div class="preset-tonal flex items-center justify-center p-4">(neutral)</div>
	{/* Colors */}
	<div class="preset-tonal-primary flex items-center justify-center p-4">primary</div>
	<div class="preset-tonal-secondary flex items-center justify-center p-4">secondary</div>
	<div class="preset-tonal-tertiary flex items-center justify-center p-4">tertiary</div>
	<div class="preset-tonal-success flex items-center justify-center p-4">success</div>
	<div class="preset-tonal-warning flex items-center justify-center p-4">warning</div>
	<div class="preset-tonal-error flex items-center justify-center p-4">error</div>
	<div class="preset-tonal-surface flex items-center justify-center p-4">surface</div>
</div>

```

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

### Component Anatomy Example (HTML)

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

Illustrates the typical DOM structure for a component, exemplified by the Zag Avatar component. This structure serves as a blueprint for implementing component parts in Skeleton.

```html
<div>
	<img />
	<span>...</span>
</div>
```

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

### Astro Basic List

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

A basic list example in Astro with no specific list styling applied via Tailwind CSS classes, resulting in a plain list structure.

```astro
<ul class="list-inside list-none space-y-2">
	<li>Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</li>
	<li>Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</li>
	<li>Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</li>
</ul>
```

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

### Segmented Control with Icons in React

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

Shows how to use icons within the SegmentedControl items, enhancing visual representation. This example utilizes 'lucide-react' for icons. Ensure both '@skeletonlabs/skeleton-react' and 'lucide-react' are installed.

```tsx
import { SegmentedControl } from '@skeletonlabs/skeleton-react';
import { AlignStartVerticalIcon, AlignCenterVerticalIcon, AlignEndVerticalIcon } from 'lucide-react';

export default function Icons() {
	return (
		<SegmentedControl defaultValue="start">
			<SegmentedControl.Control>
				<SegmentedControl.Indicator />
				<SegmentedControl.Item value="start">
					<SegmentedControl.ItemText>
						<AlignStartVerticalIcon className="size-4" />
					</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
				<SegmentedControl.Item value="center">
					<SegmentedControl.ItemText>
						<AlignCenterVerticalIcon className="size-4" />
					</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
				<SegmentedControl.Item value="end">
					<SegmentedControl.ItemText>
						<AlignEndVerticalIcon className="size-4" />
					</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
			</SegmentedControl.Control>
		</SegmentedControl>
	);
}

```

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

### Create Component Preview with Source Code

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

Illustrates the use of the `Preview` component to display an example component and its corresponding source code. The `client:load` directive ensures client-side hydration. The `slot` props are used to inject the component preview and its raw code.

```astro
<Preview client:load>
	<Fragment slot="preview"><Default /></Fragment>
	<Fragment slot="code"><Code code={DefaultRaw} lang="html" /></Fragment>
</Preview>
```

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

### Responsive AppBar Example with SkeletonUI

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

This Svelte component demonstrates a responsive AppBar layout using SkeletonUI. It dynamically adjusts spacing and layout based on screen size (mobile vs. desktop) and includes navigation icons. Dependencies: '@lucide/svelte', '@skeletonlabs/skeleton-svelte'.

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

<!-- 1. Set dynamic spacing -->
<AppBar class="space-y-0 md:space-y-4">
	<!-- 2. 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>

		<!-- 3. 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>

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

```

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

### Provider Pattern: Tooltip Example (Svelte)

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

Demonstrates the Provider Pattern in Svelte using Skeleton's Tooltip components. It shows how to set up a tooltip with a provider, trigger, positioner, and content, and how to control its visibility programmatically.

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

	const id = $props.id();
	const tooltip = useTooltip({ id });
</script>

<!-- External trigger using the Zag.js `open` state and `setOpen()` method -->
<button type="button" onclick={() => tooltip().setOpen(!tooltip().open)}>Trigger</button>

<!-- Tooltip provider and reference value -->
<Tooltip.Provider value={tooltip}>
	<Tooltip.Trigger>Anchor</Tooltip.Trigger>
	<Portal>
		<Tooltip.Positioner>
			<Tooltip.Content>Content</Tooltip.Content>
		</Tooltip.Positioner>
	</Portal>
</Tooltip.Provider>
```

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

### Collapsible Component Example - React

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

A basic example of the Collapsible component, demonstrating how to use Collapsible.Trigger and Collapsible.Content to create an expandable and collapsible section. Requires the Collapsible component from '@skeletonlabs/skeleton-react'.

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

export default function Default() {
	return (
		<Collapsible>
			<Collapsible.Trigger className="btn preset-filled">Toggle</Collapsible.Trigger>
			<Collapsible.Content>
				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit pariatur error soluta voluptate, accusantium modi repudiandae omnis
				eligendi, suscipit repellat impedit architecto neque sequi mollitia autem dicta quae ipsum et?
			</Collapsible.Content>
		</Collapsible>
	);
}
```

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

### Astro Example: Contrast Colors

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

Demonstrates the usage of standard contrast color utility classes within an Astro component. It shows how to apply background and text colors using Skeleton's contrast color system.

```astro
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<!-- Standard Colors -->
	<div class="bg-primary-500 text-primary-contrast-500">
		<p class="text-center p-4">Standard Colors</p>
	</div>
	<!-- Color Pairings -->
	<div class="bg-secondary-200-800 text-secondary-contrast-200-800">
		<p class="text-center p-4">Color Pairings</p>
	</div>
</div>
```

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

### Astro Divider Component Example

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

Provides an example of implementing a horizontal divider using an `<hr>` tag with the 'hr' class in Astro. This is useful for visually separating content sections.

```astro
<div class="w-full space-y-4 text-center">
	<p>Above the divider.</p>

	<hr class="hr" />

	<p>Below the divider.</p>
</div>
```

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

### Default RatingGroup Example (React)

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

Demonstrates the basic implementation of the RatingGroup component. It requires importing RatingGroup from '@skeletonlabs/skeleton-react'. This example renders a 5-star rating system where users can select a full star.

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

export default function Default() {
	return (
		<RatingGroup count={5}>
			<RatingGroup.Control>
				<RatingGroup.Context>
					{(ratingGroup) => ratingGroup.items.map((index) => <RatingGroup.Item key={index} index={index} />)}
				</RatingGroup.Context>
			</RatingGroup.Control>
			<RatingGroup.HiddenInput />
		</RatingGroup>
	);
}

```

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

### Slider Component Usage Example - Skeleton React

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

Demonstrates how to use the Slider component from '@skeletonlabs/skeleton-react'. This example shows a basic slider with a default value, a label, a control with a track and thumb, and marker points.

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

export default function Default() {
	return (
		<Slider defaultValue={[50]}> 
			<Slider.Label>Label</Slider.Label>
			<Slider.Control>
				<Slider.Track>
					<Slider.Range />
				</Slider.Track>
				<Slider.Thumb index={0}>
					<Slider.HiddenInput />
				</Slider.Thumb>
			</Slider.Control>
			<Slider.MarkerGroup>
				<Slider.Marker value={25} />
				<Slider.Marker value={50} />
				<Slider.Marker value={75} />
			</Slider.MarkerGroup>
		</Slider>
	);
}
```

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

### Run Automated Skeleton Migration

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

Initiates an automated migration process to Skeleton v4 using the npx command. This command handles initial package and stylesheet updates.

```bash
npx skeleton migrate skeleton-4
```

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

### Run Local Commands (Shell)

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

Execute local instances of commands like 'format' and 'lint' using pnpm from the monorepo root. This ensures consistency across the project by drawing from the root package.json.

```shell
pnpm -w <command>
```

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

### Complete Radix ToggleGroup Example (TSX)

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

A full example of a functional Radix UI ToggleGroup component in React, including state management for the selected value and all necessary imports and props. It demonstrates basic configuration and styling.

```tsx
import * as RadixToggleGroup from '@radix-ui/react-toggle-group';
import { useState, type FC } from 'react';

interface ToggleGroupProps {
	/* ... */
}

export const ToggleGroup: FC<ToggleGroupProps> = () => {
	const [value, setValue] = useState('left');

	return (
		<RadixToggleGroup.Root
			className="btn-group preset-outlined-surface-200-800 flex-col p-2 md:flex-row"
			type="single"
			value={value}
			onValueChange={(value) => {
				if (value) setValue(value);
			}}
			aria-label="Text alignment">
			<RadixToggleGroup.Item className="btn hover:preset-tonal data-[state=on]:preset-filled" value="left" aria-label="Left aligned">
				Left
			</RadixToggleGroup.Item>
			<RadixToggleGroup.Item className="btn hover:preset-tonal data-[state=on]:preset-filled" value="center" aria-label="Center aligned">
				Center
			</RadixToggleGroup.Item>
			<RadixToggleGroup.Item className="btn hover:preset-tonal data-[state=on]:preset-filled" value="right" aria-label="Right aligned">
				Right
			</RadixToggleGroup.Item>
		</RadixToggleGroup.Root>
	);
};
```

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

### Astro Card Presets Example

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

Demonstrates the usage of predefined card styles using Astro components and Tailwind CSS classes. These presets apply consistent styling across different card variations.

```astro
<div class="w-full grid grid-cols-3 gap-4">
	<div class="card p-4 preset-filled-primary-500">Card</div>
	<div class="card p-4 preset-tonal-primary">Card</div>
	<div class="card p-4 preset-outlined-primary-500">Card</div>

	<div class="card p-4 preset-filled-secondary-500">Card</div>
	<div class="card p-4 preset-tonal-secondary">Card</div>
	<div class="card p-4 preset-outlined-secondary-500">Card</div>

	<div class="card p-4 preset-filled-tertiary-500">Card</div>
	<div class="card p-4 preset-tonal-tertiary">Card</div>
	<div class="card p-4 preset-outlined-tertiary-500">Card</div>

	<div class="card p-4 preset-filled-success-500">Card</div>
	<div class="card p-4 preset-tonal-success">Card</div>
	<div class="card p-4 preset-outlined-success-500">Card</div>

	<div class="card p-4 preset-filled-warning-500">Card</div>
	<div class="card p-4 preset-tonal-warning">Card</div>
	<div class="card p-4 preset-outlined-warning-500">Card</div>

	<div class="card p-4 preset-filled-error-500">Card</div>
	<div class="card p-4 preset-tonal-error">Card</div>
	<div class="card p-4 preset-outlined-error-500">Card</div>

	<div class="card p-4 preset-filled-surface-500">Card</div>
	<div class="card p-4 preset-tonal-surface">Card</div>
	<div class="card p-4 preset-outlined-surface-500">Card</div>
</div>
```

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

### Astro Checkbox Examples

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

Demonstrates how to create a list of checkboxes using Astro. Each checkbox is wrapped in a label for accessibility, allowing users to click the text to toggle the checkbox. It includes options for pre-checked states.

```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>

```

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

### Complete Calendar Component Example in Svelte

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

A comprehensive example of a Svelte Calendar component, integrating styling, date logic (disabling specific dates), and binding to a state variable. It includes header, grid, and day cell components.

```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>
```

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

### Import Component and Raw Code for Preview

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

Shows how to import a default component and its raw source code using Vite's `?raw` import. This is typically used in conjunction with a `Preview` component to display both the component's output and its source.

```ts
import Default from '@/components/examples/foo/default';
import DefaultRaw from '@/components/examples/foo/default?raw';
```

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

### Install Custom Fonts for Skeleton Themes

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

Install custom fonts using npm packages like Fontsource. Import the font in your global stylesheet and then set the `font-family` theme properties for headings and base text within the desired theme scope.

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

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

### Example Branch Naming Conventions

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

Demonstrates the recommended naming conventions for pull request branches in the Skeleton project. These conventions help categorize the purpose of the branch, such as documentation updates, new features, tasks, or bug fixes. It emphasizes using short, semantic names and snake_case.

```shell
docs/get-started-typo-fix
bugfix/accordion-render-issue
```

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

### RatingGroup with Half-Star Selection (React)

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

This example shows how to enable half-star selections in the RatingGroup component by using the 'allowHalf' prop. Users can select portions of a star, providing more granular rating options. It uses the same import and basic structure as the default example.

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

export default function Half() {
	return (
		<RatingGroup count={5} allowHalf>
			<RatingGroup.Control>
				<RatingGroup.Context>
					{(ratingGroup) => ratingGroup.items.map((index) => <RatingGroup.Item key={index} index={index} />)}
				</RatingGroup.Context>
			</RatingGroup.Control>
			<RatingGroup.HiddenInput />
		</RatingGroup>
	);
}

```