### Start Development Environment

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/plus.skeleton.dev/README.md

Starts the Docker container for the local database and OAuth server. This is the first step in the development setup.

```bash
pnpm env:start
```

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

### Bash Commands for Installation and Development

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/plus.skeleton.dev/src/lib/remote/tutorials/kitchen-sink.md

Common bash commands for installing dependencies and starting a development server using pnpm. Essential for project setup.

```bash
pnpm install
pnpm dev
```

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

### Default Button Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/tailwind-components/buttons.mdx

Shows a basic button implementation. Use this as a starting point for custom buttons.

```astro
import Default from '@/components/examples/tailwind-components/buttons/default.astro';
import DefaultRaw from '@/components/examples/tailwind-components/buttons/default.astro?raw';

<Preview files={{ 'app.astro': DefaultRaw }} client:visible>
	<Default />
</Preview>
```

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

### Install Skeleton UI

Source: https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton/README.md

Install the Skeleton UI library using pnpm.

```bash
pnpm add @skeletonlabs/skeleton
```

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

### Install Skeleton React

Source: https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton-react/README.md

Install the Skeleton React library using pnpm.

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

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

### Install Skeleton Common

Source: https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton-common/README.md

Install the @skeletonlabs/skeleton-common package using pnpm.

```bash
pnpm add @skeletonlabs/skeleton-common
```

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

### View Real World Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/guides/layouts.mdx

View a real-world three-column layout example implemented with Tailwind CSS.

```html
<figure class="linker bg-noise">
	<a class="btn preset-filled" href="https://play.tailwindcss.com/zP9RcoacIS" target="_blank">
		View Real World Example
	</a>
</figure>
```

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

### Default React Iconography

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/design/iconography.mdx

Demonstrates the default setup for using icons in a React project. Ensure you have the necessary Lucide React package installed.

```tsx
import DefaultReact from '@/components/examples/design/iconography/react/default';
import DefaultReactRaw from '@/components/examples/design/iconography/react/default?raw';

<Framework id="react">
	<Preview framework="react" files={{ 'app.tsx': DefaultReactRaw }} client:visible>
		<DefaultReact client:visible />
	</Preview>
</Framework>
```

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

### User Generated Preset Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/tailwind-utilities/presets.mdx

An example demonstrating the flexibility of creating custom presets by combining Skeleton and Tailwind utilities.

```astro
<div class="preset-user-generated">
  <p>User Generated Preset</p>
</div>
```

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

### Install Component Types

Source: https://github.com/skeletonlabs/skeleton/blob/main/packages/docs/README.md

Install the component types package using pnpm.

```bash
pnpm add @skeletonlabs/component-types
```

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

### Install Shiki

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/integrations/code-block.mdx

Install Shiki as a development dependency using npm.

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

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

### Install Dependencies with PNPM

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/resources/contribute/get-started.mdx

After forking and cloning the Skeleton monorepo, run this command from the root to install all necessary project dependencies.

```bash
pnpm i
```

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

### Install Skeleton React Package

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/get-started/installation/astro.mdx

Install the Skeleton UI package specifically for React projects.

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

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

### Install Skeleton Packages

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/get-started/installation/nextjs.mdx

Install the core Skeleton library and the React component package as development dependencies.

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

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

### Start Development Server

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/plus.skeleton.dev/README.md

Runs the main development server after the environment and database schema are set up.

```bash
pnpm dev
```

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

### Install Skeleton UI Packages

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/get-started/installation/sveltekit.mdx

Install the core Skeleton UI package and the Svelte component package as development dependencies.

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

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

### Default Preset Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/tailwind-utilities/presets.mdx

Demonstrates the default Skeleton preset for general use.

```astro
<div class="preset-default">
  <p>Default Preset</p>
</div>
```

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

### Default Chip Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/tailwind-components/chips.mdx

A basic example of a Tailwind CSS chip component.

```astro
import Default from '@/components/examples/tailwind-components/chips/default.astro';
import DefaultRaw from '@/components/examples/tailwind-components/chips/default.astro?raw';

<Preview files={{ 'app.astro': DefaultRaw }} client:visible>
	<Default />
</Preview>
```

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

### Start Next.js Development Server

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/get-started/installation/nextjs.mdx

Launch the development server for your Next.js application to view your changes.

```bash
npm run dev
```

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

### Install Bits UI Package

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/integrations/bits-ui.mdx

Install the Bits UI package using npm. This is the first step to integrating Bits UI components.

```bash
npm install bits-ui
```

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

### Input Preset Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/tailwind-utilities/presets.mdx

