Skeleton Svelte

https://www.skeleton.dev/docs/svelte/
Admin
Skeleton is a UI component library and design system for Svelte, providing a collection of...
Tokens:142,229
Snippets:936
Trust Score:9.1
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install Tailwind and Vite plugin

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/vite-svelte

Install Tailwind CSS and the Tailwind Vite plugin.

```bash
npm install tailwindcss @tailwindcss/vite
```

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

### Install Skeleton packages

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/nextjs

Install the Skeleton core and React component packages as dev dependencies.

```bash
npm i -D @skeletonlabs/skeleton @skeletonlabs/skeleton-react
```

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

### Install Skeleton packages

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/vite-svelte

Install the Skeleton core and Svelte component packages as dev dependencies.

```bash
npm i -D @skeletonlabs/skeleton @skeletonlabs/skeleton-svelte
```

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

### Run the dev server

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/astro

Start the development server with this command.

```bash
npm run dev
```

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

### Changeset example

Source: https://www.skeleton.dev/docs/svelte/resources/contribute/get-started

Example changeset file for a minor version bump. The description appears verbatim in the CHANGELOG.md.

```markdown
---
'@skeletonlabs/skeleton-svelte': minor
---

feat: Added `Avatar` component.
```

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

### Install Shiki with npm

Source: https://www.skeleton.dev/docs/svelte/integrations/code-block

Install Shiki as a dev dependency using your preferred package manager.

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

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

### Color utility class examples

Source: https://www.skeleton.dev/docs/svelte/design/colors

Examples of using the color utility classes with different properties and colors.

```html
<div class="bg-primary-500">...</div>
<div class="border border-secondary-600">...</div>
<svg class="fill-surface-950">...</svg>
```

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

### Basic Toast Example

Source: https://www.skeleton.dev/docs/svelte/framework-components/toast

Basic example of using the Toast component with a button that triggers a toast message. The toaster is created locally and the Toast.Group is rendered in the same component.

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

	const toaster = createToaster();
</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>
```

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

### Install Skeleton React Package

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/astro

Package name for the Skeleton React framework package.

```bash
@skeletonlabs/skeleton-react
```

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

### Color Scheme Example

Source: https://www.skeleton.dev/docs/svelte/guides/mode

Demonstrates using scheme-light and scheme-dark classes to set color scheme at any scope.

```astro
<div class="w-full grid grid-cols-3 gap-4">
	<!-- Default -->
	<div>
		<label class="label">
			<span class="label-text">default</span>
			<input type="date" class="input" />
		</label>
	</div>

	<!-- Scheme Light -->
	<div class="scheme-light">
		<label class="label">
			<span class="label-text">scheme-light</span>
			<input type="date" class="input" />
		</label>
	</div>

	<!-- Scheme Dark -->
	<div class="scheme-dark">
		<label class="label">
			<span class="label-text">scheme-dark</span>
			<input type="date" class="input" />
		</label>
	</div>
</div>

```

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

### Branch naming examples

Source: https://www.skeleton.dev/docs/svelte/resources/contribute/get-started

Example branch names following the documented naming convention. Use kebab-case and keep names short and semantic.

```text
docs/get-started-typo
bugfix/accordion-render-issue
```

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

### Install Astro React Integration

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/astro

Command to add the React integration to an Astro project.

```bash
npx astro add react
```

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

### Install @floating-ui/dom

Source: https://www.skeleton.dev/docs/svelte/guides/cookbook/floating-ui-attachments

Install the standard Floating UI DOM package for use with Svelte attachments. This is the required first step before integrating Floating UI into a Svelte project.

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

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

### Field Group Example with Grid Columns and Presets

Source: https://www.skeleton.dev/docs/svelte/tailwind-components/forms

Use the `field-group` class to create a grid container for related box-shaped fields or buttons. This example shows four groups: a URL input with a label, an amount input with a currency select, a username input with a check button, and a search input with a submit button. The `grid-cols-[auto_1fr_auto]` utility configures the column layout, and presets like `preset-tonal` style the labels.

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

<form class="w-full space-y-8">
	<!-- Website -->
	<div class="field-group grid-cols-[auto_1fr_auto]">
		<label class="label label-text preset-tonal" for="url">https://</label>
		<input class="input" type="text" name="url" id="url" placeholder="www.example.com" />
	</div>

	<!-- Amount -->
	<div class="field-group grid-cols-[auto_1fr_auto]">
		<label class="label label-text preset-tonal-primary" for="amount" title="Money" aria-label="Money">
			<CircleDollarSignIcon size={16} />
		</label>
		<input class="input" type="text" name="amount" id="amount" placeholder="Amount" />
		<select class="select" name="currency" id="currency">
			<option>USD</option>
			<option>CAD</option>
			<option>EUR</option>
		</select>
	</div>

	<!-- Username -->
	<div class="field-group grid-cols-[auto_1fr_auto]">
		<label class="label label-text preset-tonal-secondary" for="username">Username</label>
		<input class="input" type="text" name="username" id="username" placeholder="Enter Username..." />
		<button class="btn preset-filled" title="Username already in use.">
			<CheckIcon size={16} />
		</button>
	</div>

	<!-- Search -->
	<!-- NOTE: Supports field and button sizes -->
	<div class="field-group grid-cols-[auto_1fr_auto]">
		<label class="label label-text preset-tonal-tertiary" for="search">
			<SearchIcon size={16} />
		</label>
		<input class="input field-xl" type="search" name="search" id="search" placeholder="Search..." />
		<button class="btn btn-xl preset-filled">Submit</button>
	</div>
</form>
```

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