Demonstrates using presets to create custom validation classes for input fields.

```astro
<div class="preset-input">
  <label for="name">Name</label>
  <input type="text" name="name" id="name" placeholder="Enter your name">
</div>
```

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

### Default App Bar Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/app-bar.mdx

Displays a standard App Bar. Use this for a basic header.

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

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/get-started/installation/astro.mdx

Install the Skeleton UI package specifically for Svelte projects.

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

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

### Install Floating UI

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/guides/cookbook/floating-ui-attachments.mdx

Install the standard version of Floating UI using npm. This is the first step before integrating it into your Svelte project.

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

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

### Install Skeleton Svelte

Source: https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton-svelte/README.md

Use this command to add the Skeleton Svelte library to your project.

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

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

### Install Melt UI Package

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/integrations/melt-ui.mdx

Install the Melt UI package using npm. Ensure you have a SvelteKit project set up with Skeleton v3 and Tailwind v4.

```bash
npm install melt
```

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

### Install Radix UI Toggle Group

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/integrations/radix-ui.mdx

Install the Radix UI toggle group component package using npm.

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

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

### Complete Melt UI Accordion Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/integrations/melt-ui.mdx

A full Svelte component example demonstrating Melt UI's Accordion builder with multiple items, styles, and 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>
```

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

### Install Internationalized Date Package

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/integrations/bits-ui.mdx

Install the Adobe Internationalized Date package for date and time formatting assistance.

```bash
npm i -D @internationalized/date
```

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

### Default Mask Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/tailwind-utilities/masks.mdx

Demonstrates the default mask application. This snippet shows a basic usage of the mask utility.

```astro
import Default from '@/components/examples/tailwind-utilities/masks/default.svelte';

<Preview files={{ 'app.astro': DefaultRaw }} client:visible>
	<Default client:visible />
</Preview>
```

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

### Complete Bits UI Calendar Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/integrations/bits-ui.mdx

A full Svelte component example demonstrating the integration of the Bits UI Calendar component with custom styling and functionality. It includes date unavailability logic and binds the selected date.

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

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

### Add Astro Framework Packages

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/get-started/installation/astro.mdx

Install the Astro framework integration for Svelte. Ensure you have the correct Astro version installed.

```bash
npx astro add svelte
```

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

### Default Pagination Example (Svelte)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/pagination.mdx

Basic implementation of the Pagination component. Use this for standard client-side pagination.

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

<Pagination pages={5} />
```

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

### Glass Preset Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/tailwind-utilities/presets.mdx

Illustrates applying special effects like backdrop blur to presets for a glass-like appearance.

```astro
<div class="preset-glass">
  <p>Glass Preset</p>
</div>
```

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

### React Toggle Layout Navigation Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/navigation.mdx

Example demonstrating dynamic layout switching using reactive state for navigation components in React. Allows toggling between layouts via an icon.

```tsx
import { Skeleton } from '@skeletonlabs/skeleton';
import type { Custom } from 'svelte/types/runtime/transition';

export default function ToggleReact() {
	return (
		<div class="flex justify-center items-center h-full w-full">
			<Skeleton />
		</div>
	);
}
```

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

### Default Popover Example (React)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/popover.mdx

Demonstrates the default usage of the Popover component in React. This example shows a basic implementation without custom styling.

```tsx
import { Popover, PopoverTrigger, PopoverContent, Button } from '@skeletonlabs/skeleton';

function DefaultPopover() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>Open Popover</Button>
      </PopoverTrigger>
      <PopoverContent>
        <div class="p-4">Popover Content</div>
      </PopoverContent>
    </Popover>
  );
}

export default DefaultPopover;
```

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

### Default Popover Example (Svelte)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/popover.mdx

Demonstrates the default usage of the Popover component in Svelte. This example shows a basic implementation without custom styling.

```svelte
<script lang="ts">
  import { Popover, PopoverTrigger, PopoverContent, Button } from '@skeletonlabs/skeleton';
</script>

<Popover>
  <PopoverTrigger asChild>
    <Button>Open Popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    <div class="p-4">Popover Content</div>
  </PopoverContent>
</Popover>
```

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

### Add Astro Framework Packages

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/get-started/installation/astro.mdx

Install the Astro framework integration for React. Ensure you have the correct Astro version installed.

```bash
npx astro add react
```

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

### Install Skeleton CLI

Source: https://github.com/skeletonlabs/skeleton/blob/main/packages/cli/README.md

Use this command to add the Skeleton CLI to your project dependencies.

```bash
pnpm add skeleton
```

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

### Install Skeleton Core Package

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/get-started/installation/other.mdx

Use this command to install the Skeleton core package via npm. This provides access to most features, excluding components.

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

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

### Default App Bar Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/app-bar.mdx

Displays a standard App Bar. Use this for a basic header.

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

export default function Default() {
	return (
		<AppBar>
			<AppBar.Toolbar>
				<AppBar.Lead />
				<AppBar.Headline />
				<AppBar.Trail />
			</AppBar.Toolbar>
		</AppBar>
	);
}
```

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

### React Navigation Bar Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/navigation.mdx

Example of a default navigation bar component for React. Recommended for small screens and vertical layouts.

```tsx
import { Skeleton } from '@skeletonlabs/skeleton';
import type { Custom } from 'svelte/types/runtime/transition';

export default function DefaultReact() {
	return (
		<div class="flex justify-center items-center h-full w-full">
			<Skeleton />
		</div>
	);
}
```

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

### Svelte Navigation Bar Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/navigation.mdx

Example of a default navigation bar component for Svelte. Recommended for small screens and vertical layouts.

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

<div class="flex justify-center items-center h-full w-full">
	<Skeleton />
</div>
```

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

### Default Dialog Example (Svelte)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/tailwind-components/dialogs.mdx

Demonstrates a basic dialog component in Svelte. Use this for standard modal interactions.

```svelte
<script lang="ts">
  import { Dialog, DialogTitle, DialogDescription, DialogActions } from '@skeletonlabs/skeleton';
  let open: boolean = false;
</script>

<button on:click={() => (open = true)}>Open Dialog</button>

<Dialog bind:open>
  <svelte:fragment slot="dialog">
    <DialogTitle>Default Dialog</DialogTitle>
    <DialogDescription>This is the default dialog content.</DialogDescription>
    <DialogActions>
      <button class="btn variant-filled-secondary" on:click={() => (open = false)}>Cancel</button>
      <button class="btn variant-filled-primary">Confirm</button>
    </DialogActions>
  </svelte:fragment>
</Dialog>
```

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

### React Sidebar Navigation Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/navigation.mdx

Example of a sidebar navigation component for React. Recommended for large screens and horizontal layouts with deep navigation.

```tsx
import { Skeleton } from '@skeletonlabs/skeleton';
import type { Custom } from 'svelte/types/runtime/transition';

export default function SidebarReact() {
	return (
		<div class="flex justify-center items-center h-full w-full">
			<Skeleton />
		</div>
	);
}
```

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

### Navigation Tabs Example (React)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/tabs.mdx

Demonstrates using the `element` slot to integrate navigation tabs with `a` tags in React.

```jsx
import { Tabs } from '@skeletonlabs/skeleton';

let tabsData = [
	{
		label: 'Tab 1',
		content: 'Tab 1 Content',
		// Use 'element' to override the default button with an anchor tag
		element: 'a',
		// Add href for navigation
	href: '#tab1'
	},
	{
		label: 'Tab 2',
		content: 'Tab 2 Content',
		element: 'a',
	href: '#tab2'
	},
	{
		label: 'Tab 3',
		content: 'Tab 3 Content',
		element: 'a',
	href: '#tab3'
	}
];
```

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

### React Component Part File Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/resources/contribute/components.mdx

Example of a React component part file, exporting the component as default and its props as named exports. Includes `AvatarRootProps` interface.

```tsx
export interface AvatarRootProps {
	// ...
}

export default function Root(props: AvatarRootProps) {
	// ...
}
```

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

### Non-Modal Dialog Example (Svelte)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/tailwind-components/dialogs.mdx

Use `show()` instead of `showModal()` for non-modal dialogs that open without a backdrop or top-layer placement, similar to a tooltip. This example is in Svelte.

```svelte
<script lang="ts">
  import { Dialog, DialogTitle, DialogDescription, DialogActions } from '@skeletonlabs/skeleton';
  import { getDialog } from '@skeletonlabs/skeleton';
  let open: boolean = false;
  const dialog = getDialog();
</script>

<button on:click={() => dialog.show()}>Open Non-Modal</button>

<Dialog bind:open>
  <svelte:fragment slot="dialog">
    <DialogTitle>Non-Modal Dialog</DialogTitle>
    <DialogDescription>This dialog does not block interaction.</DialogDescription>
    <DialogActions>
      <button class="btn variant-filled-secondary" on:click={() => dialog.close()}>Cancel</button>
      <button class="btn variant-filled-primary">Confirm</button>
    </DialogActions>
  </svelte:fragment>
</Dialog>
```

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