### Install Astro Svelte Integration

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/astro

Command to add the Svelte integration to an Astro project.

```bash
npx astro add svelte
```

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

### Install Skeleton Svelte Package

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/astro

Package name for the Skeleton Svelte framework package.

```bash
@skeletonlabs/skeleton-svelte
```

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

### Filled Preset Examples (Astro)

Source: https://www.skeleton.dev/docs/svelte/tailwind-utilities/presets.md

Demonstrates the filled preset with neutral, brand, and color pairing classes. Includes examples for primary, secondary, tertiary, and success colors with various shade combinations.

```astro
<div class="w-full space-y-2">
	<div class="grid grid-cols-2 gap-2">
		{/* Neutral */}
		<div class="card p-2 text-center preset-filled">(neutral)</div>
		{/* Brand */}
		<div class="card p-2 text-center preset-filled-brand">Brand</div>
	</div>

	<hr class="hr" />

	{/* Color Pairings */}
	<div class="grid grid-cols1 md:grid-cols-3 2xl:grid-cols-7 gap-2">
		<div class="space-y-2">
			<div class="card p-2 text-center preset-filled-primary-950-50">950-50</div>
			<div class="card p-2 text-center preset-filled-primary-900-100">900-100</div>
			<div class="card p-2 text-center preset-filled-primary-800-200">800-200</div>
			<div class="card p-2 text-center preset-filled-primary-700-300">700-300</div>
			<div class="card p-2 text-center preset-filled-primary-600-400">600-400</div>
			<div class="card p-2 text-center preset-filled-primary-500">500</div>
			<div class="card p-2 text-center preset-filled-primary-400-600">400-600</div>
			<div class="card p-2 text-center preset-filled-primary-300-700">300-700</div>
			<div class="card p-2 text-center preset-filled-primary-200-800">200-800</div>
			<div class="card p-2 text-center preset-filled-primary-100-900">100-900</div>
			<div class="card p-2 text-center preset-filled-primary-50-950">50-950</div>
		</div>
		<div class="space-y-2">
			<div class="card p-2 text-center preset-filled-secondary-950-50">950-50</div>
			<div class="card p-2 text-center preset-filled-secondary-900-100">900-100</div>
			<div class="card p-2 text-center preset-filled-secondary-800-200">800-200</div>
			<div class="card p-2 text-center preset-filled-secondary-700-300">700-300</div>
			<div class="card p-2 text-center preset-filled-secondary-600-400">600-400</div>
			<div class="card p-2 text-center preset-filled-secondary-500">500</div>
			<div class="card p-2 text-center preset-filled-secondary-400-600">400-600</div>
			<div class="card p-2 text-center preset-filled-secondary-300-700">300-700</div>
			<div class="card p-2 text-center preset-filled-secondary-200-800">200-800</div>
			<div class="card p-2 text-center preset-filled-secondary-100-900">100-900</div>
			<div class="card p-2 text-center preset-filled-secondary-50-950">50-950</div>
		</div>
		<div class="space-y-2">
			<div class="card p-2 text-center preset-filled-tertiary-950-50">950-50</div>
			<div class="card p-2 text-center preset-filled-tertiary-900-100">900-100</div>
			<div class="card p-2 text-center preset-filled-tertiary-800-200">800-200</div>
			<div class="card p-2 text-center preset-filled-tertiary-700-300">700-300</div>
			<div class="card p-2 text-center preset-filled-tertiary-600-400">600-400</div>
			<div class="card p-2 text-center preset-filled-tertiary-500">500</div>
			<div class="card p-2 text-center preset-filled-tertiary-400-600">400-600</div>
			<div class="card p-2 text-center preset-filled-tertiary-300-700">300-700</div>
			<div class="card p-2 text-center preset-filled-tertiary-200-800">200-800</div>
			<div class="card p-2 text-center preset-filled-tertiary-100-900">100-900</div>
			<div class="card p-2 text-center preset-filled-tertiary-50-950">50-950</div>
		</div>
		<div class="space-y-2">
			<div class="card p-2 text-center preset-filled-success-950-50">950-50</div>
			<div class="card p-2 text-center preset-filled-success-900-100">900-100</div>
			<div class="card p-2 text-center preset-filled-success-800-200">800-200</div>
			<div class="card p-2 text-center preset-filled-success-700-300">700-300</div>
			<div class="card p-2 text-center preset-filled-success-600-400">600-400</div>
			<div class="card p-2 text-center preset-filled-success-500">500</div>
			<div class="card p-2 text-center preset-filled-success-400-600">400-600</div>
			<div class="card p-2 text-center preset-filled-success-300-700">300-700</div>
			<div class="card p-2 text-center preset-filled-success-200-800">200-800</div>
			<div class="card p-2 text-center preset-filled-success-100-900">100-900</div>
			<div class="card p-2 text-center preset-filled-success-50-950">50-950</div>
		</div>
	</div>
</div>
```

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