### Default Tabs Example (Svelte)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/tabs.mdx

Demonstrates the default appearance and behavior of the Tabs component in Svelte.

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

	let tabsData = [
		{
			label: 'Tab 1',
			content: 'Tab 1 Content'
		},
		{
			label: 'Tab 2',
			content: 'Tab 2 Content'
		},
		{
			label: 'Tab 3',
			content: 'Tab 3 Content'
		}
	];
</script>

<Tabs regionGroup="tabs" {tabsData} />
```

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

### Navigation Tabs Example (Svelte)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/tabs.mdx

Demonstrates using the `element` slot to integrate navigation tabs with `a` tags in Svelte.

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

	let tabsData = [
		{
			label: 'Tab 1',
			content: 'Tab 1 Content',
			element: 'a',
		href: '#tab1'
		},
		{
			label: 'Tab 2',
			content: 'Tab 2 Content',
			element: 'a',
		href: '#tab2'
		},
		{
			label: 'Tab 3',
			content: 'Tab 3 Content',
			element: 'a',
		href: '#tab3'
		}
	];
</script>

<Tabs regionGroup="tabs" {tabsData} />
```

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

### Default Toast Example (React)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/toast.mdx

Displays a basic toast message. Use this for simple notifications.

```jsx
import { toast } from "skeleton-ui";

export default function App() {
  return (
    <button type="button" onClick={() => toast.info("Hello World!")}>
      Show Toast
    </button>
  );
}
```

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

### Default Carousel Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/carousel.mdx

Demonstrates the basic usage of the Carousel component with default settings.

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

<Carousel>
	<Carousel.Control>
		<Carousel.PrevTrigger />
		<Carousel.AutoplayTrigger />
		<Carousel.NextTrigger />
	</Carousel.Control>
	<Carousel.ItemGroup>
		<Carousel.Item />
	</Carousel.ItemGroup>
	<Carousel.IndicatorGroup>
		<Carousel.Indicator />
	</Carousel.IndicatorGroup>
	<Carousel.ProgressText />
</Carousel>
```

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

### Run Development Server

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/get-started/migrate-from-v2.mdx

Execute this command to start your application's local development server after completing migration steps.

```bash
npm run dev

```

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

### Default Carousel Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/carousel.mdx

Demonstrates the basic usage of the Carousel component with default settings.

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

export default function Anatomy() {
	return (
		<Carousel>
			<Carousel.Control>
				<Carousel.PrevTrigger />
				<Carousel.AutoplayTrigger />
				<Carousel.NextTrigger />
			</Carousel.Control>
			<Carousel.ItemGroup>
				<Carousel.Item />
			</Carousel.ItemGroup>
			<Carousel.IndicatorGroup>
				<Carousel.Indicator />
			</Carousel.IndicatorGroup>
			<Carousel.ProgressText />
		</Carousel>
	);
}
```

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

### React Page Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/integrations/code-block.mdx

Demonstrates using the React code block component within a Next.js page.

```typescript
import React from 'react';
import ReactPage from '@/components/examples/integrations/code-block/react/page';

const Page: React.FC = () => {
	return <ReactPage client:visible />;
};

export default Page;

```

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

### Svelte Component Part File Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/resources/contribute/components.mdx

Example of a Svelte component part file, exporting the component as default and its props as named exports. Includes `AvatarRootProps` interface and `$props()` usage.

```svelte
<script lang="ts" module>
	export interface AvatarRootProps {
		// ...
	}
</script>

<script lang="ts">
	const props: AvatarRootProps = $props();

	// ...
</script>

<!-- ... --->
```

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

### Melt UI Accordion Component Boilerplate

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/integrations/melt-ui.mdx

Create a Svelte component for the Melt UI Accordion. This example shows the basic structure and data setup for an unstyled Accordion.

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

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

	const items: Item[] = [
		{ id: "item-1", title: "What is it?", description: "..."},
		{ id: "item-2", title: "Can I customize it?", description: "..."},
	];

	const accordion = new Accordion();
</script>

<div {...accordion.root}>
	{#each items as i}
		{@const item = accordion.getItem(i)}
		<h2 {...item.heading}>
			<button {...item.trigger}>
				{item.item.title}
			</button>
		</h2>
		<div {...item.content}>
			{item.item.description}
		</div>
	{/each}
</div>
```

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

### Default Tabs Example (React)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/tabs.mdx

Demonstrates the default appearance and behavior of the Tabs component in React.

```jsx
import { Tabs } from '@skeletonlabs/skeleton';

let tabsData = [
	{
		label: 'Tab 1',
		content: 'Tab 1 Content'
	},
	{
		label: 'Tab 2',
		content: 'Tab 2 Content'
	},
	{
		label: 'Tab 3',
		content: 'Tab 3 Content'
	}
];
```

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

### Superscript Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/design/typography.mdx

Renders text in superscript, typically raised and reduced in size.

```astro
<Preview files={{ 'app.astro': SupRaw }} learnUrl="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup" client:visible>
	<Sup />
</Preview>
```

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

### Initially Open Disclosure Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/tailwind-components/disclosures.mdx

Illustrates how to make a disclosure component visible by default by adding the `open` attribute.

```astro
import Open from '@/components/examples/tailwind-components/disclosures/open.astro';
import OpenRaw from '@/components/examples/tailwind-components/disclosures/open.astro?raw';

<Preview files={{ 'app.astro': OpenRaw }} client:visible>
	<Open />
</Preview>
```

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

### Keyboard Input Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/design/typography.mdx

Represents textual user input from a keyboard, voice, or other input device.

```astro
<Preview files={{ 'app.astro': KeyboardRaw }} learnUrl="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd" client:visible>
	<Keyboard />
</Preview>
```

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

### Default Pagination Example (React)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/pagination.mdx

Basic implementation of the Pagination component. Use this for standard client-side pagination.

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

export default function Default() {
	return (
		<Pagination pages={5} />
	);
}
```

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

### Default Toast Example (Svelte)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/toast.mdx

Displays a basic toast message in Svelte. Use this for simple notifications.

```svelte
<script lang="ts">
  import { toast } from "skeleton-ui";
</script>

<button type="button" on:click={() => toast.info("Hello World!")}>
  Show Toast
</button>
```

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

### Stop Development Environment

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/plus.skeleton.dev/README.md

Shuts down the Docker container that was started with `pnpm env:start`.

```bash
pnpm env:stop
```

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

### Chip Presets Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/tailwind-components/chips.mdx

Shows how to use presets for Tailwind CSS chip components, referencing the presets utility documentation.

```astro
import Presets from '@/components/examples/tailwind-components/chips/presets.astro';
import PresetsRaw from '@/components/examples/tailwind-components/chips/presets.astro?raw';

<Preview files={{ 'app.astro': PresetsRaw }} client:visible>
	<Presets />
</Preview>
```

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

### Svelte Progress Linear Orientation Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/progress-linear.mdx

Demonstrates controlling the layout orientation of the Progress Linear component in Svelte.

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

<Progress value={50} orientation="horizontal" />
```

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

### Svelte Page Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/integrations/code-block.mdx

Demonstrates using the Svelte code block component within a SvelteKit page.

```svelte
<script lang="ts">
	import SveltePage from '@/components/examples/integrations/code-block/svelte/page.svelte';
</script>

<SveltePage client:visible />

```

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

### React Progress Linear Height Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/progress-linear.mdx

Demonstrates how to use different heights for the Progress Linear component in React.

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

export default function Height() {
	return (
		<Progress value={50} height="h-2" />
	);
}
```

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

### Gradient Preset Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/tailwind-utilities/presets.mdx

Shows how to leverage Tailwind's gradient utility classes within custom presets for visually appealing elements.

```astro
<div class="preset-gradient">
  <p>Gradient Preset</p>
</div>
```

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

### Default Dialog Example (React)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/tailwind-components/dialogs.mdx

Demonstrates a basic dialog component in React. Use this for standard modal interactions.

```tsx
import { useState } from 'react';

export default function DefaultDialog() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Dialog</button>
      <dialog className="modal" open={open} onClose={() => setOpen(false)}>
        <form method="dialog">
          <h3 className="h3">Default Dialog</h3>
          <p className="text-token">This is the default dialog content.</p>
          <div className="modal-actions grid-cols-2">
            <button onClick={() => setOpen(false)}>Cancel</button>
            <button type="submit">Confirm</button>
          </div>
        </form>
      </dialog>
    </>
  );
}
```

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

### React Progress Linear Orientation Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/progress-linear.mdx

Demonstrates controlling the layout orientation of the Progress Linear component in React.

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

export default function Orientation() {
	return (
		<Progress value={50} orientation="horizontal" />
	);
}
```

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

### Toast Group Setup (Svelte)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/toast.mdx

Implement a single instance of `<Toast.Group>` in your application's root scope. Requires a toaster instance.

```svelte
<script lang="ts">
	import { toaster } from '/some/path/toaster.ts';
	import { Toast } from '@skeletonlabs/skeleton-svelte';
	import type { Snippet } from 'svelte';

	interface Props {
		children?: Snippet;
	}

	const props: Props = $props();
</script>

{@render props.children?.()}

<Toast.Group {toaster}>
	{#snippet children(toast)}
		<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>
```

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

### Svelte Progress Linear Height Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/progress-linear.mdx

Demonstrates how to use different heights for the Progress Linear component in Svelte.

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

<Progress value={50} height="h-2" />
```

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

### Default Switch Example (Svelte)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/switch.mdx

A basic implementation of the Switch component in Svelte. This shows the default appearance and functionality.

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

<Switch>
	<Switch.Control>
		<Switch.Thumb />
	</Switch.Control>
	<Switch.Label />
	<Switch.HiddenInput />
</Switch>
```

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

### Run Automated Migration

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/get-started/migrate-from-v3.mdx

Initiate the migration process using the Skeleton CLI. This handles package and stylesheet updates.

```bash
npx skeleton@latest migrate skeleton-4
```

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

### Install Tailwind CSS

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/get-started/installation/vite-react.mdx

Install Tailwind CSS and its Vite plugin. Ensure the Tailwind plugin is added to vite.config.ts after React.

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

```typescript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite"; // [!code ++]

export default defineConfig({
	plugins: [
		tailwindcss(), // [!code ++]
		react() // <-- Must come after Tailwind
	],
});
```

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

### React Navigation Rail Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/navigation.mdx

Example of a navigation rail component for React. Recommended for medium screens and horizontal layouts.

```tsx
import { Skeleton } from '@skeletonlabs/skeleton';
import type { Custom } from 'svelte/types/runtime/transition';

export default function RailReact() {
	return (
		<div class="flex justify-center items-center h-full w-full">
			<Skeleton />
		</div>
	);
}
```

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

### Svelte Default Clipboard Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/guides/cookbook/clipboard.mdx

Demonstrates basic programmatic clipboard access in Svelte. Ensure the component is client-side rendered.

```svelte
<script lang="ts">
  import { onMount } from 'svelte';

  const write = async () => {
    await navigator.clipboard.writeText('Hello World!');
  };

  const read = async () => {
    const text = await navigator.clipboard.readText();
    console.log('Pasted content: ', text);
  };

  onMount(() => {
    const button = document.querySelector('button');
    button?.addEventListener('click', () => {
      write();
      read();
    });
  });
</script>

<button class="btn btn--variant-filled">
  Copy & Paste
</button>
```

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

### Install Custom Font with npm

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/design/themes.mdx

Install a font package, such as Open Sans, from Fontsource using npm. This is a prerequisite for using custom fonts in your project.

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

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

### Default Menu Example (React)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/menu.mdx

Demonstrates the basic usage of the Menu component in React. This snippet shows how to render a simple, functional menu.

```jsx
import {
	Menu,
	MenuTrigger,
	MenuItem,
	MenuHeading,
	MenuSeparator,
	MenuLabel
} from "@skeletonlabs/skeleton";

let open = false;

```

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

### Alert Dialog Example (Svelte)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/tailwind-components/dialogs.mdx

Use `role="alertdialog"` for dialogs that interrupt the user with a message requiring a response. This example is in Svelte.

```svelte
<script lang="ts">
  import { Dialog, DialogTitle, DialogDescription, DialogActions } from '@skeletonlabs/skeleton';
  let open: boolean = false;
</script>

<button on:click={() => (open = true)}>Show Alert</button>

<Dialog bind:open role="alertdialog">
  <svelte:fragment slot="dialog">
    <DialogTitle>Alert Dialog</DialogTitle>
    <DialogDescription>This is an alert dialog message.</DialogDescription>
    <DialogActions>
      <button class="btn variant-filled-primary" on:click={() => (open = false)}>Ok</button>
    </DialogActions>
  </svelte:fragment>
</Dialog>
```

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

### Alert Dialog Example (React)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/tailwind-components/dialogs.mdx

Use `role="alertdialog"` for dialogs that interrupt the user with a message requiring a response. This example is in React.

```tsx
import { useState } from 'react';

export default function AlertDialog() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Show Alert</button>
      <dialog className="modal" role="alertdialog" open={open} onClose={() => setOpen(false)}>
        <form method="dialog">
          <h3 className="h3">Alert Dialog</h3>
          <p className="text-token">This is an alert dialog message.</p>
          <div className="modal-actions grid-cols-1">
            <button type="submit" on:click={() => setOpen(false)}>Ok</button>
          </div>
        </form>
      </dialog>
    </>
  );
}
```

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

### Fluid Width Tabs Example (Svelte)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/tabs.mdx

Shows how to make tabs stretch to fill container width using flex utility classes in Svelte.

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

	let tabsData = [
		{
			label: 'Tab 1',
			content: 'Tab 1 Content'
		},
		{
			label: 'Tab 2',
			content: 'Tab 2 Content'
		},
		{
			label: 'Tab 3',
			content: 'Tab 3 Content'
		}
	];
</script>

<Tabs regionGroup="tabs" {tabsData} class="w-full flex" />
```

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