### Basic Tooltip with positioning

Source: https://www.skeleton.dev/docs/svelte/framework-components/tooltip

Basic headless Tooltip example with positioning set to 'top'. No default styles are applied, so you must style the content yourself.

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

<Tooltip positioning={{ placement: 'top' }}>
	<Tooltip.Trigger>Hover</Tooltip.Trigger>
	<Portal>
		<Tooltip.Positioner>
			<Tooltip.Content class="card p-2 preset-filled-surface-950-50">
				<span>Hello Skeleton</span>
				<Tooltip.Arrow class="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-950-50)]">
					<Tooltip.ArrowTip />
				</Tooltip.Arrow>
			</Tooltip.Content>
		</Tooltip.Positioner>
	</Portal>
</Tooltip>
```

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

### Contrast colors example

Source: https://www.skeleton.dev/docs/svelte/design/colors

An Astro component demonstrating direct use of contrast colors, presets, and preset pairings.

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

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

### Keyboard class

Source: https://www.skeleton.dev/docs/svelte/design/typography

Use the kbd class to style keyboard input elements. The example shows a copy shortcut and a full keyboard layout.

```astro
<div class="flex flex-col items-center gap-4">
	<div>Press <kbd class="kbd">⌘</kbd> + <kbd class="kbd">c</kbd> to copy.</div>

	<hr class="hr" />

	<div class="space-y-1">
		<div class="flex w-full justify-center gap-1">
			<kbd class="kbd">q</kbd>
			<kbd class="kbd">w</kbd>
			<kbd class="kbd">e</kbd>
			<kbd class="kbd">r</kbd>
			<kbd class="kbd">t</kbd>
			<kbd class="kbd">y</kbd>
			<kbd class="kbd">u</kbd>
			<kbd class="kbd">i</kbd>
			<kbd class="kbd">o</kbd>
			<kbd class="kbd">p</kbd>
		</div>
		<div class="flex w-full justify-center gap-1">
			<kbd class="kbd">a</kbd>
			<kbd class="kbd">s</kbd>
			<kbd class="kbd">d</kbd>
			<kbd class="kbd">f</kbd>
			<kbd class="kbd">g</kbd>
			<kbd class="kbd">h</kbd>
			<kbd class="kbd">j</kbd>
			<kbd class="kbd">k</kbd>
			<kbd class="kbd">l</kbd>
		</div>
		<div class="flex w-full justify-center gap-1">
			<kbd class="kbd">z</kbd>
			<kbd class="kbd">x</kbd>
			<kbd class="kbd">c</kbd>
			<kbd class="kbd">v</kbd>
			<kbd class="kbd">b</kbd>
			<kbd class="kbd">n</kbd>
			<kbd class="kbd">m</kbd>
		</div>
	</div>