### Install Tailwind CSS and Vite Plugin

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/get-started/installation/vite-svelte.mdx

Install Tailwind CSS and its Vite plugin. Then, implement the plugin in your vite.config.ts file, ensuring it comes before the Svelte plugin.

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

```typescript
import { defineConfig } from "vite";
import svelte from "@vitejs/plugin-svelte";
import tailwindcss from "@tailwindcss/vite"; // [!code ++]

export default defineConfig({
	plugins: [
		tailwindcss(), // [!code ++]
		svelte() // <-- Must come after Tailwind
	],
});
```

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

### Create a New SvelteKit Project

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/get-started/installation/sveltekit.mdx

Use the Svelte CLI to generate a new SvelteKit project with TypeScript support. Navigate into the project directory afterwards.

```bash
npx sv create --types ts my-skeleton-app
cd my-skeleton-app
```

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

### Create Next.js Project

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/get-started/installation/nextjs.mdx

Scaffold a new Next.js project using npm. Navigate into the newly created directory.

```bash
npm create next-app@latest my-skeleton-app
cd my-skeleton-app
```

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

### Color Pairing Utility Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/design/colors.mdx

Illustrates the condensed syntax for dual-tone color values that swap between light and dark modes. Useful for elements requiring distinct appearances in different lighting conditions.

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

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