</div>
```

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

### Align Collapsible Trigger and Content

Source: https://www.skeleton.dev/docs/svelte/framework-components/collapsible

Controls the position and alignment of the trigger and content using flexbox items-* classes. The example uses items-start to align content to the start.

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

<Collapsible class="items-start">
	<Collapsible.Trigger class="btn preset-filled">Toggle</Collapsible.Trigger>
	<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>
```

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

### DatePicker PresetTrigger Range Selection Example

Source: https://www.skeleton.dev/docs/svelte/framework-components/date-picker

Use this Svelte component to create a date range picker with preset quick-select buttons for the last 3, 7, or 30 days. The example sets selectionMode to 'range' and includes two inputs for start and end dates, along with the PresetTrigger buttons inside the day view. The code also renders month and year views for navigation, using the DatePicker's context to access the grid data.

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

<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>
						{#snippet children(datePicker)}
							<DatePicker.ViewControl>
								<DatePicker.PrevTrigger />
								<DatePicker.ViewTrigger>
									<DatePicker.RangeText />
								</DatePicker.ViewTrigger>
								<DatePicker.NextTrigger />
							</DatePicker.ViewControl>
							<div class="flex gap-2">
								<DatePicker.PresetTrigger value="last3Days">Last 3 Days</DatePicker.PresetTrigger>
								<DatePicker.PresetTrigger value="last7Days">Last 7 Days</DatePicker.PresetTrigger>
								<DatePicker.PresetTrigger value="last30Days">Last 30 Days</DatePicker.PresetTrigger>
							</div>
							<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.Content>
		</DatePicker.Positioner>
	</Portal>
</DatePicker>
```

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

### Run Development Server for Documentation, Themes, and Playgrounds

Source: https://www.skeleton.dev/docs/svelte/resources/contribute/components

Commands to run the development server for each documentation/playground website. Use `pnpm doc dev` for the Documentation site, `pnpm themes dev` for the Themes site, `pnpm react dev` for the React Playground, and `pnpm svelte dev` for the Svelte Playground.

```bash
pnpm doc dev

```

```bash
pnpm themes dev

```

```bash
pnpm react dev

```

```bash
pnpm svelte dev

```

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

### Starter layout for Astro component

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/astro

Replace the default content in /src/components/welcome.astro with this starter layout. It imports the global stylesheet, defines a framework variable, and renders a simple main element with a heading, paragraph, and button using Skeleton classes.

```astro
---
import '../styles/global.css';

const framework = 'Astro';
---

<main class="p-10 space-y-4">
	<h1 class="h1">Hello {framework}</h1>
	<p>This page is working.</p>
	<button type="button" class="btn preset-filled-primary-500">Example Button</button>
</main>
```

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

### DatePicker Range Selection with selectionMode="range"

Source: https://www.skeleton.dev/docs/svelte/framework-components/date-picker

Set selectionMode="range" on the root DatePicker component and pair two input fields with index={0} for start date and index={1} for end date. The example includes the full component structure with day and year views, using the Portal, Positioner, Content, and Context components.

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

<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>
						{#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="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().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.Content>
		</DatePicker.Positioner>
	</Portal>
</DatePicker>
```

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

### Basic AppBar Implementation

Source: https://www.skeleton.dev/docs/svelte/framework-components/app-bar

A standard AppBar layout using the grid-cols-[auto_1fr_auto] utility class to arrange lead, headline, and trail sections.

```svelte
<script lang="ts">
	import CalendarIcon from '@lucide/svelte/icons/calendar';
	import CircleUserIcon from '@lucide/svelte/icons/circle-user';
	import MenuIcon from '@lucide/svelte/icons/menu';
	import SearchIcon from '@lucide/svelte/icons/search';
	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>
```

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

### Color Pairing Usage Examples

Source: https://www.skeleton.dev/docs/svelte/design/colors

Example usage of color pairings with Tailwind utility classes bg, border, and fill.

```html
<div class="bg-surface-200-800">...</div>
<div class="border border-secondary-400-600">...</div>
<svg class="fill-secondary-50-950">...</svg>
```

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

### AppBar Anatomy Example

Source: https://www.skeleton.dev/docs/svelte/framework-components/app-bar

Shows the basic structure of the AppBar component with its subcomponents: Toolbar, Lead, Headline, and Trail. Import AppBar from '@skeletonlabs/skeleton-svelte' and use the dot notation to compose the layout.

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

<AppBar>
	<AppBar.Toolbar>
		<AppBar.Lead />
		<AppBar.Headline />
		<AppBar.Trail />
	</AppBar.Toolbar>
</AppBar>
```

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

### Install Skeleton core package

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/astro

Install the Skeleton core package as a dev dependency. This package provides the Tailwind plugin required for Skeleton.

```bash
npm i -D @skeletonlabs/skeleton
```

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

### Install and Configure @tailwindcss/forms

Source: https://www.skeleton.dev/docs/svelte/tailwind-components/forms

Install the @tailwindcss/forms plugin and add the @plugin directive to your global stylesheet. This plugin is required to use any form utility classes on this page.

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

```css
@import 'tailwindcss';
@plugin '@tailwindcss/forms';

/* ...Skeleton config here... */
```

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

### Tooltip Provider Pattern with useTooltip

Source: https://www.skeleton.dev/docs/svelte/get-started/fundamentals

Demonstrates the Provider Pattern for the Tooltip component, using `useTooltip` to create a tooltip instance and `Tooltip.Provider` to provide it. The `id` must be passed because `$props.id` is not available outside the component's `<script>` block.

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

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

<button type="button" onclick={() => tooltip().setOpen(!tooltip().open)}>Trigger</button>

<Tooltip.Provider value={tooltip}>
	<Tooltip.Trigger>Anchor</Tooltip.Trigger>
	<Portal>
		<Tooltip.Positioner>
			<Tooltip.Content>Content</Tooltip.Content>
		</Tooltip.Positioner>
	</Portal>
</Tooltip.Provider>
```

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

### Create a new Astro project with Tailwind

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/astro

Run this command to create a new Astro project with Tailwind CSS. The command uses the --add tailwind flag to include Tailwind during setup. After creation, navigate into the project directory.

```bash
npm create astro@latest --add tailwind my-skeleton-app
cd my-skeleton-app
```

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

### Disabled DatePicker Svelte Example

Source: https://www.skeleton.dev/docs/svelte/framework-components/date-picker

Use the `disabled` prop on the DatePicker component to prevent user interaction. The example includes the full DatePicker structure with day and year views, using Skeleton's DatePicker subcomponents and the Portal component.

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

<DatePicker disabled>
	<DatePicker.Label>Choose Date</DatePicker.Label>
	<DatePicker.Control>
		<DatePicker.Input placeholder="mm/dd/yyyy" />
		<DatePicker.Trigger />
	</DatePicker.Control>
	<Portal>
		<DatePicker.Positioner>
			<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="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, 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.Content>
		</DatePicker.Positioner>
	</Portal>
</DatePicker>
```

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

### List styles with Tailwind utilities

Source: https://www.skeleton.dev/docs/svelte/design/typography

Shows how to style ordered and unordered lists using Tailwind utility classes. Includes basic, unordered, ordered, description, and navigation list examples.

```astro
<div class="w-full space-y-4">
	<!-- Basic List -->
	<section class="space-y-4">
		<p class="text-lg font-bold">Basic List</p>
		<ul class="list-inside list-none space-y-2">
			<li>Skeleton is an adaptive design system powered by the Tailwind CSS framework.</li>
			<li>Compatible with Svelte, React, Astro, and many other popular frameworks.</li>
			<li>Theming is driven by CSS custom properties for quick color customization.</li>
		</ul>
	</section>

	<hr class="hr" />

	<!-- Unordered List -->
	<section class="space-y-4">
		<p class="text-lg font-bold">Unordered List</p>
		<ul class="list-inside list-disc space-y-2">
			<li>Skeleton is an adaptive design system powered by the Tailwind CSS framework.</li>
			<li>Compatible with Svelte, React, Astro, and many other popular frameworks.</li>
			<li>Theming is driven by CSS custom properties for quick color customization.</li>
		</ul>
	</section>

	<hr class="hr" />

	<!-- Ordered List -->
	<section class="space-y-4">
		<p class="text-lg font-bold">Ordered List</p>
		<ol class="list-inside list-decimal space-y-2">
			<li>Skeleton is an adaptive design system powered by the Tailwind CSS framework.</li>
			<li>Compatible with Svelte, React, Astro, and many other popular frameworks.</li>
			<li>Theming is driven by CSS custom properties for quick color customization.</li>
		</ol>
	</section>

	<hr class="hr" />

	<!-- Description List -->
	<section class="space-y-4">
		<p class="text-lg font-bold">Description List</p>
		<dl class="space-y-2">
			<div>
				<dt class="font-bold">Item A</dt>
				<dd class="opacity-60">Skeleton is an adaptive design system powered by the Tailwind CSS framework.</dd>
			</div>
			<div>
				<dt class="font-bold">Item B</dt>
				<dd class="opacity-60">Compatible with Svelte, React, Astro, and many other popular frameworks.</dd>
			</div>
			<div>
				<dt class="font-bold">Item C</dt>
				<dd class="opacity-60">Theming is driven by CSS custom properties for quick color customization.</dd>
			</div>
		</dl>
	</section>

	<hr class="hr" />

	<!-- Navigation List -->
	<nav class="space-y-2">
		<!-- Optional Heading -->
		<p class="text-lg font-bold">Navigation List</p>
		<!-- / -->
		<ul class="space-y-2">
			<li>
				<a class="anchor" href="#">Home</a>
			</li>
			<li>
				<a class="anchor" href="#">About</a>
			</li>
			<li>
				<a class="anchor" href="#">Blog</a>
			</li>
		</ul>
	</nav>
</div>

```

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

### Brand Color Example in Astro

Source: https://www.skeleton.dev/docs/svelte/design/colors

Example of using the brand color utility classes in an Astro component. It shows a card with brand color backgrounds for light and dark modes, and includes a contrast color for text. The Nouveau theme uses variable brand color for light and dark modes.

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

<div class="w-full grid grid-cols-[1fr_auto_auto_auto] items-stretch gap-4">
	<div class="card p-4 text-center bg-brand-light dark:bg-brand-dark text-brand-contrast-light dark:text-brand-contrast-dark">
		<div class="flex justify-center items-center gap-2">
			<SwatchBookIcon className="size-4" />
			<span>Brand Color</span>
		</div>
	</div>
	<span class="vr"></span>
	<div class="card p-4 text-center bg-brand-light text-brand-contrast-light">Light</div>
	<div class="card p-4 text-center bg-brand-dark text-brand-contrast-dark">Dark</div>
</div>
```

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

### Create a new Vite project

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/vite-react

Scaffold a new Vite project with React and TypeScript. Run the command, then follow the prompts to set the project name, select React as the framework, and TypeScript as the variant. After that, navigate into the project directory and install dependencies.

```bash
npm create vite@latest
	- Set your project named as desired
	- Set React as the framework
	- Set Typescript as the variant
cd {yourProjectName}
npm install
```

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

### Clickable Download with QrCode.DownloadTrigger

Source: https://www.skeleton.dev/docs/svelte/framework-components/qr-code

Wrap the QrCode.Frame and QrCode.Pattern in a QrCode.DownloadTrigger to make the QR code clickable and initiate a download. The fileName and mimeType attributes are set to 'skeleton-dev' and 'image/png' respectively.

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

<QrCode value="https://skeleton.dev">
	<QrCode.DownloadTrigger fileName="skeleton-dev" mimeType="image/png">
		<QrCode.Frame class="size-full max-size-36">
			<QrCode.Pattern />
		</QrCode.Frame>
	</QrCode.DownloadTrigger>
</QrCode>
```

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

### Configure Tailwind with Skeleton imports

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/astro

Create a global stylesheet at /src/styles/global.css and import Tailwind and Skeleton. The Skeleton import and the cerberus theme import are added with the [!code ++] markers.

```css
@import 'tailwindcss';

@import '@skeletonlabs/skeleton'; /* [!code ++] */
@import '@skeletonlabs/skeleton/themes/cerberus'; /* [!code ++] */
```

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

### Orientation: horizontal and vertical layouts

Source: https://www.skeleton.dev/docs/svelte/framework-components/toggle-group

Shows two ToggleGroup examples side by side: one with orientation="horizontal" and one with orientation="vertical" plus class="flex-col". Both use multiple selection and default to ['bold']. The vertical example requires the flex-col class to stack items vertically.

```svelte
<script lang="ts">
	import BoldIcon from '@lucide/svelte/icons/bold';
	import ItalicIcon from '@lucide/svelte/icons/italic';
	import UnderlineIcon from '@lucide/svelte/icons/underline';
	import { ToggleGroup } from '@skeletonlabs/skeleton-svelte';
</script>

<div class="flex flex-col items-center gap-4">
	<p>Horizontal</p>
	<ToggleGroup defaultValue={['bold']} multiple orientation="horizontal">
		<ToggleGroup.Item value="bold">
			<BoldIcon class="size-4" />
		</ToggleGroup.Item>
		<ToggleGroup.Item value="italic">
			<ItalicIcon class="size-4" />
		</ToggleGroup.Item>
		<ToggleGroup.Item value="underline">
			<UnderlineIcon class="size-4" />
		</ToggleGroup.Item>
	</ToggleGroup>

	<p>Vertical</p>
	<ToggleGroup defaultValue={['bold']} multiple orientation="vertical" class="flex-col">
		<ToggleGroup.Item value="bold">
			<BoldIcon class="size-4" />
		</ToggleGroup.Item>
		<ToggleGroup.Item value="italic">
			<ItalicIcon class="size-4" />
		</ToggleGroup.Item>
		<ToggleGroup.Item value="underline">
			<UnderlineIcon class="size-4" />
		</ToggleGroup.Item>
	</ToggleGroup>
</div>
```

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

### Basic QR Code with Frame, Overlay, and Download Trigger

Source: https://www.skeleton.dev/docs/svelte/framework-components/qr-code

Imports the QrCode component and renders a QR code with a frame, pattern, overlay, and a download button. The download trigger uses fileName="skeleton-dev" and mimeType="image/png".

```svelte
<script lang="ts">
	import favicon from '@/assets/favicon.png';
	import { QrCode } from '@skeletonlabs/skeleton-svelte';
</script>

<QrCode value="https://skeleton.dev">
	<QrCode.Frame class="size-full max-size-36">
		<QrCode.Pattern />
	</QrCode.Frame>
	<QrCode.Overlay class="bg-white rounded-full p-1">
		<img src={favicon.src} alt="Skeleton Logo" class="size-12" />
	</QrCode.Overlay>
	<QrCode.DownloadTrigger fileName="skeleton-dev" mimeType="image/png">Download</QrCode.DownloadTrigger>
</QrCode>
```

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

### Toast Component Anatomy

Source: https://www.skeleton.dev/docs/svelte/framework-components/toast

Code example showing the structure of the Toast component using Svelte snippets.

```APIDOC
## Toast Component Anatomy

### Description
Shows the basic structure of the Toast component in Svelte.

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

<Toast.Group>
	<Toast>
		<Toast.Message>
			<Toast.Title />
			<Toast.Description />
		</Toast.Message>
		<Toast.CloseTrigger />
	</Toast>
</Toast.Group>
```

```

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

### Provider Pattern: usePopover with show/hide

Source: https://www.skeleton.dev/docs/svelte/framework-components/popover

Use the Provider Pattern to access the popover API. This example creates a popover that opens on button click and closes after 3 seconds using usePopover and the setOpen method.

```svelte
<script>
	import { Popover, Portal, usePopover } from '@skeletonlabs/skeleton-svelte';

	const id = $props.id();
	const popover = usePopover({
		id: id,
		closeOnInteractOutside: false,
	});

	function showAndHide() {
		popover().setOpen(true);
		setTimeout(() => {
			popover().setOpen(false);
		}, 3000);
	}
</script>

<div class="flex flex-col gap-4">
	<button class="btn preset-filled" onclick={showAndHide}>Show for 3 seconds</button>

	<Popover.Provider value={popover}>
		<Popover.Trigger class="btn preset-tonal">Anchor</Popover.Trigger>
		<Portal>
			<Popover.Positioner>
				<Popover.Content class="card max-w-sm p-4 bg-surface-100-900 shadow-xl space-y-2">
					<Popover.Description>This popover will appear, stay open for three seconds, then close on it's own.</Popover.Description>
				</Popover.Content>
			</Popover.Positioner>
		</Portal>
	</Popover.Provider>
</div>
```
Tokens:
Raw