### Non-Modal Dialog Example (React)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/tailwind-components/dialogs.mdx

Use `show()` instead of `showModal()` for non-modal dialogs that open without a backdrop or top-layer placement, similar to a tooltip. This example is in React.

```tsx
import { useRef } from 'react';

export default function NonModalDialog() {
  const dialogRef = useRef<HTMLDialogElement>(null);

  return (
    <>
      <button onClick={() => dialogRef.current?.show()}>Open Non-Modal</button>
      <dialog className="modal" ref={dialogRef}>
        <form method="dialog">
          <h3 className="h3">Non-Modal Dialog</h3>
          <p className="text-token">This dialog does not block interaction.</p>
          <div className="modal-actions grid-cols-2">
            <button onClick={() => dialogRef.current?.close()}>Cancel</button>
            <button type="submit">Confirm</button>
          </div>
        </form>
      </dialog>
    </>
  );
}
```

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

### Default Menu Example (Svelte)

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/menu.mdx

Demonstrates the basic usage of the Menu component in Svelte. This snippet shows how to render a simple, functional menu.

```svelte
<script lang="ts">
	import {
		Menu,
		MenuTrigger,
		MenuItem,
		MenuHeading,
		MenuSeparator,
		MenuLabel
	} from "@skeletonlabs/skeleton";

	let open = false;
</script>

<Menu bind:open>
	<MenuTrigger>
		<button class="btn btn-filled">Menu</button>
	</MenuTrigger>
	<MenuItem href="/">
		<svelte:fragment slot="icon">🏠</svelte:fragment>
		Home
	</MenuItem>
	<MenuItem href="/about">
		<svelte:fragment slot="icon">👤</svelte:fragment>
		About
	</MenuItem>
	<MenuSeparator />
	<MenuLabel>Settings</MenuLabel>
	<MenuItem href="/settings/profile">
		<svelte:fragment slot="icon">⚙️</svelte:fragment>
		Profile
	</MenuItem>
	<MenuItem href="/settings/account">
		<svelte:fragment slot="icon">🔑</svelte:fragment>
		Account
	</MenuItem>
</Menu>

```

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

### Complete Radix ToggleGroup Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/integrations/radix-ui.mdx

A full example of the Radix ToggleGroup component integrated with Skeleton, including state management using useState for controlled component behavior.

```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 Icon Sizing Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/design/iconography.mdx

Demonstrates how to apply size utility classes to icons and related elements within an HTML structure. This approach aligns with Tailwind CSS conventions.

```html
<div class="flex items-center gap-4">
	<SomeIcon class="size-elem-{size}" />
	<div class="h-elem-{size}">...</div>
</div>
```

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

### Development Server Commands

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/resources/contribute/components.mdx

Commands to run development servers for different Skeleton projects. Use `pnpm` for package management.

```bash
pnpm doc dev
pnpm themes dev
pnpm react dev
pnpm svelte dev
```

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

### Quotation Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/design/typography.mdx

Represents a short inline quotation.

```astro
<Preview files={{ 'app.astro': QuoteRaw }} learnUrl="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q" client:visible>
	<Quote />
</Preview>
```

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

### Create Astro Project with Tailwind

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/get-started/installation/astro.mdx

Use this command to scaffold a new Astro project with Tailwind CSS pre-configured. Navigate into the new project directory afterward.

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

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

### Default Disclosure Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/tailwind-components/disclosures.mdx

Demonstrates the basic usage of a disclosure component.

```astro
import Default from '@/components/examples/tailwind-components/disclosures/default.astro';
import DefaultRaw from '@/components/examples/tailwind-components/disclosures/default.astro?raw';

<Preview files={{ 'app.astro': DefaultRaw }} client:visible>
	<Default />
</Preview>
```

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

### Time Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/design/typography.mdx

Represents a specific period in time or a machine-readable date.

```astro
<Preview files={{ 'app.astro': TimeRaw }} learnUrl="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time" client:visible>
	<Time />
</Preview>
```

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

### Run Skeleton v3 Migration

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/get-started/migrate-from-v2.mdx

Execute the Skeleton CLI to migrate your project for v3 changes. Ensure all pending changes are committed before proceeding.

```bash
npx skeleton@latest migrate skeleton-3
```

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

### Subscript Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/design/typography.mdx

Renders text in subscript, typically lowered and reduced in size.

```astro
<Preview files={{ 'app.astro': SubRaw }} learnUrl="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub" client:visible>
	<Sub />
</Preview>
```

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

### React Default Clipboard Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/guides/cookbook/clipboard.mdx

Demonstrates basic programmatic clipboard access in React. Ensure the component is client-side rendered.

```tsx
import { createEffect, onMount } from 'solid-js';

export default function DefaultReact(props) {
  let element;

  const write = async () => {
    await navigator.clipboard.writeText('Hello World!');
  };

  const read = async () => {
    const text = await navigator.clipboard.readText();
    console.log('Pasted content: ', text);
  };

  onMount(() => {
    element.addEventListener('click', () => {
      write();
      read();
    });
  });

  return (
    <button ref={element} class="btn btn--variant-filled">
      Copy & Paste
    </button>
  );
}
```

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

### Citation Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/design/typography.mdx

References the title of a creative work, such as a book, article, or film.

```astro
<Preview files={{ 'app.astro': CiteRaw }} learnUrl="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite" client:visible>
	<Cite />
</Preview>
```

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

### Blockquote Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/design/typography.mdx

Indicates an extended quotation set apart from surrounding content.

```astro
<Preview
	files={{ 'app.astro': BlockquotesRaw }}
	learnUrl="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"
	client:visible
>
	<Blockquotes />
</Preview>
```

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

### Abbreviation Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/design/typography.mdx

Represents an abbreviation or acronym, optionally paired with its full expansion.

```astro
<Preview files={{ 'app.astro': AbbrRaw }} learnUrl="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr" client:visible>
	<Abbr />
</Preview>
```

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

### Popover Usage Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/guides/cookbook/floating-ui-attachments.mdx

Demonstrates how to implement a basic popover using the custom Floating UI attachment in Svelte. Includes trigger and popover elements with necessary directives.

```svelte
<script lang="ts">
  import { Popover } from '@/lib/attachments/floating.svelte.ts';
  import { slide } from 'svelte/transition';

  const popover = new Popover();
</script>

<span class="relative inline-block">
  <button use:popover.reference={popover}>Open Popover</button>

  {#if popover.isOpen()}
    <div
      data-floating
      use:popover.floating={popover}
      class="card p-4 shadow-lg"
      transition:slide
    >
      Popover Content
    </div>
  {/if}
</span>

```

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

### Insert & Delete Text Example

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/design/typography.mdx

Marks text that has been added to or removed from a document.

```astro
<Preview files={{ 'app.astro': InsDelRaw }} learnUrl="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins" client:visible>
	<InsDel />
</Preview>
```

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

### React Portal Usage

Source: https://github.com/skeletonlabs/skeleton/blob/main/sites/skeleton.dev/src/content/docs/framework-components/portal.mdx

Demonstrates the basic usage of the Portal component in React. Import Portal and wrap your content within it.

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

export default function Anatomy() {
	return <Portal>{/* Content */}</Portal>;
}
```