# Skeleton Documentation

## Get Started

# Introduction

Learn more about Skeleton and how it can serve you.

Skeleton provides a uniform design language and structured framework for controlling the look and feel of your product and user experience. It serves as an opinionated design system that aims to greatly reduce the amount of time spent managing design elements and patterns, allowing you to more quickly build and manage your frontend interfaces at scale.

## In a Nutshell

## Our Philosophy

## Additional Benefits

# Installation

Learn how to install and setup Skeleton for your project.

## Guides

## Mixing UI Libraries

Skeleton's design system is perfect for complementing headless component libraries, such as [Bits UI](/docs/\[framework]/integrations/bits-ui), [Melt UI](/docs/\[framework]/integrations/melt-ui), [Radix](/docs/\[framework]/integrations/radix-ui), and [Zag.js](https://zagjs.com/). As well as "Tailwind component" libraries such as the [Tailwind Plus](https://tailwindcss.com/plus). Supporting any component system that supports Tailwind, but very specifically allows you to insert or substitute Skeleton-provided utility classes.

### Unsupported Libraries

Unfortunately, Skeleton cannot integrate with [Flowbite React](https://flowbite-react.com/), [Flowbite Svelte](https://flowbite-svelte.com/), or [Daisy UI](https://daisyui.com/) at this time. Similar to Skeleton, these libraries make changes to Tailwind that directly overlaps with many of our core features, including class names and color values.

# Fundamentals

An introduction to the core concepts of Skeleton.

***

## Design System

### Figma UI Kit

A fully featured [Figma UI Kit](https://www.etesie.dev/figma) is available to designers, allowing them to quickly draft visual concept of your project.

### Core Features

The following features fall under the umbrella of our design system. Provided via the Skeleton core.

***

## Tailwind Components

Tailwind components that act as primitives for creating complex interfaces. Provided via the Skeleton core.

***

## Functional Components

Skeleton also offers optional component packages for select component frameworks. Each component automatically adapts to Skeleton's design system. While still allowing a high level of customization.

\| Framework | NPM Package                     | Description                     |
\| --------- | ------------------------------- | ------------------------------- |
\| React     | `@skeletonlabs/skeleton-react`  | Contains all React components.  |
\| Svelte    | `@skeletonlabs/skeleton-svelte` | Contains all Svelte components. |

### Powered by Zag.js

Skeleton's components are built on **Zag.js**, which provides a collection of framework-agnostic UI component patterns to manage logic and state. Zag is actively maintained by industry veterans, such as [Segun Adebayo](https://github.com/segunadebayo) - the creator and core maintainer for [Chakra UI](https://www.chakra-ui.com/), [Ark UI](https://ark-ui.com/), and [PandaCSS](https://panda-css.com/).

### Importing Components

You may import components per each Skeleton framework as follows.

```ts
import { Avatar } from '@skeletonlabs/skeleton-{react|svelte}';
```

This also includes access to the component prop types.

```ts
import type { AvatarRootProps, ... } from '@skeletonlabs/skeleton-{react|svelte}';
```

### Composed Pattern

Skeleton components are granular. This offers direct access to all children within the tree, similar to working with raw HTML. This allows passing in arbitrary props and attributes directly to the the template within. Including: `required`, `data-*`, `style`, `class`, and more.

```svelte
<Avatar>
	<Avatar.Image src="https://i.pravatar.cc/150?img=48" />
	<Avatar.Fallback>SK</Avatar.Fallback>
</Avatar>
```

### Styling Components

Skeleton components implement a universal convention for accepting CSS utility classes via the `class` attribute. Use this to pass any CSS utility class.

```svelte
<Avatar class="rounded-2xl">
	<Avatar.Image src="https://i.pravatar.cc/150?img=48" class="greyscale" />
	<Avatar.Fallback>SK</Avatar.Fallback>
</Avatar>
```

By default, all internal styles are auto-prefixed to ensure they are assigned to the `@base` layer in the Tailwind bundle. This ensures any classes you pass through the `class` attribute are automatically given precedence. No mental overhead, it just works.

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

### Extensible Markup

Skeleton components provide a mechanism for overwriting the internal HTML with custom markup. Use the `element` prop in React, and the `element` snippet in Svelte to obtain the internal `attributes`. Then spread these to your custom elements. Note that this is an optional and advanced feature aimed at power users, and show not be needed for normal usage.

**React:**

```tsx
export default function () {
	return (
		<Accordion>
			{/* ... */}
			<Accordion.Item value="item-1">
				<h3>
					<Accordion.ItemTrigger element={(attributes) => <button {...attributes}>My Own Button</button>} />
				</h3>
				<Accordion.ItemContent>Content for Item 1</Accordion.ItemContent>
			</Accordion.Item>
			{/* ... */}
		</Accordion>
	);
}
```

**Svelte:**

```svelte
<Accordion>
	<!-- ... -->
	<Accordion.Item value="item-1">
		<h3>
			<Accordion.ItemTrigger>
				{#snippet element({ attributes })}
					<button {...attributes}>My Own Button</button>
				{/snippet}
			</Accordion.ItemTrigger>
		</h3>
		<Accordion.ItemContent>Content for Item 1</Accordion.ItemContent>
	</Accordion.Item>
	<!-- ... -->
</Accordion>
```

### Custom Animations

However, using the extensible markup pattern, you may implement custom animations. While we showcase this below with [Svelte Transitions](https://svelte.dev/docs/svelte/transition), but you could also use framework agnostic solutions such as [Motion](https://motion.dev/), [Anime.js](https://animejs.com/), or [Animate.css](https://animate.style/).

```ts
import { slide } from 'svelte/transition';
```

```svelte
<Accordion>
	<!-- ... -->
	<Accordion.Item value="item-1">
		<h3>
			<Accordion.ItemTrigger>Item 1</Accordion.ItemTrigger>
		</h3>
		<Accordion.ItemContent>
			{#snippet element(attributes)}
				{#if !attributes.hidden}
					<div {...attributes} hidden={false} transition:slide>Content 1</div>
				{/if}
			{/snippet}
		</Accordion.ItemContent>
	</Accordion.Item>
	<!-- ... -->
</Accordion>
```

1. Implement the `element` snippet to gain access to the `attributes`.
2. Spread the `attributes` to the custom element, a `<div>` in this example.
3. Override the `hidden` attribute to `false` to prevent it from showing/hiding the element too soon.
4. Add the `transition:slide` and configure your preferred options.
5. Then implement the wrapping `#if` block that triggers transitions when `attribute.hidden` is toggled.

### Provider Pattern

Most Skeleton components also support the Provider Pattern. This utilizes a provider component that replaces the root and provides access to the inner component APIs. In practice, this allows direct access to Zag.js API features, such as programmatic control for overlay components, the ability to clear input components, and more.

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

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

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

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

### Learn More

For a comprehensive guide to how Skeleton implements components, refer to our [contribution guidelines](/docs/\[framework]/resources/contribute/components).

# Core API

Learn about the specific features Skeleton introduces to Tailwind.

The heart of Skeleton is our framework agnostic core package. This adapts and extends Tailwind to introduce our global styles, color system, typography, and more. This section details all available Skeleton-provided utility classes and theme properties.

## @base

Extends Tailwind's base layer with a set of opinionated global styles.

* Sets the root color scheme to match Dark Mode settings.
* Updates scrollbars to utilize theme colors.
* Updates global text selection to utilize theme colors.
* Defines the `<body>` background colors and base font styles.
* Implements global default styles for disabled states, such as buttons.

## @theme

Uses Tailwind's `@theme` to implement a variety of new properties and utility classes.

### Colors

Extends colors to include the [Skeleton color palette](/docs/\[framework]/design/colors).

\| Class                                 | Theme Property                       |
\| ------------------------------------- | ------------------------------------ |
\| `[property]-[color]-[shade]`          | color-\[color]-\[shade]          |
\| `[property]-[color]-contrast-[shade]` | color-\[color]-contrast-\[shade] |
\| `body-background-color`               | body-background-color          |
\| `body-background-color-dark`          | body-background-color-dark     |

### Color Pairings

Extends colors to implement [Color Pairing](/docs/\[framework]/design/colors#color-pairings), which balance colors between light and dark mode.

\| Class                                | Theme Property                      |
\| ------------------------------------ | ----------------------------------- |
\| `[property]-[color]-[shade]-[shade]` | color-\[color]-\[shade]-\[shade] |

### Spacing

Integrates Tailwind's [spacing property](https://tailwindcss.com/docs/functions-and-directives#spacing-function) to modify [dynamic scaling](/docs/\[framework]/design/spacing) for various utility classes.

\| Class     | Theme Property |
\| --------- | -------------- |
\| (various) | spacing  |

### Typography

Introduces a [typographic scale](https://designcode.io/typographic-scales) to all Tailwind [font sizes](https://tailwindcss.com/docs/font-size) using the following formula.

```plaintext
--text-{size}: calc({remSize} * var(--text-scaling));
--text-{size}--line-height: calc(calc(1 / {remSize}) * var(--text-scaling));
```

#### Base

Controls the style of the global page text.

\| Class                  | Theme Property             |
\| ---------------------- | -------------------------- |
\| `base-font-color`      | base-font-color      |
\| `base-font-color-dark` | base-font-color-dark |
\| `base-font-family`     | base-font-family     |
\| `base-font-size`       | base-font-size       |
\| `base-line-height`     | base-line-height     |
\| `base-font-weight`     | base-font-weight     |
\| `base-font-style`      | base-font-style      |
\| `base-letter-spacing`  | base-letter-spacing  |

#### Heading

Controls the style of the heading text.

\| Class                     | Theme Property                |
\| ------------------------- | ----------------------------- |
\| `heading-font-color`      | heading-font-color      |
\| `heading-font-color-dark` | heading-font-color-dark |
\| `heading-font-family`     | heading-font-family     |
\| `heading-font-size`       | heading-font-size       |
\| `heading-line-height`     | heading-line-height     |
\| `heading-font-weight`     | heading-font-weight     |
\| `heading-font-style`      | heading-font-style      |
\| `heading-letter-spacing`  | heading-letter-spacing  |

#### Anchor

Controls the style of anchor links.

\| Class                           | Theme Property                      |
\| ------------------------------- | ----------------------------------- |
\| `anchor-font-color`             | anchor-font-color             |
\| `anchor-font-color-dark`        | anchor-font-color-dark        |
\| `anchor-font-family`            | anchor-font-family            |
\| `anchor-font-size`              | anchor-font-size              |
\| `anchor-line-height`            | anchor-line-height            |
\| `anchor-font-weight`            | anchor-font-weight            |
\| `anchor-font-style`             | anchor-font-style             |
\| `anchor-letter-spacing`         | anchor-letter-spacing         |
\| `anchor-text-decoration`        | anchor-text-decoration        |
\| `anchor-text-decoration-active` | anchor-text-decoration-active |
\| `anchor-text-decoration-focus`  | anchor-text-decoration-focus  |
\| `anchor-text-decoration-hover`  | anchor-text-decoration-hover  |

### Radius

Extends Tailwind's radius properties with theme-specific sizes.

\| Class               | Theme Property         |
\| ------------------- | ---------------------- |
\| `rounded-base`      | radius-base      |
\| `rounded-container` | radius-container |

### Edges

Sets the default width for border, divide, and ring width to match the active theme properties.

\| Class    | Theme Property             |
\| -------- | -------------------------- |
\| `border` | default-border-width |
\| `ring`   | default-ring-width   |
\| `divide` | default-divide-width |

## @utility

### Tailwind Components

Allow you to style semantic HTML elements with utility classes.

## @variant

### Themes

Enables you to target and style elements for a particular theme.

```html
<div class="bg-green-500 theme-cerberus:bg-red-500">...</div>
<div class="bg-green-500 theme-mona:bg-red-500">...</div>
<div class="bg-green-500 theme-vox:bg-red-500">...</div>
```

## Optional

### Presets

Provides a canned set of styles for use with buttons, badges, cards, and more.

### Preset Themes

Provides a hand curated set of themes for Skeleton.

# Migrate from v2

Learn how to migrate from Skeleton v2 to the latest version.

Version 3 represents a major overhaul to Skeleton. This includes a ground up rewrite of quite literally every feature in the library. We have provided a migration CLI to help automate this process. However, some portions of this migration will still required manual intervention. This is not a trivial migration from prior versions, so please use caution when updating and ensure you follow this guide very carefully.

## Prerequisites

While Skeleton v3 introduces support for multiple frameworks, we’ve historically only supported SvelteKit. As such, this guide is only intended for users migrating from Skeleton v2 and SvelteKit. If you you are coming from another meta-framework, this will be outside the scope of this guide. However, this may still provide a valuable insight to the primary objectives for migration.

### Create a Migration Branch

We recommend you handle all migration changes on a dedicated feature branch. This ensures you can easily drop or revert changes if something goes wrong.

```bash
git checkout -b migration
```

### Prepare Your Skeleton App

Please make sure you have accounted for the following:

* Your app is running the latest release of Skeleton v2.x
* All critical dependencies have been updated (optional but recommended)
* Your app is in a functional state before you proceed

***

## Migrate Core Technologies

Skeleton is built on top of the following technologies. These must be migrated individually before proceeding with the Skeleton-specific migration. Note that Svelte and Tailwind provide dedicated CLIs to automate this process.

### Svelte v5

Migrate to the latest release of Svelte v5.

### SvelteKit v2

Migrate to the latest release of SvelteKit v2.

### Tailwind v4

Before migration to tailwind v4 using their upgrade guide some manual steps are required:

1. Remove the `skeleton` plugin from your `tailwind.config` file.
2. Rename your `app.postcss` or `app.pcss` to `app.css`.
3. Remove the `purgecss` (`vite-plugin-tailwind-purgecss`) vite plugin from your `vite.config` (if installed).

Migrate to the latest release of Tailwind v4.

> TIP: Having trouble running Tailwind's automated migration script due to `@apply`? Remove the classes temporarily, then follow [these steps](/docs/\[framework]/get-started/migrate-from-v2#replacing-apply) to adapt to native CSS custom properties and Tailwind's new utilities.

***

## Migrate to the Tailwind Vite Plugin

Use the following steps to migrate to from PostCSS to the Vite plugin:

1. Delete `postcss.config.mjs`
2. Run `npm uninstall postcss @tailwindcss/postcss`
3. Run `npm install @tailwindcss/vite`
4. Open your `vite.config` in the root of your project
5. Import the following at the top of the file: `import tailwindcss from '@tailwindcss/vite'`
6. Finally, add the Vite plugin ABOVE your specific framework plugin:

```ts
plugins: [
	tailwindcss(),
	sveltekit(), // or svelte()
];
```

***

## Automated Migration

We’ve provided a dedicated migration script as part of the Skeleton CLI to help automate much of this process.

> TIP: Please ensure you've committed all pending changes before proceeding.

```bash
npx skeleton migrate skeleton-3
```

What WILL be migrated...

* Update all required `package.json` dependencies
* Implement all required Skeleton imports in your global stylesheet `app.css`
* Modify `data-theme` in `app.html` if you’re using a Skeleton preset theme.
* Temporarily disable custom theme imports to allow for theme migration.
* Migrate all modified Skeleton utility classes (ex: `variant-*` to `preset-*`)
* Update all Skeleton imports throughout your entire project
* Renames all relevant Skeleton components
* Some Component imports will also be pruned as they are no longer supported. We’ll cover these features in detail below.

What will NOT be migrated...

* Component props will not be updated. Unfortunately there’s too many permutations.
* Most v2 Utility features will not be migrated (ex: popovers, code blocks, etc)

Make sure to consult your local Git Diff to compare what has been modified before progressing forward or committing these automated changes.

***

## Manual Migration

With automated migration complete, please follow the remaining manual migration steps.

### Migrate Themes

#### For Preset Themes

Your preset theme should be automatically migrated by the CLI, you're all set!

#### For Custom Themes

1. Use the [Import feature](https://themes.skeleton.dev/themes/import) provided by the new Theme Generator.
2. Drag and Drop your v2 theme into the file upload field.
3. Your theme will be automatically converted to the newest format.
4. Update and modify any theme settings in the live preview.
5. Make sure to set a valid theme name in the right-hand panel.
6. Tap the “Code” tab to preview your generated theme code.
7. Copy the theme code, then following our [custom theme instructions](/docs/\[framework]/design/themes#custom-themes).
8. Similar to preset themes, you will need to both register and set an active theme.

### Replace AppShell with Custom Layouts

Skeleton has sunset the ([troublesome](https://github.com/skeletonlabs/skeleton/issues/2383)) `<AppShell>` component in favor of user-defined custom layouts. We've provided a [Layouts](/docs/\[framework]/guides/layouts) guide for replicating common page structures using only semantic HTML and Tailwind - no Skeleton specific features needed!

### Migrating Components

> NOTE: if you're aiming to migrate to Skeleton v4, we recommend you skip this specific step and follow [the v4 migration guide instead](/docs/\[framework]/get-started/migrate-from-v3). Once complete, resume from the "Tailwind 4 Changes" section below, and continue through the remainder of this guide.

Components have undergone the biggest update in Skeleton v3. Given the sheer number of changes, we recommend you compare each component to it's equivalent v3 documentation. We’ve highlighted a few of the key changes below:

* Changes to adopt the new [Svelte 5 APIs](https://svelte.dev/docs/svelte/v5-migration-guide) like runes, snippets, event handlers, etc.
* Changes to support [Zag.js](https://zagjs.com/), which serves as a foundation of our cross-framework components.
* Changes to the import path: `@skeletonlabs/skeleton-svelte`.
* Changes to the component name and/or structure (including sub-components)
* Changes based on newly introduces features and properties.
* Changes to adopt the new [component fundamentals](/docs/\[framework]/get-started/fundamentals#functional-components).

Here's an example of changes for a single component from v2 to the new equivalent:

```svelte
<!-- Skeleton v2 -->

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

	let value = 15;
</script>

<RangeSlider name="amount" bind:value ticked />
```

```svelte
<!-- Skeleton v3 -->

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

	let value = $state([15]);
</script>

<Slider name="amount" {value} onValueChange={(e) => (value = e.value)} markers={[25, 50, 75]} />
```

We’ve recorded the most notable changes to each component in the table below:

\| Name               | v2                                                          | v3                                                                   | Notes                                                     |
\| ------------------ | ----------------------------------------------------------- | -------------------------------------------------------------------- | --------------------------------------------------------- |
\| `<AppRail>`        | [Link](https://v2.skeleton.dev/components/app-rail)         | [Link](https://v3.skeleton.dev/docs/components/navigation/svelte)    | Renamed `<Navigation>` - greatly expanded features        |
\| `<FileButton>`     | [Link](https://v2.skeleton.dev/components/file-buttons)     | [Link](https://v3.skeleton.dev/docs/components/file-upload/svelte)   | Renamed `<FileUpload>` - merges `<FileDropzone>` features |
\| `<FileDropzone>`   | [Link](https://v2.skeleton.dev/components/file-buttons)     | [Link](https://v3.skeleton.dev/docs/components/file-upload/svelte)   | Renamed `<FileUpload>` - merges `<FileButton>` features   |
\| `<InputChip>`      | [Link](https://v2.skeleton.dev/components/input-chips)      | [Link](https://v3.skeleton.dev/docs/components/tags-input/svelte)    | Renamed `<TagsInput>`                                     |
\| `<Paginator>`      | [Link](https://v2.skeleton.dev/components/paginators)       | [Link](https://v3.skeleton.dev/docs/components/pagination/svelte)    | Renamed `<Pagination>`                                    |
\| `<ProgressBar>`    | [Link](https://v2.skeleton.dev/components/progress-bars)    | [Link](https://v3.skeleton.dev/docs/components/progress/svelte)      | Renamed `<Progress>`                                      |
\| `<ProgressRadial>` | [Link](https://v2.skeleton.dev/components/progress-radials) | [Link](https://v3.skeleton.dev/docs/components/progress-ring/svelte) | Renamed `<ProgressRing>`                                  |
\| `<RadioGroup>`     | [Link](https://v2.skeleton.dev/components/radio-groups)     | [Link](https://v3.skeleton.dev/docs/components/segment/svelte)       | Renamed `<SegmentedControl>`                              |
\| `<RangeSlider>`    | [Link](https://v2.skeleton.dev/components/range-sliders)    | [Link](https://v3.skeleton.dev/docs/components/slider/svelte)        | Renamed `<Slider>`                                        |
\| `<Slider>`         | [Link](https://v2.skeleton.dev/components/slide-toggles)    | [Link](https://v3.skeleton.dev/docs/components/switch/svelte)        | Renamed `<Switch>`                                        |
\| `<TabGroup>`       | [Link](https://v2.skeleton.dev/components/tabs)             | [Link](https://v3.skeleton.dev/docs/components/tabs/svelte)          | Renamed `<Tabs>`                                          |

### Tailwind v4 Changes

Taliwind v4 represents a major update for Tailwind. We've detailed the most notable features as they may relate to your Skeleton project. Please consult the [Tailwind v4 announcement](https://tailwindcss.com/blog/tailwindcss-v4) post for the full roster of changes.

* The `tailwing.config` has been removed in favor of [CSS-base configuration](https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration) in your global stylesheet.
* Make sure you’re using the newest strategies for supporting [Dark Mode](/docs/\[framework]/guides/mode).
* You are still required to implement the [Tailwind Forms Plugin](/docs/\[framework]/tailwind-components/forms#prerequisites) to use Skeleton form elements.
* The Skeleton `data-theme` attribute has moved from `<body>` to `<html>`
* Themes colors are now stored in the [oklch format](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl), but optionally support any format.

### Replacing @apply

We strongly encourage you take this opportunity to move away from any usage of `@apply`. Tailwind has long since advocated against heavy use of this, and Tailwind v4 introduces new directives and functions that make this much easier to avoid. Here's a trivial example:

```css
/* Before */

.foo {
	@apply bg-surface-50-950 text-surface-950 dark:text-surface-50 p-4;
}
```

```css
/* After */

.foo {
	background-color: var(--color-surface-50-950);
	color: var(--color-surface-950);
	padding: --spacing(4);
	@variant dark {
		color: var(--color-surface-50);
	}
}
```

* Usage of `@apply` may be found in your global stylesheet or component `<style>` blocks.
* Refer to the Skeleton [Core API](/docs/\[framework]/get-started/core-api) documentation for a full list of Skeleton's CSS custom properties.
* Refer to the Tailwind's [functions and directives](https://tailwindcss.com/docs/functions-and-directives) for information on how to utilize these new features.

### Replace Unsupported Features

Skeleton v3 represents a point of reflection on what features should remain as part of the core experience. As such, we've identified a number of features that fall outside of this scope. Don't fret though, we've gone out of our way to detail each feature and provide the best alternative available.

#### Svelte Actions

\| Name       | v2                                                 | Alternative                                            | Notes                              |
\| ---------- | -------------------------------------------------- | ------------------------------------------------------ | ---------------------------------- |
\| Clipboard  | [Link](https://v2.skeleton.dev/actions/clipboard)  | [Link](/docs/\[framework]/guides/cookbook/clipboard)    | Provided via Cookbook guide        |
\| SVG Filter | [Link](https://v2.skeleton.dev/actions/filters)    | [Link](/docs/\[framework]/guides/cookbook/svg-filters)  | Provided via Cookbook guide        |
\| Focus Trap | [Link](https://v2.skeleton.dev/actions/focus-trap) | [Link](/docs/\[framework]/framework-components/popover) | Built-into v4+ overlay components. |

> TIP: We also recommend [Runed](https://runed.dev/docs) for a similar approach to small composable features for Svelte 5.

#### Components

\| Name              | v2                                                              | Alternative                                                                    | Notes                                    |
\| ----------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------- |
\| `<AppShell>`      | [Link](https://v2.skeleton.dev/components/app-shell)            | [Link](/docs/\[framework]/guides/layouts)                                       | Replaced with custom layouts             |
\| `<Autocomplete>`  | [Link](https://v2.skeleton.dev/components/autocomplete)         | [Link](/docs/\[framework]/framework-components/combobox)                        | Replaced with Combobox                   |
\| `<ConicGradient>` | [Link](https://v2.skeleton.dev/components/conic-gradients)      | [Link](https://tailwindcss.com/docs/background-image#adding-a-radial-gradient) | Now built into Tailwind                  |
\| `<Lightswitch>`   | [Link](https://v2.skeleton.dev/docs/dark-mode#custom-component) | [Link](/docs/\[framework]/guides/mode#lightswitch)                              | Removed in favor of custom components    |
\| `<Stepper>`       | [Link](https://v2.skeleton.dev/components/steppers)             | [Link](/docs/\[framework]/guides/cookbook/stepper)                              | Provided via Cookbook guide              |
\| `<Table>`         | [Link](https://v2.skeleton.dev/components/tables)               | [Link](/docs/\[framework]/tailwind-components/tables)                           | Removed in favor of a Tailwind component |

#### Utilities

\| Name              | v2                                                             | Alternative                                                 | Notes                          |
\| ----------------- | -------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------ |
\| Code Blocks       | [Link](https://v2.skeleton.dev/utilities/codeblocks)           | [Link](/docs/\[framework]/integrations/code-block)           | Provided via Integration guide |
\| Drawers           | [Link](https://v2.skeleton.dev/utilities/drawers)              | [Link](/docs/\[framework]/framework-components/dialog)       | Replace with new component     |
\| Modals            | [Link](https://v2.skeleton.dev/utilities/modals)               | [Link](/docs/\[framework]/framework-components/dialog)       | Replace with new component     |
\| Popups            | [Link](https://v2.skeleton.dev/utilities/popups)               | [Link](/docs/\[framework]/framework-components/popover)      | Replace with new component     |
\| Toasts            | [Link](https://v2.skeleton.dev/utilities/toasts)               | [Link](/docs/\[framework]/framework-components/toast)        | Replace with new component     |
\| Table of Contents | [Link](https://v2.skeleton.dev/utilities/table-of-contents)    | [Link](/docs/\[framework]/guides/cookbook/table-of-contents) | Provided via Cookbook guide    |
\| Persisted Store   | [Link](https://v2.skeleton.dev/utilities/local-storage-stores) | --                                                          | Incompatible with Svelte 5     |

### Migration Complete

If you’ve completed all steps above in full, your application should once again be in a function state. Run your application's local dev server to confirm, and remember to merge all changes into your primary branch.

```bash
npm run dev
```

***

## Troubleshooting

If you’re receiving errors, they may indicate components or features that require additional manual migration on your part. Use each error to identify the location of the feature and make any required changes. Consult each component’s documentation for the most current usage examples and API reference. In many cases this may just involve adding/removing/renaming a prop.

## Reporting Issues

If you get stuck or need to report an issue with either Skeleton v3 or this migration guide, please reach out via either the Skeleton [GitHub](https://github.com/skeletonlabs/skeleton/) or [Discord](https://discord.gg/EXqV7W8MtY) support channels.

# Migrate from v3

Learn how to migrate from Skeleton v3 to the latest version.

Skeleton v4 introduces a top-to-bottom overhaul of the component APIs. The goal has been to stabilized the internal and external APIs of our component system and ensure we can continue to introduce new components and new component frameworks over time. It also aims to make Skeleton's components as simple and intuitive to use as possible for new users.

## Prerequisites

We recommend you handle all migration changes on a dedicated feature branch. This ensures you can easily drop and revert if anything goes wrong.

```bash
git checkout -b migration
```

Make sure you've accounted for the following:

* Ensure both Skeleton packages (core and framework) are updated to the latest v3.x release.
* Update all critical dependencies in your app to their latest version (optional but recommended)
* Make sure your app has been tested and is in a functional state.

***

## Automated Migration

To begin, we will run a quick automated migration.

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

This will handle the package and stylesheet updates in the next couple steps. If you opt for the CLI, feel free to skip down to the [Manual Migration](/docs/\[framework]/get-started/migrate-from-v3#manual-migration) steps below. Note the manual steps are required for all migrations.

### Update NPM Packages

For the Release Candidate, please update each Skeleton package to the early access `@next` version. Note that we will be updating these package frequently leading up to the full release.

**React**

```bash
npm install @skeletonlabs/skeleton@latest @skeletonlabs/skeleton-react@latest
```

**Svelte**

```bash
npm install @skeletonlabs/skeleton@latest @skeletonlabs/skeleton-svelte@latest
```

### Update Stylesheet Imports

The following migration steps apply to your global stylesheet (ex: `app.css`).

The `@source` rules for sourcing component styles have been replaced with simpler and more intuitive `@import` rules.

```css
@source '../node_modules/@skeletonlabs/skeleton-{framework}/dist'; /* [!code --] */
@import '@skeletonlabs/skeleton-{framework}'; /* [!code ++] */
```

In Skeleton v3 the [Preset styles](/docs/\[framework]/design/presets) were split to an optional stylesheet to allow them to be opt-in. However, due to popular demand, these have now been combined back into the core package. If this optional import is present, please remove it:

```css
@import '@skeletonlabs/skeleton/optional/presets'; /* [!code --] */
```

***

## Manual Migration

Assuming all above steps have been completed in full, you will now be required to handle the manual portion of the migration. The steps below are not optional and must be completed to finalize your migration to Skeleton v4.

### Migrating Components

Below is an example of that process specifically tailored for the Avatar component.

**Was (v3)**

```svelte
<Avatar src="https://i.pravatar.cc/150?img=48" name="Jane Doe" />
```

**Now (v4 RC)**

```svelte
<Avatar>
	<Avatar.Image src="https://i.pravatar.cc/150?img=48" alt="Jane Doe" />
	<Avatar.Fallback>SK</Avatar.Fallback>
</Avatar>
```

1. Consult the documentation for the [Avatar component](/docs/\[framework]/framework-components/avatar)
2. Keep the import as is; no changes are required for this component.
3. The root component `<Avatar>` remains; remove the `src`, `alt`, and or `name` props.
4. Implement the new `<Avatar.Image>` child and pass the `src` path and `alt` text.
5. Initials are no longer generated via the `name`; instead specify a fallback with `<Avatar.Fallback>`

> TIP: To locate components, search your project by the v3 component name, such `<Avat...` for Avatar. We recommend commenting out each Skeleton component instance, then enabling them one-by-one as you migrate to the new format.

### Rename Components

As part of this update, select components have been renamed. We now aim to follow the [Zag.js](https://zagjs.com/) naming conventions.

\| Was (v3)            | Now (v4)                     | v4 Docs                                                          |
\| ------------------- | ---------------------------- | ---------------------------------------------------------------- |
\| `<Modal>`           | `<Dialog>`                   | [View](/docs/\[framework]/framework-components/dialog)            |
\| `<Navigation.Bar>`  | `<Navigation layout="bar">`  | [View](/docs/\[framework]/framework-components/navigation)        |
\| `<Navigation.Rail>` | `<Navigation layout="rail">` | [View](/docs/\[framework]/framework-components/navigation)        |
\| `<ProgressRing>`    | `<Progress>`                 | [View](/docs/\[framework]/framework-components/progress-circular) |
\| `<Ratings>`         | `<RatingGroup>`              | [View](/docs/\[framework]/framework-components/rating-group)      |
\| `<Segment>`         | `<SegmentedControl>`         | [View](/docs/\[framework]/framework-components/segmented-control) |
\| `<Toaster>`         | `<Toast.Group>`              | [View](/docs/\[framework]/framework-components/toast)             |

***

## Support and Feedback

If you have any questions or issues about the migration process, please contact us on Discord (the `#contributors` channel) or via [GitHub](https://github.com/skeletonlabs/skeleton/discussions). We are here to help!

## Guides

# Dark Mode

Learn how to use Tailwind's dark mode feature for your Skeleton project.

Skeleton makes use of Tailwind's Dark Mode to enable multiple strategies to control the overall app or page mode, as well as Color Scheme to selectively toggle light or dark interfaces at any scope.

## Dark Mode

Tailwind [multiple strategies](https://tailwindcss.com/docs/dark-mode) for configuring Dark Mode.

### Media Strategy

Enable by default. Uses CSS's [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) and sets the active mode based on operating system settings.

### Selector Strategy

Activates dark mode by adding or removing the `.dark` class to your application's `<html>` element.

```css
@custom-variant dark (&:where(.dark, .dark *));
```

```html
<html class="dark">
	<!-- ... -->
</html>
```

### Data Attribute Strategy

Uses a data attribute instead of a class to activate dark mode.

```css
@custom-variant dark (&:where([data-mode=dark], [data-mode=dark] *));
```

```html
<html data-mode="dark">
	<!-- ... -->
</html>
```

### Using the Dark Variant

Apply a base style, then with Tailwind's `dark:` variant.

```html
<!-- Light Mode: White | Dark Mode: Black -->
<div class="bg-white dark:bg-black">...</div>
```

***

## Color Scheme

Skeleton now supports Tailwind's [Color Scheme](https://tailwindcss.com/docs/color-scheme) feature, which enables toggling light or dark interfaces at any scope. By default, the scheme matches the current Dark Mode setting. This feature is enabled by [Color Pairings](/docs/\[framework]/design/colors#color-pairings), which implement the native CSS property [light-dark](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark).

```html
<div class="bg-primary-50-950">Light or Dark</div>

<div class="scheme-light">
	<div class="bg-primary-50-950">Always Light Scheme</div>
</div>

<div class="scheme-dark">
	<div class="bg-primary-50-950">Always Dark Scheme</div>
</div>
```

***

## Light Switch

Legacy versions of Skeleton offer a unique Light Switch component for controlling the Dark Mode `selector` strategy. Unfortunately this is no longer available due to the number of permutations required per framework and required feature capabilities, including:

* Supporting one or more combinations of Dark Mode strategies.
* Supporting the unique APIs of each meta-framework.
* Handling state and persistence; ex: local vs remote vs account-based storage

We now recommend you generate your own component following [Tailwind's best practices](https://tailwindcss.com/docs/dark-mode). To help you get started, we've provided a Cookbook recipe covering the basics.

# Layouts

Learn best practices for creating responsive layouts using semantic HTML and Tailwind.

Skeleton supports a variety of web-based frameworks and meta-frameworks, and this guide serves as a universal reference when implementing page layouts. These techniques utilize native HTML and Tailwind, meaning Skeleton is supported but not required. The only prerequisite is Tailwind itself.

## Real World Example

See our real world three column example, which implements many of the concepts introduced below.

## Semantic Markup

When creating custom layouts, it's recommended to use semantic HTML to denote each region of the page.

\| Element     | Description                                                                                                                                                                                                                                                                                                                                                                       | Source                                                                   |
\| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
\| `<header>`  | Represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.                                                                                                                                                                                 | [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header)  |
\| `<main>`    | Represents the dominant content within the document `<body>`. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.                                                                                                                                              | [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main)    |
\| `<footer>`  | Represents a footer for its nearest ancestor sectioning content or sectioning root element. Typically contains information about the author of the section, copyright data or links to related documents.                                                                                                                                                                         | [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer)  |
\| `<aside>`   | Represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.                                                                                                                                                                                                        | [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)   |
\| `<article>` | Represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. | [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) |

## Using Body Scroll

Prioritize the `<body>` element as the scrollable page element over child elements. Otherwise you risk the following pitfalls:

1. Mobile browser's "pull to refresh" feature will not work as expected.
2. The Mobile Safari's browser interface will not auto-hide when scrolling vertically.
3. CSS print styles may not work as expected.
4. Accessibility may be adversely affected, especially on touch screen devices.
5. May introduce inconsistent behavior between your app framework's layout solution.

## Tailwind Utilities

Tailwind provides several utility classes that may be helpful when generating custom layouts.

### Grid

Learn more about [CSS grid](https://css-tricks.com/snippets/css/complete-guide-grid/).

\| Utility                                                        | Description                                                                      |
\| -------------------------------------------------------------- | -------------------------------------------------------------------------------- |
\| [Columns](https://tailwindcss.com/docs/grid-template-columns)  | Utilities for specifying the columns in a grid layout.                           |
\| [Column Start/End](https://tailwindcss.com/docs/grid-column)   | Utilities for controlling how elements are sized and placed across grid columns. |
\| [Rows](https://tailwindcss.com/docs/grid-template-rows)        | Utilities for specifying the rows in a grid layout.                              |
\| [Row Start/End](https://tailwindcss.com/docs/grid-row)         | Utilities for controlling how elements are sized and placed across grid rows.    |
\| [Auto Flow](https://tailwindcss.com/docs/grid-auto-flow)       | Utilities for controlling how elements in a grid are auto-placed.                |
\| [Auto Columns](https://tailwindcss.com/docs/grid-auto-columns) | Utilities for controlling the size of implicitly-created grid columns.           |
\| [Auto Rows](https://tailwindcss.com/docs/grid-auto-rows)       | Utilities for controlling the size of implicitly-created grid rows.              |
\| [Gap](https://tailwindcss.com/docs/gap)                        | Utilities for controlling gutters between grid and flexbox items.                |

### Alignment

The following options are available for both [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) styles.

\| Utility                                                         | Description                                                                                                   |
\| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
\| [Justify Content](https://tailwindcss.com/docs/justify-content) | Utilities for controlling how flex and grid items are positioned along a container's main axis.               |
\| [Justify Items](https://tailwindcss.com/docs/justify-items)     | Utilities for controlling how grid items are aligned along their inline axis.                                 |
\| [Justify Self](https://tailwindcss.com/docs/justify-self)       | Utilities for controlling how an individual grid item is aligned along its inline axis.                       |
\| [Align Content](https://tailwindcss.com/docs/align-content)     | Utilities for controlling how rows are positioned in multi-row flex and grid containers.                      |
\| [Align Items](https://tailwindcss.com/docs/align-items)         | Utilities for controlling how flex and grid items are positioned along a container's cross axis.              |
\| [Align Self](https://tailwindcss.com/docs/align-self)           | Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis. |
\| [Place Content](https://tailwindcss.com/docs/place-content)     | Utilities for controlling how content is justified and aligned at the same time.                              |
\| [Place Items](https://tailwindcss.com/docs/place-items)         | Utilities for controlling how items are justified and aligned at the same time.                               |
\| [Place Self](https://tailwindcss.com/docs/place-self)           | Utilities for controlling how an individual item is justified and aligned at the same time.                   |

### Responsive Design

We recommend you utilize Tailwind's built-in [responsive breakpoints](https://tailwindcss.com/docs/responsive-design) for handling responsive design.

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

By default, your `<html>` and `<body>` may collapse vertically and not extend to full height of the viewport. Consider a reset:

```css
html,
body {
	@apply h-full;
}
```

## The Basics

Let's start by creating traditional layouts using a combination of semantic HTML and Tailwind utility classes.

### One Column

### Two Column

### Three Column

## Sticky Positioning

If you wish for your header or sidebar to remain fixed while scrolling, try the following techniques.

### Sticky Header

For `<header>`, we'll implement a few specific utility classes:

* [sticky](https://tailwindcss.com/docs/position#sticky-positioning-elements) - Sets the CSS display to a value of sticky.
* [top-0](https://tailwindcss.com/docs/top-right-bottom-left) - Sets the top offset to a value of 0px.
* [z-10](https://tailwindcss.com/docs/z-index) - Sets the z-index stacking to a value of 10.

> TIP: Use [backdrop-blur](https://tailwindcss.com/docs/backdrop-blur) to produce the hazy glass-like effect for overlapped semi-transparent elements.

### Sticky Sidebar

For `<aside>`, we introduce two addition utility classes:

* [col-span-1](https://tailwindcss.com/docs/grid-column) - we must define our columns explicitly to ensure all styles are display as expected.
* [h-screen](https://tailwindcss.com/docs/height#viewport-height) - ensures our sidebar matches the viewport height. See Calculate Offsets below for more complex layouts.

## Advanced Techniques

### Calculate Offsets

You may use the [calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) property to calculate numeric amounts, which can be handy when you have multiple sticky elements.

```html
<aside class="... sticky top-0 h-[calc(100vh-100px)]">(sidebar)</aside>
```

1. Sets the `height` value using an arbitrary syntax
2. The initial value is set to 100vh (100% of the viewport height)
3. Finally we subtract the offset for our header (ex: 100px)

### Smart Grid Rows

Combine the grid arbitrary syntax with [minmax](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax) to dynamically set a min and max range for your columns or rows. This is useful when creating a three column layout that need to adhere to a max container width.

```html
<div class="container mx-auto grid grid-cols-[200px_minmax(0px,_1fr)_300px]">
	<aside>(sidebar)</aside>
	<main>(main)</main>
	<aside>(sidebar)</aside>
</div>
```

### Grid Template

If you wish to go beyond Tailwind, native CSS also offers [grid-template](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template). This provides a declarative shorthand for defining grid columns, rows, and areas. Take care to match your [media query breakpoints](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) configured by Tailwind by default, or extended within your application's [Tailwind configuration](https://tailwindcss.com/docs/responsive-design).

# Cookbook

A collection of recipes for crafting interface features that utilize Skeleton primitives.

## What's This?

The following [recipes](https://bigmedium.com/ideas/the-art-of-design-system-recipes.html) can help you augment and expand the Skeleton design system and component library.

## Browse Recipes

## Design System

# Themes

The Skeleton theme system.

Skeleton themes utilize CSS custom properties to define core settings for your design system. Provided with a number of presets theme out of the box, as well as a powerful theme generator to create your own. Enable one or more and quickly switch on-demand.

## Preset Themes

Skeleton is provided with high quality set of hand curated themes. Tap the themes below to preview.

```css
/* @import '@skeletonlabs/skeleton'; */
@import '@skeletonlabs/skeleton/themes/{theme-name}';
```

> Make sure to replace `{theme-name}` with your desired theme names.

## Custom Themes

Use our powerful Theme Generator app to create your own themes.

1. Open the Theme Generator and customize to your preference.
2. Make sure to set a unique name for your theme.
3. Tap the "code" view from the menu at top-right corner.
4. Tap the "copy" button at the top of copy the theme contents.
5. Paste the contents into a new file at your project root, such as `my-theme-name.css` (any name is fine).

Follow the step below to register any number of custom themes. Take care to match each theme's file name.

## Register Themes

You may register any number of themes by adding addition theme imports to your global stylesheet. Please note that each theme will slightly increase the final CSS bundle size.

```css
/* @import '@skeletonlabs/skeleton'; */

/* Register Preset Themes */
@import '@skeletonlabs/skeleton/themes/cerberus';
@import '@skeletonlabs/skeleton/themes/mona';
@import '@skeletonlabs/skeleton/themes/vox';

/* Register a Custom Themes */
/* Make sure to resolve the relative path. */
/* Note the .css extension is optional. */
@import '../{my-theme-name}';
```

## Activate a Theme

You may define the active theme using the `data-theme` attribute on your `<html>` element.

```html
<html data-theme="cerberus">
	...
</html>
```

> TIP: If you wish to create a theme switcher, this is the value you should aim to modify.

***

## Customize and Extend

### Modify Properties

You can modify any [theme property](/docs/\[framework]/get-started/core-api) on demand using the following technique. Simply add this to your global stylesheet, following all Tailwind and Skeleton configuration. Use this to override preset theme properties.

```css
[data-theme='cerberus'] {
	--spacing: 0.22rem;
	--radius-container: 0.375rem;
	--heading-font-weight: bolder;
}
```

### Target Themes

If your application supports multiple themes, you may isolate selection using the `data-theme` attribute. Just make sure to account for light and dark mode color values.

```css title="app.css"
/** Target only Cerberus .h1 elements. */
[data-theme='cerberus'] .h1 {
	color: red;
	@variant dark {
		color: green;
	}
}
/** Target only Mona .h1 elements. */
[data-theme='mona'] .h1 {
	color: blue;
	@variant dark {
		color: yellow;
	}
}
```

### Backgrounds

Your app's light and dark mode background color values can be adjusted using the following [theme properties](/docs/\[framework]/get-started/core-api#colors).

```css
[data-theme='cerberus'] body {
	--body-background-color: pink;
	--body-background-color-dark: green;
}
```

Background images are supported, including CSS mesh gradients. The following example adheres to theme colors.

```css
[data-theme='cerberus'] body {
	background-image:
		radial-gradient(at 24% 25%, color-mix(in oklab, var(--color-primary-500) 30%, transparent) 0px, transparent 30%),
		radial-gradient(at 35% 13%, color-mix(in oklab, var(--color-success-500) 18%, transparent) 0px, transparent 30%),
		radial-gradient(at 100% 64%, color-mix(in oklab, var(--color-error-500) 3%, transparent) 0px, transparent 40%);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
```

We recommend Mesher for generating custom mesh gradients. This will generate colors using RGB, but can be migrated to utilize `var()` for colors and `color-mix()` for transparency, per the example above.

### Custom Fonts

Skeleton recommends the use of [Fontsource](https://fontsource.org/) for installing and managing custom fonts.

Install your font of choice.

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

Then import each font at the top of your global stylesheet, but below your Tailwind configuration.

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

Finally, use the following [theme properties](/docs/\[framework]/get-started/core-api#base-1) to set each respective font-family property. Note that for custom themes, these settings are can be defined directly within each respective theme file.

```css
[data-theme='cerberus'] {
	--heading-font-family: 'Open Sans', sans-serif;
	--base-font-family: 'Open Sans', sans-serif;
	--anchor-font-family: 'inherit';
}
```

## Core API

For more information, please refer to the full [Core API](/docs/\[framework]/get-started/core-api) documentation.

# Colors

The Skeleton color system.

## Color Palette

Supports  standard Tailwind color utility classes using the following pattern.

```txt
{property}-{color}-{shade}
```

\| Key      | Accepted Values                                                                                                  |
\| -------- | ---------------------------------------------------------------------------------------------------------------- |
\| Property | `accent`, `bg`, `border`, `caret`, `decoration`, `divide`, `fill`, `outline`, `ring`, `shadow`, `stroke`, `text` |
\| Color    | `primary`, `secondary`, `tertiary`, `success`, `warning`, `error`, `surface`                                     |
\| Shade    | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`, `950`                                       |

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

***

## Contrast Colors

Contrast color values are available for every shade. Use these to set accessible text color and icon fill values.

```txt
{property}-{color}-contrast-{shade}
```

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

```

See the [Preset system](/docs/\[framework]/design/presets) for additional utility classes that automatically mix each color and contrast tone.

***

## Color Pairings

Provides a condensed syntax of dual-tone color values balanced to swap between light and dark mode. These are supported for all the same properties standard colors support (`bg`, `border`, `fill`, etc).

```txt
{property}-{color}-{lightModeShade}-{darkModeShade}
```

For example:

* `bg-surface-200-800`
* `text-primary-400-600`
* `border-secondary-50-950`

### How Pairings Work

Color Pairing are enabled through the use of the CSS [light-dark](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) function. For example, the `text-primary-300-700` pairing will be implemented in your CSS bundle as follows:

```css
.text-primary-300-700 {
	color: light-dark(var(--color-primary-300), var(--color-primary-700));
}
```

This roughly equivalent to the following, just more compact, and enabling support for Tailwind's [Color Scheme](https://tailwindcss.com/docs/color-scheme) utilities.

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

By default, Skeleton sets the overall app's color scheme to match light or dark mode.

### Pairing Previews

The following is a static representation of each pairing. Only `primary` is shown, but all Skeleton colors are supported.

The following shows actual Color Pairings. Toggle this website between light and dark mode to see how these react.

### When to use Pairings

Color Parings are useful for generating a hierarchy of visual layers, ranging from foreground to background elements. Each reuse the same color ramp but, but inverts the order when toggling from light to dark mode.

* We can use shade `950` for light mode and `50` from dark mode to represent our body text color.
* Then use shade `50` from light mode and `950` from dark mode to represent our app background.
* Use the static `500` shade for key branding elements, such as buttons or banners.
* Then reserve multiple layers between for elements such as cards, inputs, and more.

***

## Transparency

Both Skeleton Colors and Color Pairings support Tailwind's color transparency syntax.

```html
<div class="bg-primary-500/25">Primary Color @ 25% transparency</div>
<div class="bg-surface-50-950/60">Surface Pairing 50/950 @ 60% transparency</div>
```

# Presets

Canned styles for your interface elements.

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

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

const presets = [
	{
		label: 'Filled',
		class: 'preset-filled-primary-500',
	},
	{
		label: 'Tonal',
		class: 'preset-tonal-primary',
	},
	{
		label: 'Outlined',
		class: 'preset-outlined-primary-500',
	},
	{
		label: 'Glass',
		class: 'preset-glass-primary',
	},
	{
		label: 'Elevated',
		class: 'preset-filled-surface-100-900 shadow-xl',
	},
	{
		label: 'Ghost',
		class: 'hover:preset-tonal',
	},
	{
		label: 'Ghost (Icon)',
		class: 'hover:preset-tonal-primary',
		icon: BookmarkIcon,
	},
	{
		label: 'Gradient',
		class: 'preset-gradient',
	},
];
---

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

<style>
	/* Create a custom preset in your global stylesheet */
	.preset-gradient {
		background-image: linear-gradient(-45deg, var(--color-primary-300), var(--color-primary-700));
		color: var(--color-primary-contrast-500);
	}
	.preset-glass-primary {
		background: color-mix(in oklab, var(--color-primary-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-primary-500) 50%, transparent) inset;
		backdrop-filter: blur(16px);
	}
</style>

```

1. **Filled** - a filled preset of the primary brand color.
2. **Tonal** - a tonal preset of the primary brand color.
3. **Outlined** - an outlined preset of the primary brand color.
4. **Glass** - a custom preset using background transparency and backdrop blur.
5. **Elevated** - mixes a filled preset with a shadow.
6. **Ghost** - has no style by default, but shows a tonal preset on hover.
7. **Ghost Icon** - has no style by default, but shows a branded tonal preset on hover.
8. **Gradient** - a custom preset generated using Tailwind gradient primitives.

## Skeleton Presets

Skeleton's provides the following opinionated set of styles, including accessible backgrounds and text colors.

### Filled

```txt
preset-filled-{color}-{lightModeShade}-{darkModeShade}
```

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

```

### Tonal

```txt
preset-tonal-{color}
```

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

```

### Outlined

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

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

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

```

## Custom Presets

Consider these best practices when creating presets:

* Custom presets are only limited by your imagination.
* Use any combination of Skeleton or Tailwind-provided primitive to generate a preset.
* Apply presets to any relevant element, including: buttons, cards, inputs, and more.
* Use a set naming convention, such as `preset-{foo}` to keep things standardized.
* Implement all presets in using Tailwind's [@utility directive](https://tailwindcss.com/docs/functions-and-directives#utility-directive) in your global stylesheet.
* Abstrast presets to a stylesheet or NPM package for shared used between projects.

Please be aware the following presets are not included by Skeleton. Rather, these are examples of how you might utilize the Preset pattern.

### Input Presets

```astro
<div class="w-full max-w-[320px] grid grid-rows-3 gap-4">
	<input type="text" class="input" value="Default Input State!" />
	<input type="text" class="input preset-input-success" value="Valid Input State!" />
	<input type="text" class="input preset-input-error" value="Invalid Input State!" />
</div>

<style>
	/* Add each custom preset to your global stylesheet. */
	.preset-input-success {
		background-color: var(--color-success-100);
		color: var(--color-success-900);
	}
	.preset-input-error {
		background-color: var(--color-error-100);
		color: var(--color-error-900);
	}
</style>

```

### Gradient Presets

Tailwind provides a number of powerful [Gradient](https://tailwindcss.com/docs/gradient-color-stops) utility classes that can be used to generate presets.

```astro
<div class="w-full space-y-4">
	<div class="grid grid-cols-3 gap-4">
		<button class="btn preset-gradient-one">Button</button>
		<button class="btn preset-gradient-two">Button</button>
		<button class="btn preset-gradient-three">Button</button>
	</div>
	<div class="grid grid-cols-3 gap-4 text-center">
		<div class="card p-4 preset-gradient-one">Card</div>
		<div class="card p-4 preset-gradient-two">Card</div>
		<div class="card p-4 preset-gradient-three">Card</div>
	</div>
</div>

<style>
	/* Create a custom preset in your global stylesheet */
	.preset-gradient-one {
		background-image: linear-gradient(45deg, var(--color-primary-500), var(--color-tertiary-500));
		color: var(--color-primary-contrast-500);
	}
	.preset-gradient-two {
		background-image: linear-gradient(45deg, var(--color-error-500), var(--color-warning-500));
		color: var(--color-error-contrast-500);
	}
	.preset-gradient-three {
		background-image: linear-gradient(45deg, var(--color-success-500), var(--color-warning-500));
		color: var(--color-success-contrast-500);
	}
</style>

```

### Glass Presets

```astro
---
const baseClasses = 'card p-4 text-white text-center flex justify-start items-center';
---

<div
	class="w-full space-y-4 bg-[url(https://picsum.photos/id/249/1024/1024)] bg-center bg-no-repeat bg-cover rounded-container flex justify-center items-center p-4"
>
	<div class="w-full grid grid-cols-1 gap-2">
		<div class:list={`${baseClasses} preset-glass-neutral`}>Neutral</div>
		<div class:list={`${baseClasses} preset-glass-primary`}>Primary</div>
		<div class:list={`${baseClasses} preset-glass-secondary`}>Secondary</div>
		<div class:list={`${baseClasses} preset-glass-tertiary`}>Tertiary</div>
		<div class:list={`${baseClasses} preset-glass-success`}>Success</div>
		<div class:list={`${baseClasses} preset-glass-warning`}>Warning</div>
		<div class:list={`${baseClasses} preset-glass-error`}>Error</div>
		<div class:list={`${baseClasses} preset-glass-surface`}>Surface</div>
	</div>
</div>

<style>
	/* Create a custom preset in your global stylesheet */
	.preset-glass-neutral {
		background: color-mix(in oklab, var(--color-surface-50-950) 30%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-surface-50-950) 30%, transparent) inset;
		backdrop-filter: blur(16px);
	}
	.preset-glass-primary {
		background: color-mix(in oklab, var(--color-primary-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-primary-500) 50%, transparent) inset;
		backdrop-filter: blur(16px);
	}
	.preset-glass-secondary {
		background: color-mix(in oklab, var(--color-secondary-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-secondary-500) 50%, transparent) inset;
		backdrop-filter: blur(16px);
	}
	.preset-glass-tertiary {
		background: color-mix(in oklab, var(--color-tertiary-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-tertiary-500) 50%, transparent) inset;
		backdrop-filter: blur(16px);
	}
	.preset-glass-success {
		background: color-mix(in oklab, var(--color-success-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-success-500) 50%, transparent) inset;
		backdrop-filter: blur(16px);
	}
	.preset-glass-warning {
		background: color-mix(in oklab, var(--color-warning-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-warning-500) 50%, transparent) inset;
		backdrop-filter: blur(16px);
	}
	.preset-glass-error {
		background: color-mix(in oklab, var(--color-error-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-error-500) 50%, transparent) inset;
		backdrop-filter: blur(16px);
	}
	.preset-glass-surface {
		background: color-mix(in oklab, var(--color-surface-500) 40%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-surface-500) 50%, transparent) inset;
		backdrop-filter: blur(16px);
	}
</style>

```

# Typography

The Skeleton typography system.

Skeleton provides an array of opt-in utility classes for common typographic elements, with a fully functional typography scale based on your theme settings. As well as a number of primitives for generating a semantic typography set for your project's individual needs.

## Typographic Scale

Skeleton introduces customizable [Typographic Scale](https://designcode.io/typographic-scales) to Tailwind's [font-size](https://tailwindcss.com/docs/font-size) properties.

## Utility Classes

Use the following utility classes to quickly style semantic HTML elements. These classes are opt-in by default, providing a simple escape hatch when you need to break from convention.

### Headings

```astro
<div class="space-y-4">
	<h1 class="h1">Heading 1</h1>
	<h2 class="h2">Heading 2</h2>
	<h3 class="h3">Heading 3</h3>
	<h4 class="h4">Heading 4</h4>
	<h5 class="h5">Heading 5</h5>
	<h6 class="h6">Heading 6</h6>
</div>

```

### Paragraphs

```astro
<p>The quick brown fox jumps over the lazy dog</p>

```

### Blockquotes

```astro
<blockquote class="blockquote">
	"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, aliquid. Molestias, odio illum voluptatibus natus dignissimos, quidem
	est unde aspernatur veniam pariatur fuga distinctio esse in quas, repellendus neque reiciendis!"
</blockquote>

```

### Anchor

```astro
<a href="/" class="anchor">Anchor</a>

```

### Pre-Formatted

```astro
<pre class="pre">The quick brown fox jumps over the lazy dog.</pre>

```

### Code

```astro
<div>Insert the <code class="code">.example</code> class here.</div>

```

### Keyboard

```astro
<div>Press <kbd class="kbd">⌘</kbd> + <kbd class="kbd">C</kbd> to copy.</div>

```

### Insert & Delete

```astro
<div class="w-full">
	<del class="del"><s>Always</s> Gonna Give You Up</del>
	<ins class="ins" cite="https://youtu.be/dQw4w9WgXcQ" datetime="10-31-2022"> Never Gonna Give You Up </ins>
</div>

```

### Mark

```astro
<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, <mark class="mark">aliquid</mark>. Molestias, odio illum voluptatibus
	<mark class="mark">natus dignissimos</mark>, quidem est unde aspernatur veniam pariatur fuga.
</p>

```

## Lists

Skeleton defers to Tailwind's built-in utility classes for common list styles.

### Unordered

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

```

### Ordered

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

```

### Basic

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

```

### Description

```astro
<dl class="space-y-2">
	<div>
		<dt class="font-bold">Item A</dt>
		<dd class="opacity-60">Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</dd>
	</div>
	<div>
		<dt class="font-bold">Item B</dt>
		<dd class="opacity-60">Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</dd>
	</div>
	<div>
		<dt class="font-bold">Item C</dt>
		<dd class="opacity-60">Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</dd>
	</div>
</dl>

```

### Navigation

```astro
<nav class="space-y-2">
	<!-- Optional Heading -->
	<p class="text-lg font-bold">Explore</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>

```

## Semantic Typography

When working with your designers, they may craft a semantic typography set for your project. To handle this, we recommend implementing [custom presets](/docs/\[framework]/design/presets#custom-presets) that mix CSS primitives with semantic HTML elements to replicate all desired styles. Feel free to use the boilerplate below, adding each style to your global stylesheet.

```svelte
<div class="table-wrap">
	<table class="table">
		<thead>
			<tr>
				<th>Class</th>
				<th>Preview</th>
			</tr>
		</thead>
		<tbody>
			<!-- preset-typo-display-4 -->
			<tr>
				<td><code class="code">preset-typo-display-4</code></td>
				<td><h1 class="preset-typo-display-4">Aa</h1></td>
			</tr>
			<!-- preset-typo-display-3 -->
			<tr>
				<td><code class="code">preset-typo-display-3</code></td>
				<td><h2 class="preset-typo-display-3">Aa</h2></td>
			</tr>
			<!-- preset-typo-display-2 -->
			<tr>
				<td><code class="code">preset-typo-display-2</code></td>
				<td><h3 class="preset-typo-display-2">Aa</h3></td>
			</tr>
			<!-- preset-typo-display-1 -->
			<tr>
				<td><code class="code">preset-typo-display-1</code></td>
				<td><h4 class="preset-typo-display-1">Aa</h4></td>
			</tr>
			<!-- preset-typo-headline -->
			<tr>
				<td><code class="code">preset-typo-headline</code></td>
				<td><p class="preset-typo-headline">Headline</p></td>
			</tr>
			<!-- preset-typo-title -->
			<tr>
				<td><code class="code">preset-typo-title</code></td>
				<td><p class="preset-typo-title">Title</p></td>
			</tr>
			<!-- preset-typo-subtitle -->
			<tr>
				<td><code class="code">preset-typo-subtitle</code></td>
				<td><p class="preset-typo-subtitle">Subtitle</p></td>
			</tr>
			<!-- preset-typo-body-1 -->
			<tr>
				<td><code class="code">preset-typo-body-1</code></td>
				<td>
					<p class="preset-typo-body-1">Body 1</p>
				</td>
			</tr>
			<!-- preset-typo-body-2 -->
			<tr>
				<td><code class="code">preset-typo-body-2</code></td>
				<td>
					<p class="preset-typo-body-2">Body 2</p>
				</td>
			</tr>
			<!-- preset-typo-caption -->
			<tr>
				<td><code class="code">preset-typo-caption</code></td>
				<td><span class="preset-typo-caption">Caption</span></td>
			</tr>
			<!-- preset-typo-menu -->
			<tr>
				<td><code class="code">preset-typo-menu</code></td>
				<td><span class="preset-typo-menu">Menu</span></td>
			</tr>
			<!-- preset-typo-button -->
			<tr>
				<td><code class="code">preset-typo-button</code></td>
				<td><span class="preset-typo-button">Button</span></td>
			</tr>
		</tbody>
	</table>
</div>

<style lang="postcss">
	/* IGNORE THIS: this is only required for our example <style> block. */
	/* https://tailwindcss.com/docs/functions-and-directives#reference-directive */
	@reference "@/app.css";

	/*
		Copy the following classes to your global stylesheet. Rename and modify as desired.
		Reference: http://skeleton.dev/docs/get-started/core-api#typography
	*/

	/* Headings */
	.preset-typo-display-4,
	.preset-typo-display-3,
	.preset-typo-display-2,
	.preset-typo-display-1,
	.preset-typo-headline,
	.preset-typo-title,
	.preset-typo-subtitle,
	.preset-typo-caption,
	.preset-typo-menu,
	.preset-typo-button {
		color: var(--heading-font-color);
		font-family: var(--heading-font-family);
		font-weight: var(--heading-font-weight);
		@variant dark {
			color: var(--heading-font-color-dark);
		}
	}

	/* Body */
	.preset-typo-body-1,
	.preset-typo-body-2,
	.preset-typo-caption,
	.preset-typo-menu,
	.preset-typo-button {
		color: var(--heading-font-color);
		@variant dark {
			color: var(--heading-font-color-dark);
		}
	}

	/* Unique Properties */
	.preset-typo-display-4 {
		font-size: var(--text-7xl);
		@variant lg {
			font-size: var(--text-9xl);
		}
	}
	.preset-typo-display-3 {
		font-size: var(--text-6xl);
		@variant lg {
			font-size: var(--text-8xl);
		}
	}
	.preset-typo-display-2 {
		font-size: var(--text-5xl);
		@variant lg {
			font-size: var(--text-7xl);
		}
	}
	.preset-typo-display-1 {
		font-size: var(--text-4xl);
		@variant lg {
			font-size: var(--text-6xl);
		}
	}
	.preset-typo-headline {
		font-size: var(--text-2xl);
		@variant lg {
			font-size: var(--text-4xl);
		}
	}
	.preset-typo-title {
		font-size: var(--text-xl);
		@variant lg {
			font-size: var(--text-3xl);
		}
	}
	.preset-typo-subtitle {
		font-size: var(--text-base);
		font-family: var(--heading-font-family);
		color: var(--color-surface-700-300);
		@variant lg {
			font-size: var(--text-xl);
		}
	}
	.preset-typo-body-1 {
		font-size: var(--text-xl);
		@variant lg {
			font-size: var(--text-3xl);
		}
	}
	.preset-typo-body-2 {
		font-size: var(--text-lg);
		@variant lg {
			font-size: var(--text-xl);
		}
	}
	.preset-typo-caption {
		font-size: var(--text-sm);
		color: var(--color-surface-700-300);
	}
	.preset-typo-menu {
		font-weight: bold;
	}
	.preset-typo-button {
		font-weight: bold;
	}
</style>

```

# Spacing

Set a dynamic scale for application whitespace.

This is enabled by the [Tailwind spacing system](https://tailwindcss.com/blog/tailwindcss-v4#dynamic-utility-values-and-variants).

This affects the following utilities.

* `padding`
* `margin`
* `width`
* `minWidth`
* `maxWidth`
* `height`
* `minHeight`
* `maxHeight`
* `gap`
* `inset`
* `space`
* `translate`

# Iconography

Learn how to integrate Lucide for iconography in Skeleton.

Skeleton takes an agnostic approach to icons, meaning you can use any combination of SVGs, emoji, unicode, or dedicated icon libraries. Mix and match to fulfill your project's unique requirements.

## Lucide

If you're looking for an opinionated solution, Skeleton recommends [Lucide](https://lucide.dev/). This provides a huge selection of icons that are available to all popular frameworks and feature a clean and modern style. All code examples in this documentation site implement Lucide, but feel free to replace with any alternative.

## Installation

Follow the official instructions to install [Lucide for React](https://lucide.dev/guide/packages/lucide-react).

## Usage

```tsx
import { SkullIcon } from 'lucide-react';

export default function App() {
	return <SkullIcon color="red" className="size-8" />;
}
```

## Alternatives

* [Radix Icons](https://www.radix-ui.com/icons) - features modern styles and a large selection, supports React only.
* [Iconify](https://iconify.design/) - provides a vast array of icon sets supported by popular icon libraries.
* [Font Awesome](https://fontawesome.com/) - provides a huge variety of icons in their free tier.
* [HeroIcons](https://heroicons.com/) - from the makers of Tailwind CSS, supports React and Vue.
* [SimpleIcons](https://simpleicons.org/) - provides an excellent selection of brand icons.

## Tailwind Components

# Badges

Provides a robust set of non-interactive badge styles.

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

<div class="flex items-center gap-4">
	<!-- A simple icon badge -->
	<span class="badge-icon preset-filled">
		<HeartIcon size={16} />
	</span>
	<!-- A standard badge -->
	<span class="badge preset-filled">Badge</span>
	<!-- A badge + icon -->
	<span class="badge preset-filled">
		<HeartIcon size={16} />
		<span>Badge</span>
	</span>
</div>

```

## Presets

Provides full support of [Presets](/docs/\[framework]/design/presets).

```astro
<div class="space-y-4">
	<div class="flex gap-4">
		<span class="badge preset-filled-primary-500">Badge</span>
		<span class="badge preset-tonal-primary">Badge</span>
		<span class="badge preset-outlined-primary-500">Badge</span>
	</div>
	<div class="flex gap-4">
		<span class="badge preset-filled-secondary-500">Badge</span>
		<span class="badge preset-tonal-secondary">Badge</span>
		<span class="badge preset-outlined-secondary-500">Badge</span>
	</div>
	<div class="flex gap-4">
		<span class="badge preset-filled-tertiary-500">Badge</span>
		<span class="badge preset-tonal-tertiary">Badge</span>
		<span class="badge preset-outlined-tertiary-500">Badge</span>
	</div>
	<div class="flex gap-4">
		<span class="badge preset-filled-success-500">Badge</span>
		<span class="badge preset-tonal-success">Badge</span>
		<span class="badge preset-outlined-success-500">Badge</span>
	</div>
	<div class="flex gap-4">
		<span class="badge preset-filled-warning-500">Badge</span>
		<span class="badge preset-tonal-warning">Badge</span>
		<span class="badge preset-outlined-warning-500">Badge</span>
	</div>
	<div class="flex gap-4">
		<span class="badge preset-filled-error-500">Badge</span>
		<span class="badge preset-tonal-error">Badge</span>
		<span class="badge preset-outlined-error-500">Badge</span>
	</div>
	<div class="flex gap-4">
		<span class="badge preset-filled-surface-500">Badge</span>
		<span class="badge preset-tonal-surface">Badge</span>
		<span class="badge preset-outlined-surface-500">Badge</span>
	</div>
</div>

```

## Overlap

Use `badge-icon` to create overlapping numeric or icon badges.

```astro
---
const imgSrc =
	'https://images.unsplash.com/photo-1620122303020-87ec826cf70d?q=80&w=256&h=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
---

<div class="relative inline-block">
	<span class="badge-icon preset-filled-primary-500 absolute -right-0 -top-0 z-10">2</span>
	<img class="size-20 overflow-hidden rounded-full grayscale" src={imgSrc} alt="Avatar" />
</div>

```

# Buttons

Provide a variety of button, including customizable sizes and types.

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

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

```

## Presets

Provides full support of [Presets](/docs/\[framework]/design/presets).

```astro
<div class="space-y-4">
	<div class="flex gap-4">
		<button type="button" class="btn preset-filled-primary-500">Button</button>
		<button type="button" class="btn preset-tonal-primary">Button</button>
		<button type="button" class="btn preset-outlined-primary-500">Button</button>
	</div>
	<div class="flex gap-4">
		<button type="button" class="btn preset-filled-secondary-500">Button</button>
		<button type="button" class="btn preset-tonal-secondary">Button</button>
		<button type="button" class="btn preset-outlined-secondary-500">Button</button>
	</div>
	<div class="flex gap-4">
		<button type="button" class="btn preset-filled-tertiary-500">Button</button>
		<button type="button" class="btn preset-tonal-tertiary">Button</button>
		<button type="button" class="btn preset-outlined-tertiary-500">Button</button>
	</div>
	<div class="flex gap-4">
		<button type="button" class="btn preset-filled-success-500">Button</button>
		<button type="button" class="btn preset-tonal-success">Button</button>
		<button type="button" class="btn preset-outlined-success-500">Button</button>
	</div>
	<div class="flex gap-4">
		<button type="button" class="btn preset-filled-warning-500">Button</button>
		<button type="button" class="btn preset-tonal-warning">Button</button>
		<button type="button" class="btn preset-outlined-warning-500">Button</button>
	</div>
	<div class="flex gap-4">
		<button type="button" class="btn preset-filled-error-500">Button</button>
		<button type="button" class="btn preset-tonal-error">Button</button>
		<button type="button" class="btn preset-outlined-error-500">Button</button>
	</div>
	<div class="flex gap-4">
		<button type="button" class="btn preset-filled-surface-500">Button</button>
		<button type="button" class="btn preset-tonal-surface">Button</button>
		<button type="button" class="btn preset-outlined-surface-500">Button</button>
	</div>
</div>

```

## Sizes

```astro
<div class="flex items-center gap-4">
	<button type="button" class="btn btn-sm preset-filled">Small</button>
	<button type="button" class="btn btn-base preset-filled">Base</button>
	<button type="button" class="btn btn-lg preset-filled">Large</button>
</div>

```

## Disabled

When applied to a `<button>` element, you can use the `disabled` attribute.

```astro
<button type="button" class="btn preset-filled-primary-500" disabled>Button</button>

```

## Group

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

export default function ButtonGroup() {
	const [active, setActive] = useState('january');
	const months = ['january', 'february', 'march'];
	return (
		<nav className="btn-group preset-outlined-surface-200-800 flex-col p-2 md:flex-row">
			{months.map((month, i) => (
				<button key={i} type="button" className={`btn capitalize ${active == month && 'preset-filled'}`} onClick={() => setActive(month)}>
					{month}
				</button>
			))}
		</nav>
	);
}

```

# Cards

Provides container elements that wrap and separate content.

```astro
<div class="card w-full max-w-md preset-filled-surface-100-900 p-4 text-center">
	<p>Card</p>
</div>

```

```astro
---
const imgSrc =
	'https://images.unsplash.com/photo-1463171515643-952cee54d42a?q=80&w=450&h=190&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
---

<a
	href="#"
	class="card preset-filled-surface-100-900 border-[1px] border-surface-200-800 card-hover divide-surface-200-800 block max-w-md divide-y overflow-hidden"
>
	{/* Header */}
	<header>
		<img src={imgSrc} class="aspect-[21/9] w-full grayscale hue-rotate-90" alt="banner" />
	</header>
	{/* Article */}
	<article class="space-y-4 p-4">
		<div>
			<h2 class="h6">Announcements</h2>
			<h3 class="h3">Skeleton is Awesome</h3>
		</div>
		<p class="opacity-60">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aspernatur provident eveniet eligendi cumque consequatur tempore sint
			nisi sapiente. Iste beatae laboriosam iure molestias cum expedita architecto itaque quae rem.
		</p>
	</article>
	{/* Footer */}
	<footer class="flex items-center justify-between gap-4 p-4">
		<small class="opacity-60">By Alex</small>
		<small class="opacity-60">On {new Date().toLocaleDateString()}</small>
	</footer>
</a>

```

## Presets

Provides full support of [Presets](/docs/\[framework]/design/presets).

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

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

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

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

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

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

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

```

# Chips

Provides a robust set of interactive chip styles.

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

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

```

## Presets

Provides full support of [Presets](/docs/\[framework]/design/presets).

```astro
<div class="space-y-4">
	<div class="flex gap-4">
		<button type="button" class="chip preset-filled-primary-500">Chip</button>
		<button type="button" class="chip preset-tonal-primary">Chip</button>
		<button type="button" class="chip preset-outlined-primary-500">Chip</button>
	</div>
	<div class="flex gap-4">
		<button type="button" class="chip preset-filled-secondary-500">Chip</button>
		<button type="button" class="chip preset-tonal-secondary">Chip</button>
		<button type="button" class="chip preset-outlined-secondary-500">Chip</button>
	</div>
	<div class="flex gap-4">
		<button type="button" class="chip preset-filled-tertiary-500">Chip</button>
		<button type="button" class="chip preset-tonal-tertiary">Chip</button>
		<button type="button" class="chip preset-outlined-tertiary-500">Chip</button>
	</div>
	<div class="flex gap-4">
		<button type="button" class="chip preset-filled-success-500">Chip</button>
		<button type="button" class="chip preset-tonal-success">Chip</button>
		<button type="button" class="chip preset-outlined-success-500">Chip</button>
	</div>
	<div class="flex gap-4">
		<button type="button" class="chip preset-filled-warning-500">Chip</button>
		<button type="button" class="chip preset-tonal-warning">Chip</button>
		<button type="button" class="chip preset-outlined-warning-500">Chip</button>
	</div>
	<div class="flex gap-4">
		<button type="button" class="chip preset-filled-error-500">Chip</button>
		<button type="button" class="chip preset-tonal-error">Chip</button>
		<button type="button" class="chip preset-outlined-error-500">Chip</button>
	</div>
	<div class="flex gap-4">
		<button type="button" class="chip preset-filled-surface-500">Chip</button>
		<button type="button" class="chip preset-tonal-surface">Chip</button>
		<button type="button" class="chip preset-outlined-surface-500">Chip</button>
	</div>
</div>

```

## Disabled

When applied to a `<button>` element, you can use the `disabled` attribute.

```astro
<button type="button" class="chip preset-filled" disabled>Chip</button>

```

## Selection

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

export default function Select() {
	const colors = ['red', 'blue', 'green'];
	const [color, setColor] = useState(colors[0]);

	return (
		<div className="flex gap-2">
			{/* Loop through the available colors */}
			{color &&
				colors.map((c) => (
					// On selection, set the color state, dynamically update classes
					<button className={`chip capitalize ${color === c ? 'preset-filled' : 'preset-tonal'}`} onClick={() => setColor(c)} key={c}>
						<span>{c}</span>
					</button>
				))}
		</div>
	);
}

```

# Dividers

Horizontal and vertical rule styling.

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

	<hr class="hr" />

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

```

## Size

Use Tailwind's [border width](https://tailwindcss.com/docs/border-width) utilities to adjust thickness.

```astro
<div class="w-full space-y-4">
	<code class="inline-block code">Default</code>
	<hr class="hr" />

	<code class="inline-block code">border-t-2</code>
	<hr class="hr border-t-2" />

	<code class="inline-block code">border-t-4</code>
	<hr class="hr border-t-4" />

	<code class="inline-block code">border-t-8</code>
	<hr class="hr border-t-8" />
</div>

```

## Style

Use Tailwind's [border style](https://tailwindcss.com/docs/border-style) utilities to adjust visual style.

```astro
<div class="w-full space-y-4">
	<code class="inline-block code">border-solid</code>
	<hr class="hr border-solid" />

	<code class="inline-block code">border-dashed</code>
	<hr class="hr border-dashed" />

	<code class="inline-block code">border-dotted</code>
	<hr class="hr border-dotted" />

	<code class="inline-block code">border-double</code>
	<hr class="hr border-4 border-double" />
</div>

```

## Colors

Use any Tailwind or Skeleton [colors or pairing](/docs/\[framework]/design/colors).

```astro
<div class="w-full space-y-4">
	<code class="inline-block code">border-primary-500</code>
	<hr class="hr border-primary-500" />

	<code class="inline-block code">border-secondary-500</code>
	<hr class="hr border-secondary-500" />

	<code class="inline-block code">border-tertiary-500</code>
	<hr class="hr border-tertiary-500" />

	<code class="inline-block code">border-success-500</code>
	<hr class="hr border-success-500" />

	<code class="inline-block code">border-warning-500</code>
	<hr class="hr border-warning-500" />

	<code class="inline-block code">border-error-500</code>
	<hr class="hr border-error-500" />

	<code class="inline-block code">border-surface-950-50</code>
	<hr class="hr border-surface-950-50" />
</div>

```

## Vertical

Use `vr` for a vertical rule, which supports all above styles. Make sure to set the height.

```astro
<div class="grid h-20 grid-cols-[auto_auto_auto_auto_auto_auto] items-center gap-4">
	<span><code class="code">Default</code> &rarr;</span>

	<span class="vr"></span>
	<span class="vr border-l-2"></span>
	<span class="vr border-l-4"></span>
	<span class="vr border-l-8"></span>

	<span>&larr; <code class="code">border-l-8</code></span>
</div>

```

# Forms and Inputs

Various form and input styles.

```astro
<form class="w-full max-w-md space-y-4 p-4">
	<fieldset class="space-y-4">
		<!-- Input -->
		<label class="label">
			<span class="label-text">Input</span>
			<input class="input" type="text" placeholder="Input" />
		</label>
		<!-- Select -->
		<label class="label">
			<span class="label-text">Select</span>
			<select class="select">
				<option value="1">Option 1</option>
				<option value="2">Option 2</option>
				<option value="3">Option 3</option>
				<option value="4">Option 4</option>
				<option value="5">Option 5</option>
			</select>
		</label>
		<!-- Textarea -->
		<label class="label">
			<span class="label-text">Textarea</span>
			<textarea class="textarea rounded-container" rows="4" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit."
			></textarea>
		</label>
	</fieldset>
	<fieldset class="flex justify-end">
		<!-- Button -->
		<button type="button" class="btn preset-outlined-surface-300-700">Submit</button>
	</fieldset>
</form>

```

## Prerequisites

### Tailwind Forms

Skeleton relies on the official [Tailwind Forms](https://github.com/tailwindlabs/tailwindcss-forms) plugin to normalize form styling. This plugin is  if you wish to use any form utility classes provided on this page.

To being, install the `@tailwindcss/forms` package.

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

Then implement in your global stylesheet using the the `@plugin` directive.

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

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

### Browser Support

The quality and appearance of native and semantic HTML form elements can vary between both operating systems and browser vendors. Skeleton does its best to adhere to progressive enhancement best practices. However, we advise you validate support for each element per your target audience.

## Inputs

Supports all [input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types), within reason.

```astro
<form class="mx-auto w-full max-w-md space-y-4">
	<!-- text -->
	<label class="label">
		<span class="label-text">Input</span>
		<input class="input" type="text" placeholder="Input" />
	</label>
	<!-- password -->
	<label class="label">
		<span class="label-text">Input: password</span>
		<input class="input" type="password" placeholder="Input" />
	</label>
	<!-- email -->
	<label class="label">
		<span class="label-text">Input: email</span>
		<input class="input" type="email" placeholder="Input" />
	</label>
	<!-- url -->
	<label class="label">
		<span class="label-text">Input: url</span>
		<input class="input" type="url" placeholder="Input" />
	</label>
	<!-- tel -->
	<label class="label">
		<span class="label-text">Input: tel</span>
		<input class="input" type="tel" placeholder="Input" />
	</label>
	<!-- search -->
	<label class="label">
		<span class="label-text">Input: search</span>
		<input class="input" type="search" placeholder="Input" />
	</label>
	<!-- number -->
	<label class="label">
		<span class="label-text">Input: number</span>
		<input class="input" type="number" placeholder="Input" />
	</label>
</form>

```

## Select

```astro
<form class="mx-auto w-full max-w-md space-y-4">
	<select class="select">
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
		<option value="4">Option 4</option>
		<option value="5">Option 5</option>
	</select>
</form>

```

## Checkboxes

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

```

## Radio Groups

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

```

## Kitchen Sink

Display and functionality of these elements may vary greatly between devices and browsers.

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

```

## Groups

Input groups support a subset of form elements and button styles. These pair well with [Presets](/docs/\[framework]/design/presets).

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

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

```

\| Class         | Usage                                   |
\| ------------- | --------------------------------------- |
\| `input-group` | Defines the parent input group set.     |
\| `ig-cell`     | Defines a child cell for text or icons. |
\| `ig-input`    | Defines a child input of `type="text"`. |
\| `ig-select`   | Defines a child select element.         |
\| `ig-btn`      | Defines a child button.                 |

# Placeholders

Provides "skeleton" placeholders that can display while content loads.

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

```

## Animated

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

# Tables

Provides a set of styles for native HTML table elements.

```astro
---
const tableData = [
	{ position: '0', name: 'Iron', symbol: 'Fe', atomic_no: '26' },
	{ position: '1', name: 'Rhodium', symbol: 'Rh', atomic_no: '45' },
	{ position: '2', name: 'Iodine', symbol: 'I', atomic_no: '53' },
	{ position: '3', name: 'Radon', symbol: 'Rn', atomic_no: '86' },
	{ position: '4', name: 'Technetium', symbol: 'Tc', atomic_no: '43' },
];
---

<div class="table-wrap">
	<table class="table caption-bottom">
		<tbody class="[&>tr]:hover:preset-tonal-primary">
			{
				tableData.map((row) => (
					<tr>
						<td>{row.position}</td>
						<td>{row.symbol}</td>
						<td>{row.name}</td>
						<td class="text-right">{row.atomic_no}</td>
					</tr>
				))
			}
		</tbody>
	</table>
</div>

```

## Extras

Optionally add a header, footer, and caption.

```astro
---
const tableData = [
	{ position: '0', name: 'Iron', symbol: 'Fe', atomic_no: '26' },
	{ position: '1', name: 'Rhodium', symbol: 'Rh', atomic_no: '45' },
	{ position: '2', name: 'Iodine', symbol: 'I', atomic_no: '53' },
	{ position: '3', name: 'Radon', symbol: 'Rn', atomic_no: '86' },
	{ position: '4', name: 'Technetium', symbol: 'Tc', atomic_no: '43' },
];
---

<div class="table-wrap">
	<table class="table caption-bottom">
		<caption class="pt-4">A list of elements from the periodic table.</caption>
		<thead>
			<tr>
				<th>Position</th>
				<th>Symbol</th>
				<th>Name</th>
				<th class="!text-right">Weight</th>
			</tr>
		</thead>
		<tbody class="[&>tr]:hover:preset-tonal-primary">
			{
				tableData.map((row) => (
					<tr>
						<td>{row.position}</td>
						<td>{row.symbol}</td>
						<td>{row.name}</td>
						<td class="text-right">{row.atomic_no}</td>
					</tr>
				))
			}
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">Total</td>
				<td class="text-right">{tableData.length} Elements</td>
			</tr>
		</tfoot>
	</table>
</div>

```

## Navigation

Native HTML tables do not support interaction. For accessibility, use anchors or buttons within the last cell.

```astro
---
const tableData = [
	{ first: 'Liam', last: 'Steele', email: 'liam@email.com' },
	{ first: 'Athena', last: 'Marks', email: 'athena@email.com' },
	{ first: 'Angela', last: 'Rivers', email: 'angela@email.com' },
];
---

<div class="table-wrap">
	<table class="table caption-bottom">
		<tbody>
			<thead>
				<tr>
					<th>First Name</th>
					<th>Last Name</th>
					<th>Email</th>
					<th>&nbsp;</th>
				</tr>
			</thead>
			{
				tableData.map((row) => (
					<tr>
						<td>{row.first}</td>
						<td>{row.last}</td>
						<td>{row.email}</td>
						<td class="text-right">
							<a class="btn btn-sm preset-filled" href="#">
								View &rarr;
							</a>
						</td>
					</tr>
				))
			}
		</tbody>
	</table>
</div>

```

## Layout

See [Tailwind's utility classes](https://tailwindcss.com/docs/table-layout) for adjusting the table layout algorithm. Apply this to the Table element.

## Hover Rows

Add a visual hover effect using the following Tailwind syntax.

```html
<tbody class="[&>tr]:hover:preset-tonal-primary">
	...
</tbody>
```

## Pagination

Pair with the Skeleton [Pagination](/docs/\[framework]/framework-components/pagination/) component for large data sets.

## Framework Components

# Accordion

Divide content into collapsible sections.

```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
import { ChevronDownIcon } from 'lucide-react';
import { Fragment } from 'react';

export default function Default() {
	/**
	 * Attribution
	 * @see https://www.healthline.com/health/fun-facts-about-the-skeletal-system#8-More-than-half-your-bones-are-in-your-hands-and-feet
	 */
	const items = [
		{
			id: '1',
			title: 'Your skeleton is made of more than 200 bones',
			description:
				'Inside your body are 206 bones. Each bone plays a very important role in making all the mechanics of your body function properly. If a bone is broken, all the bones around it can’t perform their duty properly.',
		},
		{
			id: '2',
			title: 'The smallest bone in the body is in your ear',
			description:
				'The stapes, a bone in your inner ear, is the smallest of all your bones. This bone is also sometimes called the stirrup because of its Y shape. Together with the anvil and hammer bones, the stapes helps translate sounds you hear into waves your brain can understand.',
		},
		{
			id: '3',
			title: 'One bone isn’t connected to any other bones',
			description:
				'The hyoid bone, which is in your throat, is the only bone that doesn’t connect to a joint. The hyoid is responsible for holding your tongue in place.',
		},
	];
	return (
		<Accordion>
			{items.map((item, i) => (
				<Fragment key={item.id}>
					{i !== 0 && <hr className="hr" />}
					<Accordion.Item value={item.id}>
						<h3>
							<Accordion.ItemTrigger className="font-bold flex items-center justify-between gap-2">
								{item.title}
								<Accordion.ItemIndicator className="group">
									<ChevronDownIcon className="h-5 w-5 transition group-data-[state=open]:rotate-180" />
								</Accordion.ItemIndicator>
							</Accordion.ItemTrigger>
						</h3>
						<Accordion.ItemContent>{item.description}</Accordion.ItemContent>
					</Accordion.Item>
				</Fragment>
			))}
		</Accordion>
	);
}

```

## Controlled

Use the `open` and `onOpenChange` props to control the state.

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

export default function Controlled() {
	const [value, setValue] = useState(['1']);

	return (
		<Accordion value={value} onValueChange={(details) => setValue(details.value)}>
			{['1', '2', '3'].map((item) => (
				<Accordion.Item key={item} value={item}>
					<h3>
						<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
					</h3>
					<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
				</Accordion.Item>
			))}
		</Accordion>
	);
}

```

## Multiple

Allow multiple accordion items to stay open at once using the `multiple` prop.

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

// [!code highlight]

export default function Multiple() {
	return (
		<Accordion multiple>
			{['1', '2', '3'].map((item) => (
				<Accordion.Item key={item} value={item}>
					<h3>
						<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
					</h3>
					<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
				</Accordion.Item>
			))}
		</Accordion>
	);
}

```

## Collapsible

Allow closing all items when one is open using the `collapsible` prop.

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

export default function Collapsible() {
	return (
		<Accordion collapsible>
			{['1', '2', '3'].map((item) => (
				<Accordion.Item key={item} value={item}>
					<h3>
						<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
					</h3>
					<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
				</Accordion.Item>
			))}
		</Accordion>
	);
}

```

## Indicator

Add a custom indicator to accordion triggers.

```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
import { MinusIcon, PlusIcon } from 'lucide-react';

export default function Indicator() {
	return (
		<Accordion>
			{['1', '2', '3'].map((item) => (
				<Accordion.Item key={item} value={item}>
					<h3>
						<Accordion.ItemTrigger className="flex justify-between items-center">
							Item {item}
							<Accordion.ItemIndicator className="group">
								<MinusIcon className="size-4 group-data-[state=open]:block hidden" />
								<PlusIcon className="size-4 group-data-[state=open]:hidden block" />
							</Accordion.ItemIndicator>
						</Accordion.ItemTrigger>
					</h3>
					<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
				</Accordion.Item>
			))}
		</Accordion>
	);
}

```

## Orientation

Render the accordion vertically or horizontally using the `orientation` prop.

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

export default function Orientation() {
	return (
		<Accordion orientation="horizontal">
			{['1', '2', '3'].map((item) => (
				<Accordion.Item key={item} value={item} className="data-[state=open]:flex-1">
					<h3>
						<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
					</h3>
					<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
				</Accordion.Item>
			))}
		</Accordion>
	);
}

```

## Dir

Set the text direction (`ltr` or `rtl`) using the `dir` prop.

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

export default function Dir() {
	return (
		<Accordion dir="rtl">
			{['1', '2', '3'].map((item) => (
				<Accordion.Item key={item} value={item}>
					<h3>
						<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
					</h3>
					<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
				</Accordion.Item>
			))}
		</Accordion>
	);
}

```

## API Reference

### Root

| Prop          | Description                                                                                                           | Type                                                                                                                                                       | Default    |
| ------------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| ids           | The ids of the elements in the accordion. Useful for composition.                                                     | Partial\<\{ root: string; item: (value: string) => string; itemContent: (value: string) => string; itemTrigger: (value: string) => string; }> \| undefined | -          |
| multiple      | Whether multiple accordion items can be expanded at the same time.                                                    | boolean \| undefined                                                                                                                                       | false      |
| collapsible   | Whether an accordion item can be closed after it has been expanded.                                                   | boolean \| undefined                                                                                                                                       | false      |
| value         | The controlled value of the expanded accordion items.                                                                 | string\[] \| undefined                                                                                                                                     | -          |
| defaultValue  | The initial value of the expanded accordion items.&#xA;Use when you don't need to control the value of the accordion. | string\[] \| undefined                                                                                                                                     | -          |
| disabled      | Whether the accordion items are disabled                                                                              | boolean \| undefined                                                                                                                                       | -          |
| onValueChange | The callback fired when the state of expanded/collapsed accordion items changes.                                      | ((details: ValueChangeDetails) => void) \| undefined                                                                                                       | -          |
| onFocusChange | The callback fired when the focused accordion item changes.                                                           | ((details: FocusChangeDetails) => void) \| undefined                                                                                                       | -          |
| orientation   | The orientation of the accordion items.                                                                               | "horizontal" \| "vertical" \| undefined                                                                                                                    | "vertical" |
| dir           | The document's text/writing direction.                                                                                | "ltr" \| "rtl" \| undefined                                                                                                                                | "ltr"      |
| getRootNode   | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                            | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                        | -          |
| element       | Render the element yourself                                                                                           | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                             | -          |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | AccordionApi\<PropTypes>                                       | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                               | Default |
| -------- | ----------- | -------------------------------------------------- | ------- |
| children | -           | (accordion: AccordionApi\<PropTypes>) => ReactNode | -       |

### Item

| Prop     | Description                             | Type                                                           | Default |
| -------- | --------------------------------------- | -------------------------------------------------------------- | ------- |
| value    | The value of the accordion item.        | string                                                         | -       |
| disabled | Whether the accordion item is disabled. | boolean \| undefined                                           | -       |
| children | -                                       | ReactNode                                                      | -       |
| element  | Render the element yourself             | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### ItemTrigger

| Prop     | Description                 | Type                                                              | Default |
| -------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| children | -                           | ReactNode                                                         | -       |
| element  | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### ItemIndicator

| Prop     | Description                 | Type                                                           | Default |
| -------- | --------------------------- | -------------------------------------------------------------- | ------- |
| children | -                           | ReactNode                                                      | -       |
| element  | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### ItemContent

| Prop     | Description                 | Type                                                           | Default |
| -------- | --------------------------- | -------------------------------------------------------------- | ------- |
| children | -                           | ReactNode                                                      | -       |
| element  | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

# App Bar

A header element for the top of your page layout.

```tsx
import { AppBar } from '@skeletonlabs/skeleton-react';
import { CalendarIcon } from 'lucide-react';
import { CircleUserIcon } from 'lucide-react';
import { MenuIcon } from 'lucide-react';
import { SearchIcon } from 'lucide-react';

export default function Default() {
	return (
		<AppBar>
			<AppBar.Toolbar className="grid-cols-[auto_1fr_auto]">
				<AppBar.Lead>
					<button type="button" className="btn-icon btn-icon-lg hover:preset-tonal">
						<MenuIcon />
					</button>
				</AppBar.Lead>
				<AppBar.Headline>
					<p className="text-2xl">Skeleton</p>
				</AppBar.Headline>
				<AppBar.Trail>
					<button type="button" className="btn-icon hover:preset-tonal">
						<SearchIcon className="size-6" />
					</button>
					<button type="button" className="btn-icon hover:preset-tonal">
						<CalendarIcon className="size-6" />
					</button>
					<button type="button" className="btn-icon hover:preset-tonal">
						<CircleUserIcon className="size-6" />
					</button>
				</AppBar.Trail>
			</AppBar.Toolbar>
		</AppBar>
	);
}

```

## Centered

Control the layout using a [grid-cols-\*](https://tailwindcss.com/docs/grid-column) utility class.

```tsx
import { AppBar } from '@skeletonlabs/skeleton-react';
import { CalendarIcon } from 'lucide-react';
import { CircleUserIcon } from 'lucide-react';
import { MenuIcon } from 'lucide-react';
import { SearchIcon } from 'lucide-react';

export default function Centered() {
	return (
		<AppBar>
			<AppBar.Toolbar className="grid-cols-[1fr_2fr_1fr]">
				<AppBar.Lead>
					<button type="button" className="btn-icon btn-icon-lg hover:preset-tonal">
						<MenuIcon />
					</button>
				</AppBar.Lead>
				<AppBar.Headline className="flex justify-center">
					<p>Headline</p>
				</AppBar.Headline>
				<AppBar.Trail className="justify-end">
					<button type="button" className="btn-icon hover:preset-tonal">
						<SearchIcon className="size-6" />
					</button>
					<button type="button" className="btn-icon hover:preset-tonal">
						<CalendarIcon className="size-6" />
					</button>
					<button type="button" className="btn-icon hover:preset-tonal">
						<CircleUserIcon className="size-6" />
					</button>
				</AppBar.Trail>
			</AppBar.Toolbar>
		</AppBar>
	);
}

```

## Extended

Move the `<AppBar.Headline>` to a new row within the root.

```tsx
import { AppBar } from '@skeletonlabs/skeleton-react';
import { CalendarIcon } from 'lucide-react';
import { CircleUserIcon } from 'lucide-react';
import { MenuIcon } from 'lucide-react';
import { SearchIcon } from 'lucide-react';

export default function Extended() {
	return (
		<AppBar>
			<AppBar.Toolbar className="grid-cols-[auto_auto]">
				<AppBar.Lead>
					<button type="button" className="btn-icon btn-icon-lg hover:preset-tonal">
						<MenuIcon />
					</button>
				</AppBar.Lead>
				<AppBar.Trail>
					<button type="button" className="btn-icon hover:preset-tonal">
						<SearchIcon className="size-6" />
					</button>
					<button type="button" className="btn-icon hover:preset-tonal">
						<CalendarIcon className="size-6" />
					</button>
					<button type="button" className="btn-icon hover:preset-tonal">
						<CircleUserIcon className="size-6" />
					</button>
				</AppBar.Trail>
			</AppBar.Toolbar>
			<AppBar.Headline>
				<h2 className="h2">Headline</h2>
			</AppBar.Headline>
		</AppBar>
	);
}

```

## Responsive

```tsx
import { AppBar } from '@skeletonlabs/skeleton-react';
import { CalendarIcon } from 'lucide-react';
import { CircleUserIcon } from 'lucide-react';
import { MenuIcon } from 'lucide-react';
import { SearchIcon } from 'lucide-react';

export default function Responsive() {
	return (
		<>
			{/* 1. Set dynamic spacing */}
			<AppBar className="space-y-0 md:space-y-4">
				{/* 2. Set dynamic layout columns */}
				<AppBar.Toolbar className="grid-cols-[auto_1fr_auto] md:grid-cols-[auto_auto]">
					<AppBar.Lead>
						<button type="button" className="btn-icon btn-icon-lg hover:preset-tonal">
							<MenuIcon />
						</button>
					</AppBar.Lead>

					{/* 3. Set Mobile display */}
					<AppBar.Headline className="md:hidden">
						<p className="text-2xl">Headline</p>
					</AppBar.Headline>

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

				{/* 4. Set Desktop display */}
				<AppBar.Headline className="hidden md:block">
					<p className="text-2xl">Headline</p>
				</AppBar.Headline>
			</AppBar>
		</>
	);
}

```

## API Reference

### Root

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"header">) => Element) \| undefined | -       |

### Toolbar

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Lead

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"nav">) => Element) \| undefined | -       |

### Headline

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Trail

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"nav">) => Element) \| undefined | -       |

# Avatar

An image with a fallback for representing the user.

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

export default function Default() {
	return (
		<Avatar>
			<Avatar.Image src="https://i.pravatar.cc/150?img=48" />
			<Avatar.Fallback>SK</Avatar.Fallback>
		</Avatar>
	);
}

```

## Fallback

Use a fallback when an image fails to load or is unavailable.

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

export default function Fallback() {
	return (
		<Avatar>
			<Avatar.Fallback>SK</Avatar.Fallback>
		</Avatar>
	);
}

```

## Filter

Apply [SVG Filters](/docs/\[framework]/guides/cookbook/svg-filters) to avatar images.

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

export default function Filter() {
	return (
		<>
			<Avatar>
				<Avatar.Image src="https://i.pravatar.cc/150?img=48" className="filter-[url(#apollo)]" />
				<Avatar.Fallback>SK</Avatar.Fallback>
			</Avatar>
			<svg className="absolute -left-full w-0 h-0">
				<filter id="apollo" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
					<feColorMatrix
						values="0.8 0.6 -0.4 0.1 0,
            0 1.2 0.05 0 0,
            0 -1 3 0.02 0,
            0 0 0 50 0"
						result="final"
						in="SourceGraphic"
					/>
				</filter>
			</svg>
		</>
	);
}

```

## API Reference

### Root

| Prop           | Description                                                                                | Type                                                                       | Default |
| -------------- | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------- | ------- |
| onStatusChange | Functional called when the image loading status changes.                                   | ((details: StatusChangeDetails) => void) \| undefined                      | -       |
| ids            | The ids of the elements in the avatar. Useful for composition.                             | Partial\<\{ root: string; image: string; fallback: string; }> \| undefined | -       |
| getRootNode    | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | (() => ShadowRoot \| Node \| Document) \| undefined                        | -       |
| dir            | The document's text/writing direction.                                                     | "ltr" \| "rtl" \| undefined                                                | "ltr"   |
| element        | Render the element yourself                                                                | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined             | -       |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | AvatarApi\<PropTypes>                                          | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                         | Default |
| -------- | ----------- | -------------------------------------------- | ------- |
| children | -           | (avatar: AvatarApi\<PropTypes>) => ReactNode | -       |

### Image

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"img">) => Element) \| undefined | -       |

### Fallback

| Prop    | Description                 | Type                                                            | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | -       |

# Collapsible

A container that can be expanded or collapsed to show or hide content.

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

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

```

## Controlled

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

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

	return (
		<Collapsible open={open} onOpenChange={(details) => setOpen(details.open)}>
			<Collapsible.Trigger className="btn preset-filled">{open ? 'Close' : 'Open'}</Collapsible.Trigger>
			<Collapsible.Content>
				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit pariatur error soluta voluptate, accusantium modi repudiandae omnis
				eligendi, suscipit repellat impedit architecto neque sequi mollitia autem dicta quae ipsum et?
			</Collapsible.Content>
		</Collapsible>
	);
}

```

## Indicator

```tsx
import { Collapsible } from '@skeletonlabs/skeleton-react';
import { MinusIcon, PlusIcon } from 'lucide-react';

export default function Default() {
	return (
		<Collapsible>
			<Collapsible.Trigger className="btn preset-filled">
				<span>Toggle</span>
				<Collapsible.Indicator className="group">
					<MinusIcon className="size-4 group-data-[state=open]:block hidden" />
					<PlusIcon className="size-4 group-data-[state=open]:hidden block" />
				</Collapsible.Indicator>
			</Collapsible.Trigger>
			<Collapsible.Content>
				Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam assumenda veritatis modi repellendus enim accusantium inventore
				architecto maxime voluptates quibusdam velit perferendis mollitia, quas, aliquam sapiente adipisci illo nostrum vitae?
			</Collapsible.Content>
		</Collapsible>
	);
}

```

## Disabled

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

export default function Disabled() {
	return (
		<Collapsible disabled>
			<Collapsible.Trigger className="btn preset-filled">Toggle</Collapsible.Trigger>
			<Collapsible.Content>
				Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas maxime in praesentium reiciendis eveniet modi mollitia? Odio
				accusantium veritatis accusamus quia placeat sapiente reiciendis? Consectetur, quis! Voluptatem omnis accusantium blanditiis.
			</Collapsible.Content>
		</Collapsible>
	);
}

```

## Alignment

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

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

```

## Direction

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

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

```

## API Reference

### Root

| Prop            | Description                                                                                                                        | Type                                                                        | Default |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ------- |
| ids             | The ids of the elements in the collapsible. Useful for composition.                                                                | Partial\<\{ root: string; content: string; trigger: string; }> \| undefined | -       |
| open            | The controlled open state of the collapsible.                                                                                      | boolean \| undefined                                                        | -       |
| defaultOpen     | The initial open state of the collapsible when rendered.&#xA;Use when you don't need to control the open state of the collapsible. | boolean \| undefined                                                        | -       |
| onOpenChange    | The callback invoked when the open state changes.                                                                                  | ((details: OpenChangeDetails) => void) \| undefined                         | -       |
| onExitComplete  | The callback invoked when the exit animation completes.                                                                            | VoidFunction \| undefined                                                   | -       |
| disabled        | Whether the collapsible is disabled.                                                                                               | boolean \| undefined                                                        | -       |
| collapsedHeight | The height of the content when collapsed.                                                                                          | string \| number \| undefined                                               | -       |
| collapsedWidth  | The width of the content when collapsed.                                                                                           | string \| number \| undefined                                               | -       |
| getRootNode     | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                         | (() => ShadowRoot \| Node \| Document) \| undefined                         | -       |
| dir             | The document's text/writing direction.                                                                                             | "ltr" \| "rtl" \| undefined                                                 | "ltr"   |
| element         | Render the element yourself                                                                                                        | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined              | -       |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | CollapsibleApi\<PropTypes>                                     | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                                   | Default |
| -------- | ----------- | ------------------------------------------------------ | ------- |
| children | -           | (collapsible: CollapsibleApi\<PropTypes>) => ReactNode | -       |

### Trigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### Indicator

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Content

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

# Combobox

A combobox is an input widget with an associated popup that enables users to select a value from a collection of possible values.

```tsx
import { Combobox, Portal, type ComboboxRootProps, useListCollection } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

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

export default function Default() {
	const [items, setItems] = useState(data);

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

	const onOpenChange = () => {
		setItems(data);
	};

	const onInputValueChange: ComboboxRootProps['onInputValueChange'] = (event) => {
		const filtered = data.filter((item) => item.value.toLowerCase().includes(event.inputValue.toLowerCase()));
		if (filtered.length > 0) {
			setItems(filtered);
		} else {
			setItems(data);
		}
	};

	return (
		<Combobox
			className="w-full max-w-md"
			placeholder="Search..."
			collection={collection}
			onOpenChange={onOpenChange}
			onInputValueChange={onInputValueChange}
		>
			<Combobox.Label>Label</Combobox.Label>
			<Combobox.Control>
				<Combobox.Input />
				<Combobox.Trigger />
			</Combobox.Control>
			<Portal>
				<Combobox.Positioner className="z-[1]!">
					<Combobox.Content>
						{items.map((item) => (
							<Combobox.Item key={item.value} item={item}>
								<Combobox.ItemText>{item.label}</Combobox.ItemText>
								<Combobox.ItemIndicator />
							</Combobox.Item>
						))}
					</Combobox.Content>
				</Combobox.Positioner>
			</Portal>
		</Combobox>
	);
}

```

## Groups

Create labelled groups for your items.

```tsx
'use client';

import { Combobox, Portal, type ComboboxRootProps, useListCollection } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

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

export default function Group() {
	const [items, setItems] = useState(data);

	const collection = useListCollection({
		items: items,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
		groupBy: (item) => item.type,
	});

	const onOpenChange = () => {
		setItems(data);
	};

	const onInputValueChange: ComboboxRootProps['onInputValueChange'] = (event) => {
		const filtered = data.filter((item) => item.value.toLowerCase().includes(event.inputValue.toLowerCase()));
		if (filtered.length > 0) {
			setItems(filtered);
		} else {
			setItems(data);
		}
	};

	return (
		<Combobox
			className="w-full max-w-md"
			placeholder="Search..."
			collection={collection}
			onOpenChange={onOpenChange}
			onInputValueChange={onInputValueChange}
		>
			<Combobox.Control>
				<Combobox.Input />
				<Combobox.Trigger />
			</Combobox.Control>
			<Portal>
				<Combobox.Positioner className="z-[1]!">
					<Combobox.Content>
						{collection.group().map(([type, items]) => (
							<Combobox.ItemGroup key={type}>
								<Combobox.ItemGroupLabel>{type}</Combobox.ItemGroupLabel>
								{items.map((item) => (
									<Combobox.Item key={item.value} item={item}>
										<Combobox.ItemText>{item.label}</Combobox.ItemText>
										<Combobox.ItemIndicator />
									</Combobox.Item>
								))}
							</Combobox.ItemGroup>
						))}
					</Combobox.Content>
				</Combobox.Positioner>
			</Portal>
		</Combobox>
	);
}

```

## Auto Highlight

Search for any option, then tap Enter on your keyboard to automatically select it.

```tsx
import { Combobox, Portal, type ComboboxRootProps, useListCollection } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

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

export default function AutoHighlight() {
	const [items, setItems] = useState(data);

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

	const onOpenChange = () => {
		setItems(data);
	};

	const onInputValueChange: ComboboxRootProps['onInputValueChange'] = (event) => {
		const filtered = data.filter((item) => item.value.toLowerCase().includes(event.inputValue.toLowerCase()));
		if (filtered.length > 0) {
			setItems(filtered);
		} else {
			setItems(data);
		}
	};

	return (
		<Combobox
			className="w-full max-w-md"
			placeholder="Search..."
			collection={collection}
			onOpenChange={onOpenChange}
			onInputValueChange={onInputValueChange}
			inputBehavior="autohighlight"
		>
			<Combobox.Control>
				<Combobox.Input />
				<Combobox.Trigger />
			</Combobox.Control>
			<Portal>
				<Combobox.Positioner className="z-[1]!">
					<Combobox.Content>
						{items.map((item) => (
							<Combobox.Item key={item.value} item={item}>
								<Combobox.ItemText>{item.label}</Combobox.ItemText>
								<Combobox.ItemIndicator />
							</Combobox.Item>
						))}
					</Combobox.Content>
				</Combobox.Positioner>
			</Portal>
		</Combobox>
	);
}

```

## Multiple

To maintain filtering functionality and improve clarity for users, we recommend displaying each selected value outside the perimeter of the Combobox component.

```tsx
import { Combobox, Portal, type ComboboxRootProps, useListCollection } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

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

export default function Default() {
	const [value, setValue] = useState<string[]>([]);
	const [items, setItems] = useState(data);

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

	const onOpenChange = () => {
		setItems(data);
	};

	const onInputValueChange: ComboboxRootProps['onInputValueChange'] = (event) => {
		const filtered = data.filter((item) => item.value.toLowerCase().includes(event.inputValue.toLowerCase()));
		if (filtered.length > 0) {
			setItems(filtered);
		} else {
			setItems(data);
		}
	};

	const onValueChange: ComboboxRootProps['onValueChange'] = (event) => {
		setValue(event.value);
	};

	return (
		<div className="grid gap-2 w-full max-w-md">
			<Combobox
				placeholder="Search..."
				collection={collection}
				onOpenChange={onOpenChange}
				onInputValueChange={onInputValueChange}
				multiple={true}
				value={value}
				onValueChange={onValueChange}
			>
				<Combobox.Control>
					<Combobox.Input />
					<Combobox.Trigger />
				</Combobox.Control>
				<Portal>
					<Combobox.Positioner className="z-[1]!">
						<Combobox.Content>
							{items.map((item) => (
								<Combobox.Item key={item.value} item={item}>
									<Combobox.ItemText>{item.label}</Combobox.ItemText>
									<Combobox.ItemIndicator />
								</Combobox.Item>
							))}
						</Combobox.Content>
					</Combobox.Positioner>
				</Portal>
			</Combobox>
			<div className="flex flex-wrap gap-2">
				{value.map((item) => (
					<span key={item} className="badge preset-filled">
						{item}
					</span>
				))}
			</div>
		</div>
	);
}

```

## Disabled Item

```tsx
import { Combobox, Portal, type ComboboxRootProps, useListCollection } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

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

export default function Default() {
	const [items, setItems] = useState(data);

	const collection = useListCollection({
		items: items,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
		isItemDisabled: (item) => item.value === 'banana',
	});

	const onOpenChange = () => {
		setItems(data);
	};

	const onInputValueChange: ComboboxRootProps['onInputValueChange'] = (event) => {
		const filtered = data.filter((item) => item.value.toLowerCase().includes(event.inputValue.toLowerCase()));
		if (filtered.length > 0) {
			setItems(filtered);
		} else {
			setItems(data);
		}
	};

	return (
		<Combobox
			className="w-full max-w-md"
			placeholder="Search..."
			collection={collection}
			onOpenChange={onOpenChange}
			onInputValueChange={onInputValueChange}
		>
			<Combobox.Control>
				<Combobox.Input />
				<Combobox.Trigger />
			</Combobox.Control>
			<Portal>
				<Combobox.Positioner className="z-[1]!">
					<Combobox.Content>
						{items.map((item) => (
							<Combobox.Item key={item.value} item={item}>
								<Combobox.ItemText>{item.label}</Combobox.ItemText>
								<Combobox.ItemIndicator />
							</Combobox.Item>
						))}
					</Combobox.Content>
				</Combobox.Positioner>
			</Portal>
		</Combobox>
	);
}

```

## Custom Filter

Try mistyping `apple` or `banana` to see the custom filter using the fuzzy search from [Fuse.js](https://fusejs.io/) in action.

```tsx
import { Combobox, Portal, type ComboboxRootProps, useListCollection } from '@skeletonlabs/skeleton-react';
import Fuse from 'fuse.js';
import { useState } from 'react';

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

const fuse = new Fuse(data, {
	keys: ['label', 'value'],
	threshold: 0.3,
});

export default function Default() {
	const [items, setItems] = useState(data);

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

	const onOpenChange = () => {
		setItems(data);
	};

	const onInputValueChange: ComboboxRootProps['onInputValueChange'] = (event) => {
		const results = fuse.search(event.inputValue);
		if (results.length > 0) {
			setItems(results.map((result) => result.item));
		} else {
			setItems(data);
		}
	};

	return (
		<Combobox
			className="w-full max-w-md"
			placeholder="Search..."
			collection={collection}
			onOpenChange={onOpenChange}
			onInputValueChange={onInputValueChange}
		>
			<Combobox.Control>
				<Combobox.Input />
				<Combobox.Trigger />
			</Combobox.Control>
			<Portal>
				<Combobox.Positioner className="z-[1]!">
					<Combobox.Content>
						{items.map((item) => (
							<Combobox.Item key={item.value} item={item}>
								<Combobox.ItemText>{item.label}</Combobox.ItemText>
								<Combobox.ItemIndicator />
							</Combobox.Item>
						))}
					</Combobox.Content>
				</Combobox.Positioner>
			</Portal>
		</Combobox>
	);
}

```

## Direction

```tsx
import { Combobox, Portal, type ComboboxRootProps, useListCollection } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

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

export default function Dir() {
	const [items, setItems] = useState(data);

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

	const onOpenChange = () => {
		setItems(data);
	};

	const onInputValueChange: ComboboxRootProps['onInputValueChange'] = (event) => {
		const filtered = data.filter((item) => item.value.toLowerCase().includes(event.inputValue.toLowerCase()));
		if (filtered.length > 0) {
			setItems(filtered);
		} else {
			setItems(data);
		}
	};

	return (
		<Combobox
			className="w-full max-w-md"
			placeholder="Search..."
			collection={collection}
			onOpenChange={onOpenChange}
			onInputValueChange={onInputValueChange}
			dir="rtl"
		>
			<Combobox.Label>Label</Combobox.Label>
			<Combobox.Control>
				<Combobox.Input />
				<Combobox.Trigger />
			</Combobox.Control>
			<Portal>
				<Combobox.Positioner className="z-[1]!">
					<Combobox.Content>
						{items.map((item) => (
							<Combobox.Item key={item.value} item={item}>
								<Combobox.ItemText>{item.label}</Combobox.ItemText>
								<Combobox.ItemIndicator />
							</Combobox.Item>
						))}
					</Combobox.Content>
				</Combobox.Positioner>
			</Portal>
		</Combobox>
	);
}

```

## Guidelines

### Z-Index

By default we do not take an opinionated stance regarding z-index stacking. The result is the component can sometimes be occluded beneath other elements with a higher index. The Z-Index can controlled by applying a utility class to the Positioner component part.

```astro
<Combobox.Positioner class="z-50" />
```

### Max Items

We recommend no more than 500 items max. For normal usage, a few dozen will provide the best performance.

## API Reference

### Root

| Prop                    | Description                                                                                                                                                                                                                                              | Type                                                                                                                                                                                                                                                                                                                           | Default                        |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ |
| open                    | The controlled open state of the combobox                                                                                                                                                                                                                | boolean \| undefined                                                                                                                                                                                                                                                                                                           | -                              |
| defaultOpen             | The initial open state of the combobox when rendered.&#xA;Use when you don't need to control the open state of the combobox.                                                                                                                             | boolean \| undefined                                                                                                                                                                                                                                                                                                           | -                              |
| ids                     | The ids of the elements in the combobox. Useful for composition.                                                                                                                                                                                         | Partial\<\{ root: string; label: string; control: string; input: string; content: string; trigger: string; clearTrigger: string; item: (id: string, index?: number \| undefined) => string; positioner: string; itemGroup: (id: string \| number) => string; itemGroupLabel: (id: string \| number) => string; }> \| undefined | -                              |
| inputValue              | The controlled value of the combobox's input                                                                                                                                                                                                             | string \| undefined                                                                                                                                                                                                                                                                                                            | -                              |
| defaultInputValue       | The initial value of the combobox's input when rendered.&#xA;Use when you don't need to control the value of the combobox's input.                                                                                                                       | string \| undefined                                                                                                                                                                                                                                                                                                            | ""                             |
| name                    | The \`name\` attribute of the combobox's input. Useful for form submission                                                                                                                                                                               | string \| undefined                                                                                                                                                                                                                                                                                                            | -                              |
| form                    | The associate form of the combobox.                                                                                                                                                                                                                      | string \| undefined                                                                                                                                                                                                                                                                                                            | -                              |
| disabled                | Whether the combobox is disabled                                                                                                                                                                                                                         | boolean \| undefined                                                                                                                                                                                                                                                                                                           | -                              |
| readOnly                | Whether the combobox is readonly. This puts the combobox in a "non-editable" mode&#xA;but the user can still interact with it                                                                                                                            | boolean \| undefined                                                                                                                                                                                                                                                                                                           | -                              |
| invalid                 | Whether the combobox is invalid                                                                                                                                                                                                                          | boolean \| undefined                                                                                                                                                                                                                                                                                                           | -                              |
| required                | Whether the combobox is required                                                                                                                                                                                                                         | boolean \| undefined                                                                                                                                                                                                                                                                                                           | -                              |
| placeholder             | The placeholder text of the combobox's input                                                                                                                                                                                                             | string \| undefined                                                                                                                                                                                                                                                                                                            | -                              |
| defaultHighlightedValue | The initial highlighted value of the combobox when rendered.&#xA;Use when you don't need to control the highlighted value of the combobox.                                                                                                               | string \| null \| undefined                                                                                                                                                                                                                                                                                                    | -                              |
| highlightedValue        | The controlled highlighted value of the combobox                                                                                                                                                                                                         | string \| null \| undefined                                                                                                                                                                                                                                                                                                    | -                              |
| value                   | The controlled value of the combobox's selected items                                                                                                                                                                                                    | string\[] \| undefined                                                                                                                                                                                                                                                                                                         | -                              |
| defaultValue            | The initial value of the combobox's selected items when rendered.&#xA;Use when you don't need to control the value of the combobox's selected items.                                                                                                     | string\[] \| undefined                                                                                                                                                                                                                                                                                                         | \[]                            |
| inputBehavior           | Defines the auto-completion behavior of the combobox.&#xA;&#xA;- \`autohighlight\`: The first focused item is highlighted as the user types&#xA;- \`autocomplete\`: Navigating the listbox with the arrow keys selects the item and the input is updated | "autohighlight" \| "autocomplete" \| "none" \| undefined                                                                                                                                                                                                                                                                       | "none"                         |
| selectionBehavior       | The behavior of the combobox input when an item is selected&#xA;&#xA;- \`replace\`: The selected item string is set as the input value&#xA;- \`clear\`: The input value is cleared&#xA;- \`preserve\`: The input value is preserved                      | "clear" \| "replace" \| "preserve" \| undefined                                                                                                                                                                                                                                                                                | "replace"                      |
| autoFocus               | Whether to autofocus the input on mount                                                                                                                                                                                                                  | boolean \| undefined                                                                                                                                                                                                                                                                                                           | -                              |
| openOnClick             | Whether to open the combobox popup on initial click on the input                                                                                                                                                                                         | boolean \| undefined                                                                                                                                                                                                                                                                                                           | false                          |
| openOnChange            | Whether to show the combobox when the input value changes                                                                                                                                                                                                | boolean \| ((details: InputValueChangeDetails) => boolean) \| undefined                                                                                                                                                                                                                                                        | true                           |
| allowCustomValue        | Whether to allow typing custom values in the input                                                                                                                                                                                                       | boolean \| undefined                                                                                                                                                                                                                                                                                                           | -                              |
| alwaysSubmitOnEnter     | Whether to always submit on Enter key press, even if popup is open.&#xA;Useful for single-field autocomplete forms where Enter should submit the form.                                                                                                   | boolean \| undefined                                                                                                                                                                                                                                                                                                           | false                          |
| loopFocus               | Whether to loop the keyboard navigation through the items                                                                                                                                                                                                | boolean \| undefined                                                                                                                                                                                                                                                                                                           | true                           |
| positioning             | The positioning options to dynamically position the menu                                                                                                                                                                                                 | PositioningOptions \| undefined                                                                                                                                                                                                                                                                                                | \{ placement: "bottom-start" } |
| onInputValueChange      | Function called when the input's value changes                                                                                                                                                                                                           | ((details: InputValueChangeDetails) => void) \| undefined                                                                                                                                                                                                                                                                      | -                              |
| onValueChange           | Function called when a new item is selected                                                                                                                                                                                                              | ((details: ValueChangeDetails\<any>) => void) \| undefined                                                                                                                                                                                                                                                                     | -                              |
| onHighlightChange       | Function called when an item is highlighted using the pointer&#xA;or keyboard navigation.                                                                                                                                                                | ((details: HighlightChangeDetails\<any>) => void) \| undefined                                                                                                                                                                                                                                                                 | -                              |
| onSelect                | Function called when an item is selected                                                                                                                                                                                                                 | ((details: SelectionDetails) => void) \| undefined                                                                                                                                                                                                                                                                             | -                              |
| onOpenChange            | Function called when the popup is opened                                                                                                                                                                                                                 | ((details: OpenChangeDetails) => void) \| undefined                                                                                                                                                                                                                                                                            | -                              |
| translations            | Specifies the localized strings that identifies the accessibility elements and their states                                                                                                                                                              | IntlTranslations \| undefined                                                                                                                                                                                                                                                                                                  | -                              |
| collection              | The collection of items                                                                                                                                                                                                                                  | ListCollection\<any> \| undefined                                                                                                                                                                                                                                                                                              | -                              |
| multiple                | Whether to allow multiple selection.&#xA;&#xA;\*\*Good to know:\*\* When \`multiple\` is \`true\`, the \`selectionBehavior\` is automatically set to \`clear\`.&#xA;It is recommended to render the selected items in a separate container.              | boolean \| undefined                                                                                                                                                                                                                                                                                                           | -                              |
| closeOnSelect           | Whether to close the combobox when an item is selected.                                                                                                                                                                                                  | boolean \| undefined                                                                                                                                                                                                                                                                                                           | -                              |
| openOnKeyPress          | Whether to open the combobox on arrow key press                                                                                                                                                                                                          | boolean \| undefined                                                                                                                                                                                                                                                                                                           | true                           |
| scrollToIndexFn         | Function to scroll to a specific index                                                                                                                                                                                                                   | ((details: ScrollToIndexDetails) => void) \| undefined                                                                                                                                                                                                                                                                         | -                              |
| composite               | Whether the combobox is a composed with other composite widgets like tabs                                                                                                                                                                                | boolean \| undefined                                                                                                                                                                                                                                                                                                           | true                           |
| disableLayer            | Whether to disable registering this a dismissable layer                                                                                                                                                                                                  | boolean \| undefined                                                                                                                                                                                                                                                                                                           | -                              |
| navigate                | Function to navigate to the selected item                                                                                                                                                                                                                | ((details: NavigateDetails) => void) \| null \| undefined                                                                                                                                                                                                                                                                      | -                              |
| dir                     | The document's text/writing direction.                                                                                                                                                                                                                   | "ltr" \| "rtl" \| undefined                                                                                                                                                                                                                                                                                                    | "ltr"                          |
| getRootNode             | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                                                                                                                                               | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                                                                                                                                                                                            | -                              |
| onPointerDownOutside    | Function called when the pointer is pressed down outside the component                                                                                                                                                                                   | ((event: PointerDownOutsideEvent) => void) \| undefined                                                                                                                                                                                                                                                                        | -                              |
| onFocusOutside          | Function called when the focus is moved outside the component                                                                                                                                                                                            | ((event: FocusOutsideEvent) => void) \| undefined                                                                                                                                                                                                                                                                              | -                              |
| onInteractOutside       | Function called when an interaction happens outside the component                                                                                                                                                                                        | ((event: InteractOutsideEvent) => void) \| undefined                                                                                                                                                                                                                                                                           | -                              |
| element                 | Render the element yourself                                                                                                                                                                                                                              | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                                                                                                                                                                                                 | -                              |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | ComboboxApi\<PropTypes, any>                                   | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                                  | Default |
| -------- | ----------- | ----------------------------------------------------- | ------- |
| children | -           | (combobox: ComboboxApi\<PropTypes, any>) => ReactNode | -       |

### Label

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | -       |

### Control

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Input

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | -       |

### Trigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### Positioner

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Content

| Prop    | Description                 | Type                                                          | Default |
| ------- | --------------------------- | ------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"ul">) => Element) \| undefined | -       |

### ItemGroup

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### ItemGroupLabel

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Item

| Prop         | Description                                                 | Type                                                          | Default |
| ------------ | ----------------------------------------------------------- | ------------------------------------------------------------- | ------- |
| persistFocus | Whether hovering outside should clear the highlighted state | boolean \| undefined                                          | -       |
| item         | The item to render                                          | any                                                           | -       |
| element      | Render the element yourself                                 | ((attributes: HTMLAttributes\<"li">) => Element) \| undefined | -       |

### ItemText

| Prop    | Description                 | Type                                                            | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | -       |

### ItemIndicator

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

# Date Picker

Select dates from a calendar interface.

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

export default function Default() {
	return (
		<DatePicker>
			<DatePicker.Label>Label</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>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableHead>
												<DatePicker.TableRow>
													{datePicker.weekDays.map((weekDay, id) => (
														<DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>
													))}
												</DatePicker.TableRow>
											</DatePicker.TableHead>
											<DatePicker.TableBody>
												{datePicker.weeks.map((week, id) => (
													<DatePicker.TableRow key={id}>
														{week.map((day, id) => (
															<DatePicker.TableCell key={id} value={day}>
																<DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
						<DatePicker.View view="month">
							<DatePicker.Context>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableBody>
												{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
													<DatePicker.TableRow key={id}>
														{months.map((month, id) => (
															<DatePicker.TableCell key={id} value={month.value}>
																<DatePicker.TableCellTrigger>{month.label}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
						<DatePicker.View view="year">
							<DatePicker.Context>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableBody>
												{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
													<DatePicker.TableRow key={id}>
														{years.map((year, id) => (
															<DatePicker.TableCell key={id} value={year.value}>
																<DatePicker.TableCellTrigger>{year.label}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
					</DatePicker.Content>
				</DatePicker.Positioner>
			</Portal>
		</DatePicker>
	);
}

```

## Controlled

Manage the selected date value with controlled state.

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

export default function Controlled() {
	const [value, setValue] = useState([parseDate('2025-10-15')]);

	return (
		<DatePicker value={value} onValueChange={(e) => setValue(e.value)}>
			<DatePicker.Label>Picked date: {value.at(0)?.toString()}</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>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableHead>
												<DatePicker.TableRow>
													{datePicker.weekDays.map((weekDay, id) => (
														<DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>
													))}
												</DatePicker.TableRow>
											</DatePicker.TableHead>
											<DatePicker.TableBody>
												{datePicker.weeks.map((week, id) => (
													<DatePicker.TableRow key={id}>
														{week.map((day, id) => (
															<DatePicker.TableCell key={id} value={day}>
																<DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
						<DatePicker.View view="month">
							<DatePicker.Context>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableBody>
												{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
													<DatePicker.TableRow key={id}>
														{months.map((month, id) => (
															<DatePicker.TableCell key={id} value={month.value}>
																<DatePicker.TableCellTrigger>{month.label}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
						<DatePicker.View view="year">
							<DatePicker.Context>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableBody>
												{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
													<DatePicker.TableRow key={id}>
														{years.map((year, id) => (
															<DatePicker.TableCell key={id} value={year.value}>
																<DatePicker.TableCellTrigger>{year.label}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
					</DatePicker.Content>
				</DatePicker.Positioner>
			</Portal>
		</DatePicker>
	);
}

```

## Disabled

Disable the date picker to prevent user interaction.

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

export default function Disabled() {
	return (
		<DatePicker disabled>
			<DatePicker.Label>Label</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>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableHead>
												<DatePicker.TableRow>
													{datePicker.weekDays.map((weekDay, id) => (
														<DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>
													))}
												</DatePicker.TableRow>
											</DatePicker.TableHead>
											<DatePicker.TableBody>
												{datePicker.weeks.map((week, id) => (
													<DatePicker.TableRow key={id}>
														{week.map((day, id) => (
															<DatePicker.TableCell key={id} value={day}>
																<DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
						<DatePicker.View view="month">
							<DatePicker.Context>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableBody>
												{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
													<DatePicker.TableRow key={id}>
														{months.map((month, id) => (
															<DatePicker.TableCell key={id} value={month.value}>
																<DatePicker.TableCellTrigger>{month.label}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
						<DatePicker.View view="year">
							<DatePicker.Context>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableBody>
												{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
													<DatePicker.TableRow key={id}>
														{years.map((year, id) => (
															<DatePicker.TableCell key={id} value={year.value}>
																<DatePicker.TableCellTrigger>{year.label}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
					</DatePicker.Content>
				</DatePicker.Positioner>
			</Portal>
		</DatePicker>
	);
}

```

## Minimum and Maximum

Restrict date selection to a specific range using the `min` and `max` props with the `parseDate` helper function.

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

export default function MinMax() {
	return (
		<DatePicker min={parseDate('2024-01-01')} max={parseDate('2024-12-31')}>
			<DatePicker.Label>Label</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>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableHead>
												<DatePicker.TableRow>
													{datePicker.weekDays.map((weekDay, id) => (
														<DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>
													))}
												</DatePicker.TableRow>
											</DatePicker.TableHead>
											<DatePicker.TableBody>
												{datePicker.weeks.map((week, id) => (
													<DatePicker.TableRow key={id}>
														{week.map((day, id) => (
															<DatePicker.TableCell key={id} value={day}>
																<DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
						<DatePicker.View view="month">
							<DatePicker.Context>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableBody>
												{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
													<DatePicker.TableRow key={id}>
														{months.map((month, id) => (
															<DatePicker.TableCell key={id} value={month.value}>
																<DatePicker.TableCellTrigger>{month.label}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
						<DatePicker.View view="year">
							<DatePicker.Context>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableBody>
												{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
													<DatePicker.TableRow key={id}>
														{years.map((year, id) => (
															<DatePicker.TableCell key={id} value={year.value}>
																<DatePicker.TableCellTrigger>{year.label}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
					</DatePicker.Content>
				</DatePicker.Positioner>
			</Portal>
		</DatePicker>
	);
}

```

## Range Selection

Enable range selection by setting `selectionMode="range"` on the root component. Pair with two inputs fields:

* `index={0}` to represent the start dates.
* `index={1}` to represent the end dates.

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

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

```

## Inline calendar

Display the calendar inline without a popover by adding the `inline` prop to the root component. When using inline mode, omit the `Portal` and `Positioner` components.

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

export default function Inline() {
	return (
		<DatePicker inline>
			<DatePicker.Label>Label</DatePicker.Label>
			<DatePicker.Content>
				<DatePicker.View view="day">
					<DatePicker.Context>
						{(datePicker) => (
							<>
								<DatePicker.ViewControl>
									<DatePicker.PrevTrigger />
									<DatePicker.ViewTrigger>
										<DatePicker.RangeText />
									</DatePicker.ViewTrigger>
									<DatePicker.NextTrigger />
								</DatePicker.ViewControl>
								<DatePicker.Table>
									<DatePicker.TableHead>
										<DatePicker.TableRow>
											{datePicker.weekDays.map((weekDay, id) => (
												<DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>
											))}
										</DatePicker.TableRow>
									</DatePicker.TableHead>
									<DatePicker.TableBody>
										{datePicker.weeks.map((week, id) => (
											<DatePicker.TableRow key={id}>
												{week.map((day, id) => (
													<DatePicker.TableCell key={id} value={day}>
														<DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
													</DatePicker.TableCell>
												))}
											</DatePicker.TableRow>
										))}
									</DatePicker.TableBody>
								</DatePicker.Table>
							</>
						)}
					</DatePicker.Context>
				</DatePicker.View>
				<DatePicker.View view="month">
					<DatePicker.Context>
						{(datePicker) => (
							<>
								<DatePicker.ViewControl>
									<DatePicker.PrevTrigger />
									<DatePicker.ViewTrigger>
										<DatePicker.RangeText />
									</DatePicker.ViewTrigger>
									<DatePicker.NextTrigger />
								</DatePicker.ViewControl>
								<DatePicker.Table>
									<DatePicker.TableBody>
										{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
											<DatePicker.TableRow key={id}>
												{months.map((month, id) => (
													<DatePicker.TableCell key={id} value={month.value}>
														<DatePicker.TableCellTrigger>{month.label}</DatePicker.TableCellTrigger>
													</DatePicker.TableCell>
												))}
											</DatePicker.TableRow>
										))}
									</DatePicker.TableBody>
								</DatePicker.Table>
							</>
						)}
					</DatePicker.Context>
				</DatePicker.View>
				<DatePicker.View view="year">
					<DatePicker.Context>
						{(datePicker) => (
							<>
								<DatePicker.ViewControl>
									<DatePicker.PrevTrigger />
									<DatePicker.ViewTrigger>
										<DatePicker.RangeText />
									</DatePicker.ViewTrigger>
									<DatePicker.NextTrigger />
								</DatePicker.ViewControl>
								<DatePicker.Table>
									<DatePicker.TableBody>
										{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
											<DatePicker.TableRow key={id}>
												{years.map((year, id) => (
													<DatePicker.TableCell key={id} value={year.value}>
														<DatePicker.TableCellTrigger>{year.label}</DatePicker.TableCellTrigger>
													</DatePicker.TableCell>
												))}
											</DatePicker.TableRow>
										))}
									</DatePicker.TableBody>
								</DatePicker.Table>
							</>
						)}
					</DatePicker.Context>
				</DatePicker.View>
			</DatePicker.Content>
		</DatePicker>
	);
}

```

## Month and Year Selection

Add `MonthSelect` and `YearSelect` components to provide selectors for quickly changing the month and year.

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

export default function WithSelects() {
	return (
		<DatePicker>
			<DatePicker.Label>Label</DatePicker.Label>
			<DatePicker.Control>
				<DatePicker.Input placeholder="mm/dd/yyyy" />
				<DatePicker.Trigger />
			</DatePicker.Control>
			<Portal>
				<DatePicker.Positioner>
					<DatePicker.Content>
						<DatePicker.YearSelect />
						<DatePicker.MonthSelect />
						<DatePicker.View view="day">
							<DatePicker.Context>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger disabled>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableHead>
												<DatePicker.TableRow>
													{datePicker.weekDays.map((weekDay, id) => (
														<DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>
													))}
												</DatePicker.TableRow>
											</DatePicker.TableHead>
											<DatePicker.TableBody>
												{datePicker.weeks.map((week, id) => (
													<DatePicker.TableRow key={id}>
														{week.map((day, id) => (
															<DatePicker.TableCell key={id} value={day}>
																<DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
						<DatePicker.View view="month">
							<DatePicker.Context>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableBody>
												{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
													<DatePicker.TableRow key={id}>
														{months.map((month, id) => (
															<DatePicker.TableCell key={id} value={month.value}>
																<DatePicker.TableCellTrigger>{month.label}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
						<DatePicker.View view="year">
							<DatePicker.Context>
								{(datePicker) => (
									<>
										<DatePicker.ViewControl>
											<DatePicker.PrevTrigger />
											<DatePicker.ViewTrigger>
												<DatePicker.RangeText />
											</DatePicker.ViewTrigger>
											<DatePicker.NextTrigger />
										</DatePicker.ViewControl>
										<DatePicker.Table>
											<DatePicker.TableBody>
												{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
													<DatePicker.TableRow key={id}>
														{years.map((year, id) => (
															<DatePicker.TableCell key={id} value={year.value}>
																<DatePicker.TableCellTrigger>{year.label}</DatePicker.TableCellTrigger>
															</DatePicker.TableCell>
														))}
													</DatePicker.TableRow>
												))}
											</DatePicker.TableBody>
										</DatePicker.Table>
									</>
								)}
							</DatePicker.Context>
						</DatePicker.View>
					</DatePicker.Content>
				</DatePicker.Positioner>
			</Portal>
		</DatePicker>
	);
}

```

## API Reference

### Root

| Prop                 | Description                                                                                                                                                                                 | Type                                                                                                                                                                                                                                                      | Default  |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| locale               | The locale (BCP 47 language tag) to use when formatting the date.                                                                                                                           | string \| undefined                                                                                                                                                                                                                                       | "en-US"  |
| translations         | The localized messages to use.                                                                                                                                                              | IntlTranslations \| undefined                                                                                                                                                                                                                             | -        |
| ids                  | The ids of the elements in the date picker. Useful for composition.                                                                                                                         | Partial\<\{ root: string; label: (index: number) => string; table: (id: string) => string; tableHeader: (id: string) => string; tableBody: (id: string) => string; tableRow: (id: string) => string; ... 11 more ...; positioner: string; }> \| undefined | -        |
| name                 | The \`name\` attribute of the input element.                                                                                                                                                | string \| undefined                                                                                                                                                                                                                                       | -        |
| timeZone             | The time zone to use                                                                                                                                                                        | string \| undefined                                                                                                                                                                                                                                       | "UTC"    |
| disabled             | Whether the calendar is disabled.                                                                                                                                                           | boolean \| undefined                                                                                                                                                                                                                                      | -        |
| readOnly             | Whether the calendar is read-only.                                                                                                                                                          | boolean \| undefined                                                                                                                                                                                                                                      | -        |
| outsideDaySelectable | Whether day outside the visible range can be selected.                                                                                                                                      | boolean \| undefined                                                                                                                                                                                                                                      | false    |
| min                  | The minimum date that can be selected.                                                                                                                                                      | DateValue \| undefined                                                                                                                                                                                                                                    | -        |
| max                  | The maximum date that can be selected.                                                                                                                                                      | DateValue \| undefined                                                                                                                                                                                                                                    | -        |
| closeOnSelect        | Whether the calendar should close after the date selection is complete.&#xA;This is ignored when the selection mode is \`multiple\`.                                                        | boolean \| undefined                                                                                                                                                                                                                                      | true     |
| value                | The controlled selected date(s).                                                                                                                                                            | DateValue\[] \| undefined                                                                                                                                                                                                                                 | -        |
| defaultValue         | The initial selected date(s) when rendered.&#xA;Use when you don't need to control the selected date(s) of the date picker.                                                                 | DateValue\[] \| undefined                                                                                                                                                                                                                                 | -        |
| focusedValue         | The controlled focused date.                                                                                                                                                                | DateValue \| undefined                                                                                                                                                                                                                                    | -        |
| defaultFocusedValue  | The initial focused date when rendered.&#xA;Use when you don't need to control the focused date of the date picker.                                                                         | DateValue \| undefined                                                                                                                                                                                                                                    | -        |
| numOfMonths          | The number of months to display.                                                                                                                                                            | number \| undefined                                                                                                                                                                                                                                       | -        |
| startOfWeek          | The first day of the week.&#xA; \`0\` - Sunday&#xA; \`1\` - Monday&#xA; \`2\` - Tuesday&#xA; \`3\` - Wednesday&#xA; \`4\` - Thursday&#xA; \`5\` - Friday&#xA; \`6\` - Saturday              | number \| undefined                                                                                                                                                                                                                                       | -        |
| fixedWeeks           | Whether the calendar should have a fixed number of weeks.&#xA;This renders the calendar with 6 weeks instead of 5 or 6.                                                                     | boolean \| undefined                                                                                                                                                                                                                                      | -        |
| onValueChange        | Function called when the value changes.                                                                                                                                                     | ((details: ValueChangeDetails) => void) \| undefined                                                                                                                                                                                                      | -        |
| onFocusChange        | Function called when the focused date changes.                                                                                                                                              | ((details: FocusChangeDetails) => void) \| undefined                                                                                                                                                                                                      | -        |
| onViewChange         | Function called when the view changes.                                                                                                                                                      | ((details: ViewChangeDetails) => void) \| undefined                                                                                                                                                                                                       | -        |
| onOpenChange         | Function called when the calendar opens or closes.                                                                                                                                          | ((details: OpenChangeDetails) => void) \| undefined                                                                                                                                                                                                       | -        |
| isDateUnavailable    | Returns whether a date of the calendar is available.                                                                                                                                        | ((date: DateValue, locale: string) => boolean) \| undefined                                                                                                                                                                                               | -        |
| selectionMode        | The selection mode of the calendar.&#xA;- \`single\` - only one date can be selected&#xA;- \`multiple\` - multiple dates can be selected&#xA;- \`range\` - a range of dates can be selected | SelectionMode \| undefined                                                                                                                                                                                                                                | "single" |
| format               | The format of the date to display in the input.                                                                                                                                             | ((date: DateValue, details: LocaleDetails) => string) \| undefined                                                                                                                                                                                        | -        |
| parse                | Function to parse the date from the input back to a DateValue.                                                                                                                              | ((value: string, details: LocaleDetails) => DateValue \| undefined) \| undefined                                                                                                                                                                          | -        |
| placeholder          | The placeholder text to display in the input.                                                                                                                                               | string \| undefined                                                                                                                                                                                                                                       | -        |
| view                 | The view of the calendar                                                                                                                                                                    | DateView \| undefined                                                                                                                                                                                                                                     | -        |
| defaultView          | The default view of the calendar                                                                                                                                                            | DateView \| undefined                                                                                                                                                                                                                                     | "day"    |
| minView              | The minimum view of the calendar                                                                                                                                                            | DateView \| undefined                                                                                                                                                                                                                                     | "day"    |
| maxView              | The maximum view of the calendar                                                                                                                                                            | DateView \| undefined                                                                                                                                                                                                                                     | "year"   |
| positioning          | The user provided options used to position the date picker content                                                                                                                          | PositioningOptions \| undefined                                                                                                                                                                                                                           | -        |
| open                 | The controlled open state of the date picker                                                                                                                                                | boolean \| undefined                                                                                                                                                                                                                                      | -        |
| defaultOpen          | The initial open state of the date picker when rendered.&#xA;Use when you don't need to control the open state of the date picker.                                                          | boolean \| undefined                                                                                                                                                                                                                                      | -        |
| inline               | Whether to render the date picker inline                                                                                                                                                    | boolean \| undefined                                                                                                                                                                                                                                      | -        |
| dir                  | The document's text/writing direction.                                                                                                                                                      | "ltr" \| "rtl" \| undefined                                                                                                                                                                                                                               | "ltr"    |
| getRootNode          | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                                                                                  | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                                                                                                                       | -        |
| element              | Render the element yourself                                                                                                                                                                 | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                                                                                                                            | -        |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | DatePickerApi\<PropTypes>                                      | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                                 | Default |
| -------- | ----------- | ---------------------------------------------------- | ------- |
| children | -           | (datePicker: DatePickerApi\<PropTypes>) => ReactNode | -       |

### Label

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | -       |

### Control

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### PresetTrigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| value   | -                           | PresetTriggerValue                                                | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### Input

| Prop      | Description                             | Type                                                             | Default |
| --------- | --------------------------------------- | ---------------------------------------------------------------- | ------- |
| index     | The index of the input to focus.        | number \| undefined                                              | -       |
| fixOnBlur | Whether to fix the input value on blur. | boolean \| undefined                                             | true    |
| element   | Render the element yourself             | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | -       |

### Trigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### Positioner

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Content

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### YearSelect

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"select">) => Element) \| undefined | -       |

### MonthSelect

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"select">) => Element) \| undefined | -       |

### View

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| view    | -                           | DateView \| undefined                                          | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### ViewControl

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### PrevTrigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### ViewTrigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### RangeText

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### NextTrigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### Table

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"table">) => Element) \| undefined | -       |

### TableHead

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"thead">) => Element) \| undefined | -       |

### TableRow

| Prop    | Description                 | Type                                                          | Default |
| ------- | --------------------------- | ------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"tr">) => Element) \| undefined | -       |

### TableHeader

| Prop    | Description                 | Type                                                          | Default |
| ------- | --------------------------- | ------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"th">) => Element) \| undefined | -       |

### TableBody

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"tbody">) => Element) \| undefined | -       |

### TableCell

| Prop         | Description                 | Type                                                          | Default |
| ------------ | --------------------------- | ------------------------------------------------------------- | ------- |
| disabled     | -                           | boolean \| undefined                                          | -       |
| value        | -                           | number \| DateValue                                           | -       |
| columns      | -                           | number \| undefined                                           | -       |
| visibleRange | -                           | VisibleRange \| undefined                                     | -       |
| element      | Render the element yourself | ((attributes: HTMLAttributes\<"td">) => Element) \| undefined | -       |

### TableCellTrigger

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

# Dialog

A modal dialog for displaying content and actions.

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

export default function Default() {
	return (
		<Dialog>
			<Dialog.Trigger className="btn preset-filled">Trigger</Dialog.Trigger>
			<Portal>
				<Dialog.Backdrop className="fixed inset-0 z-50 bg-surface-50-950/50" />
				<Dialog.Positioner className="fixed inset-0 z-50 flex justify-center items-center">
					<Dialog.Content className="card bg-surface-100-900 w-md p-4 space-y-2 shadow-xl">
						<Dialog.Title className="text-2xl font-bold">Hello World</Dialog.Title>
						<Dialog.Description>This is an example of a basic dialog.</Dialog.Description>
						<Dialog.CloseTrigger className="btn preset-tonal">Close</Dialog.CloseTrigger>
					</Dialog.Content>
				</Dialog.Positioner>
			</Portal>
		</Dialog>
	);
}

```

## Alert Dialog

The [alertdialog](https://w3c.github.io/aria/#alertdialog) role enables assistive technologies and browsers to distinguish alert dialogs from other dialogs so they have the option of giving alert dialogs special treatment, such as playing a system alert sound.

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

export default function AlertDialog() {
	return (
		<Dialog role="alertdialog">
			<Dialog.Trigger className="btn preset-filled">Trigger</Dialog.Trigger>
			<Portal>
				<Dialog.Backdrop className="fixed inset-0 z-50 bg-error-50-950/50" />
				<Dialog.Positioner className="fixed inset-0 z-50 flex justify-center items-center">
					<Dialog.Content className="card preset-filled-error-500 w-md p-4 space-y-2 shadow-xl">
						<Dialog.Title className="text-2xl font-bold">Alert</Dialog.Title>
						<Dialog.Description>Something important has happened!</Dialog.Description>
						<Dialog.CloseTrigger className="btn preset-tonal-error">Close</Dialog.CloseTrigger>
					</Dialog.Content>
				</Dialog.Positioner>
			</Portal>
		</Dialog>
	);
}

```

## Interaction

If desired, you can disable click to close interactions for the backdrop. We recommend using this sparingly, as this traps the
user in this experience.

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

export default function Interaction() {
	return (
		<Dialog closeOnInteractOutside={false}>
			<Dialog.Trigger className="btn preset-filled">Trigger</Dialog.Trigger>
			<Portal>
				<Dialog.Backdrop className="fixed inset-0 z-50 bg-surface-50-950/50" />
				<Dialog.Positioner className="fixed inset-0 z-50 flex justify-center items-center">
					<Dialog.Content className="card bg-surface-100-900 w-md p-4 space-y-2 shadow-xl">
						<Dialog.Title className="text-2xl font-bold">Dialog Title</Dialog.Title>
						<Dialog.Description>This dialog will only close with the Close button or via programmatic controls.</Dialog.Description>
						<Dialog.CloseTrigger className="btn preset-tonal">Close</Dialog.CloseTrigger>
					</Dialog.Content>
				</Dialog.Positioner>
			</Portal>
		</Dialog>
	);
}

```

## Drawer

This example repurposes the Dialog for use as a side-panel Drawer. It also introduces basic transition animations.

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

export default function Drawer() {
	return (
		<Dialog>
			<Dialog.Trigger className="btn preset-filled">Trigger</Dialog.Trigger>
			<Portal>
				<Dialog.Backdrop className="fixed inset-0 z-50 bg-surface-50-950/50 transition transition-discrete opacity-0 starting:data-[state=open]:opacity-0 data-[state=open]:opacity-100" />
				<Dialog.Positioner className="fixed inset-0 z-50 flex justify-start">
					<Dialog.Content className="h-screen card bg-surface-100-900 w-sm p-4 space-y-4 shadow-xl transition transition-discrete opacity-0 -translate-x-full starting:data-[state=open]:opacity-0 starting:data-[state=open]:-translate-x-full data-[state=open]:opacity-100 data-[state=open]:translate-x-0">
						<header className="flex justify-between items-center">
							<Dialog.Title className="text-2xl font-bold">Drawer Title</Dialog.Title>
							<Dialog.CloseTrigger className="btn-icon preset-tonal">
								<XIcon />
							</Dialog.CloseTrigger>
						</header>
						<p>This is example content for the slide out drawer panel.</p>
					</Dialog.Content>
				</Dialog.Positioner>
			</Portal>
		</Dialog>
	);
}

```

## Z-Index

By default we do not take an opinionated stance regarding z-index stacking. The result is the component can sometimes be occluded beneath other elements with a higher index. The Z-Index can controlled by applying a utility class to the `Positioner` component part.

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

export default function ZIndex() {
	return (
		<Dialog>
			<Dialog.Trigger className="btn preset-filled">Trigger</Dialog.Trigger>
			<Portal>
				<Dialog.Backdrop className="fixed inset-0 z-50 bg-surface-50-950/50" />
				<Dialog.Positioner className="fixed inset-0 z-50 flex justify-center items-center">
					<Dialog.Content className="card bg-surface-100-900 w-md p-4 space-y-2 shadow-xl">
						<Dialog.Title className="text-2xl font-bold">Setting Z-Index</Dialog.Title>
						<Dialog.Description>This dialog will have a z-index value of 50.</Dialog.Description>
						<Dialog.CloseTrigger className="btn preset-tonal">Close</Dialog.CloseTrigger>
					</Dialog.Content>
				</Dialog.Positioner>
			</Portal>
		</Dialog>
	);
}

```

## Direction

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

export default function Dir() {
	return (
		<Dialog dir="rtl">
			<Dialog.Trigger className="btn preset-filled">Trigger</Dialog.Trigger>
			<Portal>
				<Dialog.Backdrop className="fixed inset-0 z-50 bg-surface-50-950/50" />
				<Dialog.Positioner className="fixed inset-0 z-50 flex justify-center items-center">
					<Dialog.Content className="card bg-surface-100-900 w-md p-4 space-y-2 shadow-xl">
						<Dialog.Title className="text-2xl font-bold">Hello World</Dialog.Title>
						<Dialog.Description>This is an example of a basic dialog.</Dialog.Description>
						<Dialog.CloseTrigger className="btn preset-tonal">Close</Dialog.CloseTrigger>
					</Dialog.Content>
				</Dialog.Positioner>
			</Portal>
		</Dialog>
	);
}

```

## Headless

Unlike most components in Skeleton, this feature is provided "headless". This means no default styles are applied out of the box. This ensures you retain full control of all styling.

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

export default function Headless() {
	return (
		<Dialog>
			<Dialog.Trigger>
				<SkullIcon className="size-12" />
			</Dialog.Trigger>
			<Portal>
				<Dialog.Backdrop className="fixed inset-0 z-50 bg-surface-50-950/50" />
				<Dialog.Positioner className="fixed inset-0 z-50 flex justify-center items-center p-4">
					<Dialog.Content>
						<div className="card border border-surface-200/30 bg-surface-50-900/30 backdrop-blur-sm w-full max-w-xl p-4 space-y-4 shadow-xl">
							<header className="flex justify-between items-center">
								<Dialog.Title className="text-2xl font-bold">Hello Skeleton</Dialog.Title>
								<Dialog.CloseTrigger className="btn-icon hover:preset-tonal">✕</Dialog.CloseTrigger>
							</header>
							<img
								className="w-full rounded-container overflow-hidden"
								src="https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExNWVmbzcxanp6YmtxZ28xcXBqaXBscThsdDZ5Nm9ncWxkeWtqaHJ2bSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9dg/dn1PN6NtunfnUjUGFC/giphy.gif"
								alt="Skeleton Gif"
							/>
							<Dialog.Description className="text-center">Three spooky skeletons!</Dialog.Description>
						</div>
					</Dialog.Content>
				</Dialog.Positioner>
			</Portal>
		</Dialog>
	);
}

```

## API Reference

### Root

| Prop                   | Description                                                                                                                    | Type                                                                                                                                                          | Default  |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| children               | -                                                                                                                              | ReactNode                                                                                                                                                     | -        |
| dir                    | The document's text/writing direction.                                                                                         | "ltr" \| "rtl" \| undefined                                                                                                                                   | "ltr"    |
| role                   | The dialog's role                                                                                                              | "dialog" \| "alertdialog" \| undefined                                                                                                                        | "dialog" |
| aria-label             | Human readable label for the dialog, in event the dialog title is not rendered                                                 | string \| undefined                                                                                                                                           | -        |
| ids                    | The ids of the elements in the dialog. Useful for composition.                                                                 | Partial\<\{ trigger: string; positioner: string; backdrop: string; content: string; closeTrigger: string; title: string; description: string; }> \| undefined | -        |
| trapFocus              | Whether to trap focus inside the dialog when it's opened                                                                       | boolean \| undefined                                                                                                                                          | true     |
| preventScroll          | Whether to prevent scrolling behind the dialog when it's opened                                                                | boolean \| undefined                                                                                                                                          | true     |
| modal                  | Whether to prevent pointer interaction outside the element and hide all content below it                                       | boolean \| undefined                                                                                                                                          | true     |
| initialFocusEl         | Element to receive focus when the dialog is opened                                                                             | (() => MaybeElement) \| undefined                                                                                                                             | -        |
| finalFocusEl           | Element to receive focus when the dialog is closed                                                                             | (() => MaybeElement) \| undefined                                                                                                                             | -        |
| restoreFocus           | Whether to restore focus to the element that had focus before the dialog was opened                                            | boolean \| undefined                                                                                                                                          | -        |
| closeOnInteractOutside | Whether to close the dialog when the outside is clicked                                                                        | boolean \| undefined                                                                                                                                          | true     |
| closeOnEscape          | Whether to close the dialog when the escape key is pressed                                                                     | boolean \| undefined                                                                                                                                          | true     |
| open                   | The controlled open state of the dialog                                                                                        | boolean \| undefined                                                                                                                                          | -        |
| defaultOpen            | The initial open state of the dialog when rendered.&#xA;Use when you don't need to control the open state of the dialog.       | boolean \| undefined                                                                                                                                          | false    |
| onOpenChange           | Function to call when the dialog's open state changes                                                                          | ((details: OpenChangeDetails) => void) \| undefined                                                                                                           | -        |
| getRootNode            | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                     | (() => Node \| ShadowRoot \| Document) \| undefined                                                                                                           | -        |
| onEscapeKeyDown        | Function called when the escape key is pressed                                                                                 | ((event: KeyboardEvent) => void) \| undefined                                                                                                                 | -        |
| onRequestDismiss       | Function called when this layer is closed due to a parent layer being closed                                                   | ((event: LayerDismissEvent) => void) \| undefined                                                                                                             | -        |
| onPointerDownOutside   | Function called when the pointer is pressed down outside the component                                                         | ((event: PointerDownOutsideEvent) => void) \| undefined                                                                                                       | -        |
| onFocusOutside         | Function called when the focus is moved outside the component                                                                  | ((event: FocusOutsideEvent) => void) \| undefined                                                                                                             | -        |
| onInteractOutside      | Function called when an interaction happens outside the component                                                              | ((event: InteractOutsideEvent) => void) \| undefined                                                                                                          | -        |
| persistentElements     | Returns the persistent elements that:&#xA;- should not have pointer-events disabled&#xA;- should not trigger the dismiss event | (() => Element \| null)\[] \| undefined                                                                                                                       | -        |

### Provider

| Prop     | Description | Type                  | Default |
| -------- | ----------- | --------------------- | ------- |
| value    | -           | DialogApi\<PropTypes> | -       |
| children | -           | ReactNode             | -       |

### Context

| Prop     | Description | Type                                         | Default |
| -------- | ----------- | -------------------------------------------- | ------- |
| children | -           | (dialog: DialogApi\<PropTypes>) => ReactNode | -       |

### Trigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### Backdrop

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Positioner

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Content

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Title

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Description

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### CloseTrigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

# File Upload

File upload dropzone and input patterns for selecting files.

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

export default function Default() {
	return (
		<FileUpload>
			<FileUpload.Label>Label</FileUpload.Label>
			<FileUpload.Dropzone>
				<FileUpload.Trigger>Browse Files</FileUpload.Trigger>
				<FileUpload.HiddenInput />
			</FileUpload.Dropzone>
			<FileUpload.ItemGroup>
				<FileUpload.Context>
					{(fileUpload) =>
						fileUpload.acceptedFiles.map((file) => (
							<FileUpload.Item key={file.name} file={file}>
								<FileUpload.ItemName>{file.name}</FileUpload.ItemName>
								<FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
								<FileUpload.ItemDeleteTrigger />
							</FileUpload.Item>
						))
					}
				</FileUpload.Context>
			</FileUpload.ItemGroup>
		</FileUpload>
	);
}

```

## Custom Content

Supply your own text and icons within the dropzone.

```tsx
import { FileUpload } from '@skeletonlabs/skeleton-react';
import { FileIcon } from 'lucide-react';

export default function Default() {
	return (
		<FileUpload>
			<FileUpload.Dropzone>
				<FileIcon className="size-10" />
				<span>Select file or drag here.</span>
				<FileUpload.Trigger>Browse Files</FileUpload.Trigger>
				<FileUpload.HiddenInput />
			</FileUpload.Dropzone>
			<FileUpload.ItemGroup>
				<FileUpload.Context>
					{(fileUpload) =>
						fileUpload.acceptedFiles.map((file) => (
							<FileUpload.Item key={file.name} file={file}>
								<FileUpload.ItemName>{file.name}</FileUpload.ItemName>
								<FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
								<FileUpload.ItemDeleteTrigger />
							</FileUpload.Item>
						))
					}
				</FileUpload.Context>
			</FileUpload.ItemGroup>
		</FileUpload>
	);
}

```

## Disabled

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

export default function Disabled() {
	return (
		<FileUpload disabled>
			<FileUpload.Dropzone>
				<FileUpload.Trigger>Browse Files</FileUpload.Trigger>
				<FileUpload.HiddenInput />
			</FileUpload.Dropzone>
			<FileUpload.ItemGroup>
				<FileUpload.Context>
					{(fileUpload) =>
						fileUpload.acceptedFiles.map((file) => (
							<FileUpload.Item key={file.name} file={file}>
								<FileUpload.ItemName>{file.name}</FileUpload.ItemName>
								<FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
								<FileUpload.ItemDeleteTrigger />
							</FileUpload.Item>
						))
					}
				</FileUpload.Context>
			</FileUpload.ItemGroup>
		</FileUpload>
	);
}

```

## Button Only

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

export default function Button() {
	return (
		<FileUpload className="w-fit">
			<FileUpload.Trigger>Browse Files</FileUpload.Trigger>
			<FileUpload.HiddenInput />
		</FileUpload>
	);
}

```

## Clear Files

```tsx
import { FileUpload, useFileUpload } from '@skeletonlabs/skeleton-react';

export default function ClearFiles() {
	const fileUpload = useFileUpload({
		defaultAcceptedFiles: [new File(['file'], 'example.png', { type: 'image/png' })],
	});
	return (
		<div className="grid gap-4 w-full">
			<FileUpload.Provider value={fileUpload}>
				<FileUpload.Dropzone>
					<FileUpload.Trigger>Browse Files</FileUpload.Trigger>
					<FileUpload.HiddenInput />
				</FileUpload.Dropzone>
				<FileUpload.ItemGroup>
					<FileUpload.Context>
						{(fileUpload) =>
							fileUpload.acceptedFiles.map((file) => (
								<FileUpload.Item key={file.name} file={file}>
									<FileUpload.ItemName>{file.name}</FileUpload.ItemName>
									<FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
									<FileUpload.ItemDeleteTrigger />
								</FileUpload.Item>
							))
						}
					</FileUpload.Context>
				</FileUpload.ItemGroup>
			</FileUpload.Provider>
			<button className="btn preset-filled hover:preset-filled-error-500 w-fit" onClick={() => fileUpload.clearFiles()}>
				Clear Files
			</button>
		</div>
	);
}

```

## Direction

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

export default function Dir() {
	return (
		<FileUpload dir="rtl">
			<FileUpload.Label>Label</FileUpload.Label>
			<FileUpload.Dropzone>
				<FileUpload.Trigger>Browse Files</FileUpload.Trigger>
				<FileUpload.HiddenInput />
			</FileUpload.Dropzone>
			<FileUpload.ItemGroup>
				<FileUpload.Context>
					{(fileUpload) =>
						fileUpload.acceptedFiles.map((file) => (
							<FileUpload.Item key={file.name} file={file}>
								<FileUpload.ItemName>{file.name}</FileUpload.ItemName>
								<FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
								<FileUpload.ItemDeleteTrigger />
							</FileUpload.Item>
						))
					}
				</FileUpload.Context>
			</FileUpload.ItemGroup>
		</FileUpload>
	);
}

```

## API Reference

### Root

| Prop                 | Description                                                                                                       | Type                                                                                                                                                                                                                                                        | Default  |
| -------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| name                 | The name of the underlying file input                                                                             | string \| undefined                                                                                                                                                                                                                                         | -        |
| ids                  | The ids of the elements. Useful for composition.                                                                  | Partial\<\{ root: string; dropzone: string; hiddenInput: string; trigger: string; label: string; item: (id: string) => string; itemName: (id: string) => string; itemSizeText: (id: string) => string; itemPreview: (id: string) => string; }> \| undefined | -        |
| translations         | The localized messages to use.                                                                                    | IntlTranslations \| undefined                                                                                                                                                                                                                               | -        |
| accept               | The accept file types                                                                                             | Record\<string, string\[]> \| FileMimeType \| FileMimeType\[] \| undefined                                                                                                                                                                                  | -        |
| disabled             | Whether the file input is disabled                                                                                | boolean \| undefined                                                                                                                                                                                                                                        | -        |
| required             | Whether the file input is required                                                                                | boolean \| undefined                                                                                                                                                                                                                                        | -        |
| allowDrop            | Whether to allow drag and drop in the dropzone element                                                            | boolean \| undefined                                                                                                                                                                                                                                        | true     |
| maxFileSize          | The maximum file size in bytes                                                                                    | number \| undefined                                                                                                                                                                                                                                         | Infinity |
| minFileSize          | The minimum file size in bytes                                                                                    | number \| undefined                                                                                                                                                                                                                                         | 0        |
| maxFiles             | The maximum number of files                                                                                       | number \| undefined                                                                                                                                                                                                                                         | 1        |
| preventDocumentDrop  | Whether to prevent the drop event on the document                                                                 | boolean \| undefined                                                                                                                                                                                                                                        | true     |
| validate             | Function to validate a file                                                                                       | ((file: File, details: FileValidateDetails) => FileError\[] \| null) \| undefined                                                                                                                                                                           | -        |
| defaultAcceptedFiles | The default accepted files when rendered.&#xA;Use when you don't need to control the accepted files of the input. | File\[] \| undefined                                                                                                                                                                                                                                        | -        |
| acceptedFiles        | The controlled accepted files                                                                                     | File\[] \| undefined                                                                                                                                                                                                                                        | -        |
| onFileChange         | Function called when the value changes, whether accepted or rejected                                              | ((details: FileChangeDetails) => void) \| undefined                                                                                                                                                                                                         | -        |
| onFileAccept         | Function called when the file is accepted                                                                         | ((details: FileAcceptDetails) => void) \| undefined                                                                                                                                                                                                         | -        |
| onFileReject         | Function called when the file is rejected                                                                         | ((details: FileRejectDetails) => void) \| undefined                                                                                                                                                                                                         | -        |
| capture              | The default camera to use when capturing media                                                                    | "user" \| "environment" \| undefined                                                                                                                                                                                                                        | -        |
| directory            | Whether to accept directories, only works in webkit browsers                                                      | boolean \| undefined                                                                                                                                                                                                                                        | -        |
| invalid              | Whether the file input is invalid                                                                                 | boolean \| undefined                                                                                                                                                                                                                                        | -        |
| transformFiles       | Function to transform the accepted files to apply transformations                                                 | ((files: File\[]) => Promise\<File\[]>) \| undefined                                                                                                                                                                                                        | -        |
| locale               | The current locale. Based on the BCP 47 definition.                                                               | string \| undefined                                                                                                                                                                                                                                         | "en-US"  |
| dir                  | The document's text/writing direction.                                                                            | "ltr" \| "rtl" \| undefined                                                                                                                                                                                                                                 | "ltr"    |
| getRootNode          | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                        | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                                                                                                                         | -        |
| element              | Render the element yourself                                                                                       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                                                                                                                              | -        |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | FileUploadApi\<PropTypes>                                      | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                                 | Default |
| -------- | ----------- | ---------------------------------------------------- | ------- |
| children | -           | (fileUpload: FileUploadApi\<PropTypes>) => ReactNode | -       |

### Label

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | -       |

### Dropzone

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Trigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### HiddenInput

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | -       |

### ItemGroup

| Prop    | Description                 | Type                                                          | Default |
| ------- | --------------------------- | ------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"ul">) => Element) \| undefined | -       |

### Item

| Prop    | Description                 | Type                                                          | Default |
| ------- | --------------------------- | ------------------------------------------------------------- | ------- |
| file    | -                           | File                                                          | -       |
| type    | -                           | ItemType \| undefined                                         | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"li">) => Element) \| undefined | -       |

### ItemName

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### ItemSizeText

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### ItemDeleteTrigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

# Listbox

Accessible listbox for single and multi selection.

```tsx
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';

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

export default function Default() {
	const collection = useListCollection({
		items: data,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
	});

	return (
		<Listbox className="w-full max-w-md" collection={collection}>
			<Listbox.Label>Label</Listbox.Label>
			<Listbox.Content>
				{collection.items.map((item) => (
					<Listbox.Item key={item.value} item={item}>
						<Listbox.ItemText>{item.label}</Listbox.ItemText>
						<Listbox.ItemIndicator />
					</Listbox.Item>
				))}
			</Listbox.Content>
		</Listbox>
	);
}

```

## Groups

```tsx
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';

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

export default function Group() {
	const collection = useListCollection({
		items: data,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
		groupBy: (item) => item.type,
	});

	return (
		<Listbox className="w-full max-w-md" collection={collection}>
			<Listbox.Label>Label</Listbox.Label>
			<Listbox.Content>
				{collection.group().map(([type, items]) => (
					<Listbox.ItemGroup key={type}>
						<Listbox.ItemGroupLabel>{type}</Listbox.ItemGroupLabel>
						{items.map((item) => (
							<Listbox.Item key={item.value} item={item}>
								<Listbox.ItemText>{item.label}</Listbox.ItemText>
								<Listbox.ItemIndicator />
							</Listbox.Item>
						))}
					</Listbox.ItemGroup>
				))}
			</Listbox.Content>
		</Listbox>
	);
}

```

## Multiple

```tsx
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';

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

export default function Multiple() {
	const collection = useListCollection({
		items: data,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
	});

	return (
		<Listbox className="w-full max-w-md" collection={collection} selectionMode="multiple">
			<Listbox.Label>Label</Listbox.Label>
			<Listbox.Content>
				{collection.items.map((item) => (
					<Listbox.Item key={item.value} item={item}>
						<Listbox.ItemText>{item.label}</Listbox.ItemText>
						<Listbox.ItemIndicator />
					</Listbox.Item>
				))}
			</Listbox.Content>
		</Listbox>
	);
}

```

## Disabled

```tsx
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';

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

export default function Disabled() {
	const collection = useListCollection({
		items: data,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
	});

	return (
		<Listbox className="w-full max-w-md" collection={collection} disabled={true}>
			<Listbox.Label>Label</Listbox.Label>
			<Listbox.Content>
				{collection.items.map((item) => (
					<Listbox.Item key={item.value} item={item}>
						<Listbox.ItemText>{item.label}</Listbox.ItemText>
						<Listbox.ItemIndicator />
					</Listbox.Item>
				))}
			</Listbox.Content>
		</Listbox>
	);
}

```

## Disabled Item

```tsx
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';

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

export default function DisabledItem() {
	const collection = useListCollection({
		items: data,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
		isItemDisabled: (item) => item.value === 'banana',
	});

	return (
		<Listbox className="w-full max-w-md" collection={collection}>
			<Listbox.Label>Label</Listbox.Label>
			<Listbox.Content>
				{collection.items.map((item) => (
					<Listbox.Item key={item.value} item={item}>
						<Listbox.ItemText>{item.label}</Listbox.ItemText>
						<Listbox.ItemIndicator />
					</Listbox.Item>
				))}
			</Listbox.Content>
		</Listbox>
	);
}

```

## Search

```tsx
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';
import { useMemo, useState } from 'react';

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

export default function Search() {
	const [query, setQuery] = useState('');

	const collection = useMemo(() => {
		const items = data.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));
		return useListCollection({ items });
	}, [query]);

	return (
		<Listbox className="w-full max-w-md" collection={collection}>
			<Listbox.Label>Label</Listbox.Label>
			<Listbox.Input placeholder="Type to search..." value={query} onChange={(e) => setQuery(e.currentTarget.value)} />
			<Listbox.Content>
				{collection.items.map((item) => (
					<Listbox.Item key={item.value} item={item}>
						<Listbox.ItemText>{item.label}</Listbox.ItemText>
						<Listbox.ItemIndicator />
					</Listbox.Item>
				))}
			</Listbox.Content>
		</Listbox>
	);
}

```

## Direction

```tsx
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';

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

export default function Dir() {
	const collection = useListCollection({
		items: data,
		itemToString: (item) => item.label,
		itemToValue: (item) => item.value,
	});

	return (
		<Listbox className="w-full max-w-md" collection={collection} dir="rtl">
			<Listbox.Label>Label</Listbox.Label>
			<Listbox.Content>
				{collection.items.map((item) => (
					<Listbox.Item key={item.value} item={item}>
						<Listbox.ItemText>{item.label}</Listbox.ItemText>
						<Listbox.ItemIndicator />
					</Listbox.Item>
				))}
			</Listbox.Content>
		</Listbox>
	);
}

```

## API Reference

### Root

| Prop                    | Description                                                                                                                                                                                                                                                                       | Type                                                                                                                                                                                                             | Default    |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| orientation             | The orientation of the listbox.                                                                                                                                                                                                                                                   | "horizontal" \| "vertical" \| undefined                                                                                                                                                                          | "vertical" |
| collection              | The item collection                                                                                                                                                                                                                                                               | ListCollection\<any> \| GridCollection\<any>                                                                                                                                                                     | -          |
| ids                     | The ids of the elements in the listbox. Useful for composition.                                                                                                                                                                                                                   | Partial\<\{ root: string; content: string; label: string; item: (id: string \| number) => string; itemGroup: (id: string \| number) => string; itemGroupLabel: (id: string \| number) => string; }> \| undefined | -          |
| disabled                | Whether the listbox is disabled                                                                                                                                                                                                                                                   | boolean \| undefined                                                                                                                                                                                             | -          |
| disallowSelectAll       | Whether to disallow selecting all items when \`meta+a\` is pressed                                                                                                                                                                                                                | boolean \| undefined                                                                                                                                                                                             | -          |
| onHighlightChange       | The callback fired when the highlighted item changes.                                                                                                                                                                                                                             | ((details: HighlightChangeDetails\<any>) => void) \| undefined                                                                                                                                                   | -          |
| onValueChange           | The callback fired when the selected item changes.                                                                                                                                                                                                                                | ((details: ValueChangeDetails\<any>) => void) \| undefined                                                                                                                                                       | -          |
| value                   | The controlled keys of the selected items                                                                                                                                                                                                                                         | string\[] \| undefined                                                                                                                                                                                           | -          |
| defaultValue            | The initial default value of the listbox when rendered.&#xA;Use when you don't need to control the value of the listbox.                                                                                                                                                          | string\[] \| undefined                                                                                                                                                                                           | \[]        |
| highlightedValue        | The controlled key of the highlighted item                                                                                                                                                                                                                                        | string \| null \| undefined                                                                                                                                                                                      | -          |
| defaultHighlightedValue | The initial value of the highlighted item when opened.&#xA;Use when you don't need to control the highlighted value of the listbox.                                                                                                                                               | string \| null \| undefined                                                                                                                                                                                      | -          |
| loopFocus               | Whether to loop the keyboard navigation through the options                                                                                                                                                                                                                       | boolean \| undefined                                                                                                                                                                                             | false      |
| selectionMode           | How multiple selection should behave in the listbox.&#xA;&#xA;- \`single\`: The user can select a single item.&#xA;- \`multiple\`: The user can select multiple items without using modifier keys.&#xA;- \`extended\`: The user can select multiple items by using modifier keys. | SelectionMode \| undefined                                                                                                                                                                                       | "single"   |
| scrollToIndexFn         | Function to scroll to a specific index                                                                                                                                                                                                                                            | ((details: ScrollToIndexDetails) => void) \| undefined                                                                                                                                                           | -          |
| selectOnHighlight       | Whether to select the item when it is highlighted                                                                                                                                                                                                                                 | boolean \| undefined                                                                                                                                                                                             | -          |
| deselectable            | Whether to disallow empty selection                                                                                                                                                                                                                                               | boolean \| undefined                                                                                                                                                                                             | -          |
| typeahead               | Whether to enable typeahead on the listbox                                                                                                                                                                                                                                        | boolean \| undefined                                                                                                                                                                                             | -          |
| onSelect                | Function called when an item is selected                                                                                                                                                                                                                                          | ((details: SelectionDetails) => void) \| undefined                                                                                                                                                               | -          |
| dir                     | The document's text/writing direction.                                                                                                                                                                                                                                            | "ltr" \| "rtl" \| undefined                                                                                                                                                                                      | "ltr"      |
| getRootNode             | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                                                                                                                                                                        | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                                                                              | -          |
| element                 | Render the element yourself                                                                                                                                                                                                                                                       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                                                                                   | -          |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | ListboxApi\<PropTypes, any>                                    | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                                | Default |
| -------- | ----------- | --------------------------------------------------- | ------- |
| children | -           | (listbox: ListboxApi\<PropTypes, any>) => ReactNode | -       |

### Label

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | -       |

### Input

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | -       |

### Content

| Prop    | Description                 | Type                                                          | Default |
| ------- | --------------------------- | ------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"ul">) => Element) \| undefined | -       |

### ItemGroup

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### ItemGroupLabel

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Item

| Prop             | Description                            | Type                                                          | Default |
| ---------------- | -------------------------------------- | ------------------------------------------------------------- | ------- |
| item             | The item to render                     | any                                                           | -       |
| highlightOnHover | Whether to highlight the item on hover | boolean \| undefined                                          | -       |
| element          | Render the element yourself            | ((attributes: HTMLAttributes\<"li">) => Element) \| undefined | -       |

### ItemText

| Prop    | Description                 | Type                                                            | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | -       |

### ItemIndicator

| Prop    | Description                 | Type                                                            | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | -       |

# Navigation

Navigation patterns for apps (bar, rail, sidebar, toggle).

## Bar

* Recommended for small sized screens (ex: mobile).
* Ideal for vertical screen layouts.
* Should be fixed to the bottom of the viewport.
* Supports 3-5 tiles based on contents and viewport width.
* Consider progressive enhancement with the [Virtual Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API).

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

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

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

```

## Rail

* Recommended for medium sized screens (ex: tablet).
* Ideal for horizontal screen layouts.
* Should be fixed to the left or right of the viewport.
* Supports 3-7 tiles based on contents and viewport height.

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

export default function Default() {
	const links = [
		{ label: 'Home', href: '#', icon: HouseIcon },
		{ label: 'Books', href: '#', icon: BookIcon },
		{ label: 'Movies', href: '#', icon: PopcornIcon },
		{ label: 'Television', href: '#', icon: TvIcon },
	];
	let anchorRail = 'btn hover:preset-tonal aspect-square w-full max-w-[84px] flex flex-col items-center gap-0.5';

	return (
		<div className="w-full h-[728px] grid grid-cols-[auto_1fr] border border-surface-200-800">
			<Navigation layout="rail">
				<Navigation.Header>
					<a href="/" className={anchorRail} title="View Homepage" aria-label="View Homepage">
						<SkullIcon className="size-8" />
					</a>
				</Navigation.Header>
				<Navigation.Content>
					<Navigation.Menu>
						{links.map((link) => {
							const Icon = link.icon;
							return (
								<a key={link.label} href={link.href} className={anchorRail}>
									<Icon className="size-5" />
									<span className="text-xs">{link.label}</span>
								</a>
							);
						})}
					</Navigation.Menu>
				</Navigation.Content>
				<Navigation.Footer>
					<a href="#" className={anchorRail} title="Settings" aria-label="Settings">
						<SettingsIcon className="size-5" />
					</a>
				</Navigation.Footer>
			</Navigation>
			<div className="flex justify-center items-center">
				<p className="opacity-50">Contents</p>
			</div>
		</div>
	);
}

```

## Sidebar

* Recommended for large sized screens (ex: desktop).
* Ideal for horizontal screen layouts.
* Should be fixed to the left or right of the viewport.
* Supports multiple groups of links for deep navigation.
* Supports a label field per each group.
* Can scroll vertically if contents extend beyond the viewport height.

```tsx
import { Navigation } from '@skeletonlabs/skeleton-react';
import { BikeIcon } from 'lucide-react';
import { BookIcon } from 'lucide-react';
import { HouseIcon } from 'lucide-react';
import { MountainIcon } from 'lucide-react';
import { PopcornIcon } from 'lucide-react';
import { SailboatIcon } from 'lucide-react';
import { SettingsIcon } from 'lucide-react';
import { SkullIcon } from 'lucide-react';
import { TvIcon } from 'lucide-react';
import { WavesIcon } from 'lucide-react';

export default function Default() {
	const linksSidebar = {
		entertainment: [
			{ label: 'Books', href: '#', icon: BookIcon },
			{ label: 'Movies', href: '#', icon: PopcornIcon },
			{ label: 'Television', href: '#', icon: TvIcon },
		],
		recreation: [
			{ label: 'Biking', href: '#', icon: BikeIcon },
			{ label: 'Sailing', href: '#', icon: SailboatIcon },
			{ label: 'Hiking', href: '#', icon: MountainIcon },
			{ label: 'Swimming', href: '#', icon: WavesIcon },
		],
	};
	let anchorSidebar = 'btn hover:preset-tonal justify-start px-2 w-full';

	return (
		<div className="w-full h-[728px] grid grid-cols-[auto_1fr] items-stretch border border-surface-200-800">
			<Navigation layout="sidebar" className="grid grid-rows-[auto_1fr_auto] gap-4">
				<Navigation.Header>
					<a href="https://www.skeleton.dev" className="btn-icon btn-icon-lg preset-filled-primary-500">
						<SkullIcon className="size-6" />
					</a>
				</Navigation.Header>
				<Navigation.Content>
					<Navigation.Group>
						<Navigation.Menu>
							<a href="/" className={anchorSidebar}>
								<HouseIcon className="size-4" />
								<span>Home</span>
							</a>
						</Navigation.Menu>
					</Navigation.Group>
					{Object.entries(linksSidebar).map(([category, links]) => (
						<Navigation.Group key={category}>
							<Navigation.Label className="capitalize pl-2">{category}</Navigation.Label>
							<Navigation.Menu>
								{links.map((link) => {
									const Icon = link.icon;
									return (
										<a key={link.label} className={anchorSidebar} title={link.label} aria-label={link.label}>
											<Icon className="size-4" />
											<span>{link.label}</span>
										</a>
									);
								})}
							</Navigation.Menu>
						</Navigation.Group>
					))}
				</Navigation.Content>
				<Navigation.Footer>
					<a href="/" className={anchorSidebar} title="Settings" aria-label="Settings">
						<SettingsIcon className="size-4" />
						<span>Settings</span>
					</a>
				</Navigation.Footer>
			</Navigation>
			<div className="flex justify-center items-center">
				<p className="opacity-50">Contents</p>
			</div>
		</div>
	);
}

```

## Toggle Layout

Using reactive state we can dynamically switch between multiple layouts. Tap the double arrow icon to toggle.

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

export default function Default() {
	const links = [
		{ label: 'Home', href: '#', icon: HouseIcon },
		{ label: 'Books', href: '#', icon: BookIcon },
		{ label: 'Movies', href: '#', icon: PopcornIcon },
		{ label: 'Television', href: '#', icon: TvIcon },
	];

	const buttonClasses = 'btn hover:preset-tonal';
	let anchorRail = `${buttonClasses} aspect-square w-full max-w-[84px] flex flex-col items-center gap-0.5`;
	let anchorSidebar = `${buttonClasses} justify-start px-2 w-full`;

	let [layoutRail, setLayoutRail] = useState(true);

	function toggleLayout() {
		setLayoutRail(!layoutRail);
	}

	return (
		<div className="w-full h-[728px] grid grid-cols-[auto_1fr] items-stretch border border-surface-200-800">
			<Navigation layout={layoutRail ? 'rail' : 'sidebar'} className={layoutRail ? '' : 'grid grid-rows-[1fr_auto] gap-4'}>
				<Navigation.Content>
					<Navigation.Menu>
						{links.map((link) => {
							const Icon = link.icon;
							return (
								<a key={link.label} className={layoutRail ? anchorRail : anchorSidebar}>
									<Icon className={layoutRail ? 'size-5' : 'size-4'} />
									<span className={layoutRail ? 'text-[10px]' : ''}>{link.label}</span>
								</a>
							);
						})}
					</Navigation.Menu>
				</Navigation.Content>
				<Navigation.Footer>
					<button type="button" className={layoutRail ? anchorRail : anchorSidebar} onClick={toggleLayout}>
						<ArrowLeftRightIcon className={layoutRail ? 'size-5' : 'size-4'} />
						{!layoutRail ? <span>Resize</span> : ''}
					</button>
				</Navigation.Footer>
			</Navigation>
			<div className="flex justify-center items-center">
				<p className="opacity-50">Contents</p>
			</div>
		</div>
	);
}

```

## API Reference

### Root

| Prop    | Description                                                                                  | Type                                                           | Default |
| ------- | -------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------- |
| layout  | Sets the data-layout attribute, which modifies the visual presentation of the component set. | "bar" \| "rail" \| "sidebar" \| undefined                      | bar     |
| element | Render the element yourself                                                                  | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Header

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"header">) => Element) \| undefined | -       |

### Content

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Group

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Label

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Menu

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Footer

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"footer">) => Element) \| undefined | -       |

# Pagination

Client and server-side pagination controls.

```tsx
import { faker } from '@faker-js/faker';
import { Pagination } from '@skeletonlabs/skeleton-react';
import { ArrowRightIcon, ArrowLeftIcon } from 'lucide-react';
import { useState } from 'react';

const users = Array.from({ length: 500 }, (_, i) => ({
	id: i + 1,
	name: faker.person.fullName(),
	email: faker.internet.email(),
	country: faker.location.country(),
}));

const PAGE_SIZE = 5;

export default function Default() {
	const [page, setPage] = useState(1);

	const start = (page - 1) * PAGE_SIZE;
	const end = start + PAGE_SIZE;
	const data = users.slice(start, end);

	return (
		<div className="grid gap-4 w-full place-items-center">
			<table className="table table-auto">
				<thead>
					<tr>
						<th>ID</th>
						<th>Name</th>
						<th>Email</th>
						<th>Country</th>
					</tr>
				</thead>
				<tbody>
					{data.map((user) => (
						<tr key={user.id}>
							<td>{user.id}</td>
							<td>{user.name}</td>
							<td>{user.email}</td>
							<td>{user.country}</td>
						</tr>
					))}
				</tbody>
			</table>
			<Pagination count={users.length} pageSize={PAGE_SIZE} page={page} onPageChange={(event) => setPage(event.page)}>
				<Pagination.PrevTrigger>
					<ArrowLeftIcon className="size-4" />
				</Pagination.PrevTrigger>
				<Pagination.Context>
					{(pagination) =>
						pagination.pages.map((page, index) =>
							page.type === 'page' ? (
								<Pagination.Item key={index} {...page}>
									{page.value}
								</Pagination.Item>
							) : (
								<Pagination.Ellipsis key={index} index={index}>
									&#8230;
								</Pagination.Ellipsis>
							),
						)
					}
				</Pagination.Context>
				<Pagination.NextTrigger>
					<ArrowRightIcon className="size-4" />
				</Pagination.NextTrigger>
			</Pagination>
		</div>
	);
}

```

## Page Size

```tsx
import { faker } from '@faker-js/faker';
import { Pagination } from '@skeletonlabs/skeleton-react';
import { ArrowRightIcon, ArrowLeftIcon } from 'lucide-react';
import { useState } from 'react';

const users = Array.from({ length: 500 }, (_, i) => ({
	id: i + 1,
	name: faker.person.fullName(),
	email: faker.internet.email(),
	country: faker.location.country(),
}));

export default function Default() {
	const [page, setPage] = useState(1);
	const [pageSize, setPageSize] = useState(5);

	const start = (page - 1) * pageSize;
	const end = start + pageSize;
	const data = users.slice(start, end);

	return (
		<div className="grid gap-4 w-full place-items-center">
			<table className="table table-auto">
				<thead>
					<tr>
						<th>ID</th>
						<th>Name</th>
						<th>Email</th>
						<th>Country</th>
					</tr>
				</thead>
				<tbody>
					{data.map((user) => (
						<tr key={user.id}>
							<td>{user.id}</td>
							<td>{user.name}</td>
							<td>{user.email}</td>
							<td>{user.country}</td>
						</tr>
					))}
				</tbody>
			</table>
			<div className="flex justify-between items-center gap-4 w-full">
				<label className="label">
					<span className="sr-only">Page Size</span>
					<select className="select w-fit" value={String(pageSize)} onChange={(e) => setPageSize(Number(e.currentTarget.value))}>
						<option value="5">5</option>
						<option value="10">10</option>
						<option value="20">20</option>
					</select>
				</label>

				<Pagination count={users.length} pageSize={pageSize} page={page} onPageChange={(event) => setPage(event.page)}>
					<Pagination.PrevTrigger>
						<ArrowLeftIcon className="size-4" />
					</Pagination.PrevTrigger>
					<Pagination.Context>
						{(pagination) =>
							pagination.pages.map((page, index) =>
								page.type === 'page' ? (
									<Pagination.Item key={index} {...page}>
										{page.value}
									</Pagination.Item>
								) : (
									<Pagination.Ellipsis key={index} index={index}>
										&#8230;
									</Pagination.Ellipsis>
								),
							)
						}
					</Pagination.Context>
					<Pagination.NextTrigger>
						<ArrowRightIcon className="size-4" />
					</Pagination.NextTrigger>
				</Pagination>
			</div>
		</div>
	);
}

```

## Direction

```tsx
import { faker } from '@faker-js/faker';
import { Pagination } from '@skeletonlabs/skeleton-react';
import { ArrowRightIcon, ArrowLeftIcon } from 'lucide-react';
import { useState } from 'react';

const users = Array.from({ length: 500 }, (_, i) => ({
	id: i + 1,
	name: faker.person.fullName(),
	email: faker.internet.email(),
	country: faker.location.country(),
}));

const PAGE_SIZE = 5;

export default function Dir() {
	const [page, setPage] = useState(1);

	const start = (page - 1) * PAGE_SIZE;
	const end = start + PAGE_SIZE;
	const data = users.slice(start, end);

	return (
		<div className="grid gap-4 w-full place-items-center">
			<table className="table table-auto">
				<thead>
					<tr>
						<th>ID</th>
						<th>Name</th>
						<th>Email</th>
						<th>Country</th>
					</tr>
				</thead>
				<tbody>
					{data.map((user) => (
						<tr key={user.id}>
							<td>{user.id}</td>
							<td>{user.name}</td>
							<td>{user.email}</td>
							<td>{user.country}</td>
						</tr>
					))}
				</tbody>
			</table>
			<Pagination count={users.length} pageSize={PAGE_SIZE} page={page} onPageChange={(event) => setPage(event.page)} dir="rtl">
				<Pagination.PrevTrigger>
					<ArrowRightIcon className="size-4" />
				</Pagination.PrevTrigger>
				<Pagination.Context>
					{(pagination) =>
						pagination.pages.map((page, index) =>
							page.type === 'page' ? (
								<Pagination.Item key={index} {...page}>
									{page.value}
								</Pagination.Item>
							) : (
								<Pagination.Ellipsis key={index} index={index}>
									&#8230;
								</Pagination.Ellipsis>
							),
						)
					}
				</Pagination.Context>
				<Pagination.NextTrigger>
					<ArrowLeftIcon className="size-4" />
				</Pagination.NextTrigger>
			</Pagination>
		</div>
	);
}

```

## Total Count

For server-side pagination, your data source may be truncated. Make sure to specify the total records using `count`.

```ts
const res = {
	"results": [...],
	"pagination": {
		"page": 1,
		"limit": 10,
		"count": 500,
	}
}
```

```astro
<Pagination page={res.pagination.page} count={res.pagination.count} pageSize={res.pagination.limit}>...</Pagination>
```

## API Reference

### Root

| Prop             | Description                                                                                                                      | Type                                                                                                                                                     | Default  |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| ids              | The ids of the elements in the accordion. Useful for composition.                                                                | Partial\<\{ root: string; ellipsis: (index: number) => string; prevTrigger: string; nextTrigger: string; item: (page: number) => string; }> \| undefined | -        |
| translations     | Specifies the localized strings that identifies the accessibility elements and their states                                      | IntlTranslations \| undefined                                                                                                                            | -        |
| count            | Total number of data items                                                                                                       | number \| undefined                                                                                                                                      | -        |
| pageSize         | The controlled number of data items per page                                                                                     | number \| undefined                                                                                                                                      | -        |
| defaultPageSize  | The initial number of data items per page when rendered.&#xA;Use when you don't need to control the page size of the pagination. | number \| undefined                                                                                                                                      | 10       |
| siblingCount     | Number of pages to show beside active page                                                                                       | number \| undefined                                                                                                                                      | 1        |
| page             | The controlled active page                                                                                                       | number \| undefined                                                                                                                                      | -        |
| defaultPage      | The initial active page when rendered.&#xA;Use when you don't need to control the active page of the pagination.                 | number \| undefined                                                                                                                                      | 1        |
| onPageChange     | Called when the page number is changed                                                                                           | ((details: PageChangeDetails) => void) \| undefined                                                                                                      | -        |
| onPageSizeChange | Called when the page size is changed                                                                                             | ((details: PageSizeChangeDetails) => void) \| undefined                                                                                                  | -        |
| type             | The type of the trigger element                                                                                                  | "button" \| "link" \| undefined                                                                                                                          | "button" |
| getPageUrl       | Function to generate href attributes for pagination links.&#xA;Only used when \`type\` is set to "link".                         | ((details: PageUrlDetails) => string) \| undefined                                                                                                       | -        |
| dir              | The document's text/writing direction.                                                                                           | "ltr" \| "rtl" \| undefined                                                                                                                              | "ltr"    |
| getRootNode      | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                       | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                      | -        |
| element          | Render the element yourself                                                                                                      | ((attributes: HTMLAttributes\<"nav">) => Element) \| undefined                                                                                           | -        |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | PaginationApi\<PropTypes>                                      | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"nav">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                                 | Default |
| -------- | ----------- | ---------------------------------------------------- | ------- |
| children | -           | (pagination: PaginationApi\<PropTypes>) => ReactNode | -       |

### FirstTrigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### PrevTrigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### Item

| Prop    | Description                 | Type                                                         | Default |
| ------- | --------------------------- | ------------------------------------------------------------ | ------- |
| type    | -                           | "page"                                                       | -       |
| value   | -                           | number                                                       | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"a">) => Element) \| undefined | -       |

### Ellipsis

| Prop    | Description                 | Type                                                            | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| index   | -                           | number                                                          | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | -       |

### NextTrigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### LastTrigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

# Popover

Small overlay panels positioned relative to a trigger.

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

export default function Default() {
	return (
		<Popover>
			<Popover.Trigger className="btn preset-filled">Trigger</Popover.Trigger>
			<Portal>
				<Popover.Positioner>
					<Popover.Content className="card max-w-md p-4 bg-surface-100-900 shadow-xl space-y-2">
						<Popover.Title className="font-bold">Title</Popover.Title>
						<Popover.Description>
							Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
							nesciunt enim.
						</Popover.Description>
						<Popover.CloseTrigger className="btn preset-tonal">Close</Popover.CloseTrigger>
					</Popover.Content>
				</Popover.Positioner>
			</Portal>
		</Popover>
	);
}

```

## Arrow

Visually connects the popover content to the trigger element. Will automatically align based on the selected side.

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

export default function Arrow() {
	return (
		<Popover>
			<Popover.Trigger className="btn preset-filled">Trigger</Popover.Trigger>
			<Portal>
				<Popover.Positioner>
					<Popover.Content className="card max-w-md p-4 bg-surface-100-900 shadow-xl space-y-2">
						<Popover.Title className="font-bold">Title</Popover.Title>
						<Popover.Description>
							Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
							nesciunt enim.
						</Popover.Description>
						<Popover.CloseTrigger className="btn preset-tonal">Close</Popover.CloseTrigger>
						<Popover.Arrow
							style={{
								['--arrow-size' as string]: 'calc(var(--spacing) * 2)',
								['--arrow-background' as string]: 'var(--color-surface-100-900)',
							}}
						>
							<Popover.ArrowTip />
						</Popover.Arrow>
					</Popover.Content>
				</Popover.Positioner>
			</Portal>
		</Popover>
	);
}

```

## Z-Index

This component is headless by default. If you find the popover content is being clipped, try increasing the z-index on the Positioner part. In some rare cases you may need to use `!important` to override library defaults.

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

export default function ZIndex() {
	return (
		<div className="grid grid-cols-2 gap-4">
			<Popover>
				<Popover.Trigger className="btn preset-filled">Default (auto)</Popover.Trigger>
				<Portal>
					<Popover.Positioner>
						<Popover.Content className="card max-w-md p-4 bg-surface-100-900 space-y-2">
							<Popover.Description>This example will be below the sibling.</Popover.Description>
						</Popover.Content>
					</Popover.Positioner>
				</Portal>
			</Popover>

			<Popover>
				<Popover.Trigger className="btn preset-filled">Above (20)</Popover.Trigger>
				<Portal>
					<Popover.Positioner className="z-20!">
						<Popover.Content className="card max-w-md p-4 bg-surface-100-900 shadow-xl space-y-2">
							<Popover.Description>This example will be above the sibling.</Popover.Description>
						</Popover.Content>
					</Popover.Positioner>
				</Portal>
			</Popover>

			<div className="col-span-2 h-[100px] relative">
				<div className="rounded bg-primary-200-800/75 w-full h-full z-10 flex justify-center items-center absolute">Sibling (10)</div>
			</div>
		</div>
	);
}

```

## Provider Pattern

You can programmatically open and close the popover using the [Provider Pattern](/docs/\[framework]/get-started/fundamentals#provider-pattern). This is useful for custom interactions and keyboard handling strategies.

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

export default function Default() {
	const popover = usePopover({
		closeOnInteractOutside: false,
	});

	function showAndHide() {
		popover.setOpen(true);
		setTimeout(() => {
			popover.setOpen(false);
		}, 3000);
	}
	return (
		<div className="flex flex-col gap-4">
			<button className="btn preset-filled" onClick={showAndHide}>
				Show for 3 seconds
			</button>

			<Popover.Provider value={popover}>
				<Popover.Trigger className="btn preset-tonal">Anchor</Popover.Trigger>
				<Portal>
					<Popover.Positioner>
						<Popover.Content className="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>
	);
}

```

## Direction

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

export default function Dir() {
	return (
		<Popover dir="rtl">
			<Popover.Trigger className="btn preset-filled">Trigger</Popover.Trigger>
			<Portal>
				<Popover.Positioner>
					<Popover.Content className="card max-w-md p-4 bg-surface-100-900 shadow-xl space-y-2">
						<Popover.Title className="font-bold">Title</Popover.Title>
						<Popover.Description>
							Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
							nesciunt enim.
						</Popover.Description>
						<Popover.CloseTrigger className="btn preset-tonal">Close</Popover.CloseTrigger>
					</Popover.Content>
				</Popover.Positioner>
			</Portal>
		</Popover>
	);
}

```

## Headless

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

export default function Headless() {
	return (
		<Popover>
			<Popover.Trigger className="btn preset-filled">Trigger</Popover.Trigger>
			<Portal>
				<Popover.Positioner>
					<Popover.Content className="card max-w-md p-4 bg-surface-100-900 shadow-xl space-y-2">
						<Popover.Title className="font-bold">Title</Popover.Title>
						<Popover.Description>
							Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
							nesciunt enim.
						</Popover.Description>
						<Popover.CloseTrigger className="btn preset-tonal">Close</Popover.CloseTrigger>
					</Popover.Content>
				</Popover.Positioner>
			</Portal>
		</Popover>
	);
}

```

## API Reference

### Root

| Prop                   | Description                                                                                                                                                                                                                                           | Type                                                                                                                                                                       | Default |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| children               | -                                                                                                                                                                                                                                                     | ReactNode                                                                                                                                                                  | -       |
| autoFocus              | Whether to automatically set focus on the first focusable&#xA;content within the popover when opened.                                                                                                                                                 | boolean \| undefined                                                                                                                                                       | true    |
| dir                    | The document's text/writing direction.                                                                                                                                                                                                                | "ltr" \| "rtl" \| undefined                                                                                                                                                | "ltr"   |
| ids                    | The ids of the elements in the popover. Useful for composition.                                                                                                                                                                                       | Partial\<\{ anchor: string; trigger: string; content: string; title: string; description: string; closeTrigger: string; positioner: string; arrow: string; }> \| undefined | -       |
| modal                  | Whether the popover should be modal. When set to \`true\`:&#xA;- interaction with outside elements will be disabled&#xA;- only popover content will be visible to screen readers&#xA;- scrolling is blocked&#xA;- focus is trapped within the popover | boolean \| undefined                                                                                                                                                       | false   |
| portalled              | Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position&#xA;of the popover content.                                                                                                                     | boolean \| undefined                                                                                                                                                       | true    |
| initialFocusEl         | The element to focus on when the popover is opened.                                                                                                                                                                                                   | (() => HTMLElement \| null) \| undefined                                                                                                                                   | -       |
| closeOnInteractOutside | Whether to close the popover when the user clicks outside of the popover.                                                                                                                                                                             | boolean \| undefined                                                                                                                                                       | true    |
| closeOnEscape          | Whether to close the popover when the escape key is pressed.                                                                                                                                                                                          | boolean \| undefined                                                                                                                                                       | true    |
| onOpenChange           | Function invoked when the popover opens or closes                                                                                                                                                                                                     | ((details: OpenChangeDetails) => void) \| undefined                                                                                                                        | -       |
| positioning            | The user provided options used to position the popover content                                                                                                                                                                                        | PositioningOptions \| undefined                                                                                                                                            | -       |
| open                   | The controlled open state of the popover                                                                                                                                                                                                              | boolean \| undefined                                                                                                                                                       | -       |
| defaultOpen            | The initial open state of the popover when rendered.&#xA;Use when you don't need to control the open state of the popover.                                                                                                                            | boolean \| undefined                                                                                                                                                       | -       |
| getRootNode            | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                                                                                                                                            | (() => Node \| ShadowRoot \| Document) \| undefined                                                                                                                        | -       |
| onEscapeKeyDown        | Function called when the escape key is pressed                                                                                                                                                                                                        | ((event: KeyboardEvent) => void) \| undefined                                                                                                                              | -       |
| onRequestDismiss       | Function called when this layer is closed due to a parent layer being closed                                                                                                                                                                          | ((event: LayerDismissEvent) => void) \| undefined                                                                                                                          | -       |
| onPointerDownOutside   | Function called when the pointer is pressed down outside the component                                                                                                                                                                                | ((event: PointerDownOutsideEvent) => void) \| undefined                                                                                                                    | -       |
| onFocusOutside         | Function called when the focus is moved outside the component                                                                                                                                                                                         | ((event: FocusOutsideEvent) => void) \| undefined                                                                                                                          | -       |
| onInteractOutside      | Function called when an interaction happens outside the component                                                                                                                                                                                     | ((event: InteractOutsideEvent) => void) \| undefined                                                                                                                       | -       |
| persistentElements     | Returns the persistent elements that:&#xA;- should not have pointer-events disabled&#xA;- should not trigger the dismiss event                                                                                                                        | (() => Element \| null)\[] \| undefined                                                                                                                                    | -       |

### Provider

| Prop     | Description | Type                   | Default |
| -------- | ----------- | ---------------------- | ------- |
| value    | -           | PopoverApi\<PropTypes> | -       |
| children | -           | ReactNode              | -       |

### Context

| Prop     | Description | Type                                           | Default |
| -------- | ----------- | ---------------------------------------------- | ------- |
| children | -           | (popover: PopoverApi\<PropTypes>) => ReactNode | -       |

### Trigger

| Prop     | Description                 | Type                                                              | Default |
| -------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| children | -                           | ReactNode                                                         | -       |
| element  | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### Positioner

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Content

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Arrow

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### ArrowTip

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Title

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Description

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### CloseTrigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

# Portal

Renders children into a DOM node that exists outside the DOM hierarchy.

```tsx
import { Portal } from '@skeletonlabs/skeleton-react';
import { SkullIcon } from 'lucide-react';
import { useState, useRef } from 'react';

export default function Default() {
	const [disabled, setDisabled] = useState(true);
	const ref = useRef<HTMLDivElement | null>(null);

	const cardClasses = 'card preset-outlined-surface-300-700 size-24 grid place-items-center p-4';
	const buttonClasses = 'col-span-2 btn preset-filled';

	return (
		<div className="grid grid-cols-2 gap-4">
			{/* Source */}
			<div className={cardClasses}>
				<Portal disabled={disabled} target={ref.current ?? undefined}>
					<SkullIcon className="size-8" />
				</Portal>
			</div>

			{/* Target */}
			<div className={cardClasses} ref={ref}>
				{/* (the content will appear here) */}
			</div>

			{/* Trigger */}
			<button className={buttonClasses} onClick={() => setDisabled(!disabled)}>
				{disabled ? 'Enable' : 'Disable'}
			</button>
		</div>
	);
}

```

## How It Works

When enabled, the content will move from the source to the target element.

## API Reference

### Root

| Prop     | Description                                                                       | Type                                                                                                                                                                   | Default       |
| -------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| disabled | If true, the portal functionality is disabled and children are rendered in place. | boolean \| undefined                                                                                                                                                   | false         |
| target   | The HTML element to which the portal content will be appended.                    | HTMLElement \| undefined                                                                                                                                               | document.body |
| children | -                                                                                 | string \| number \| bigint \| boolean \| ReactElement\<unknown, string \| JSXElementConstructor\<any>> \| Iterable\<ReactNode> \| ReactPortal \| Promise\<...> \| null | -             |

# Progress - Circular

Circular progress indicators for showing task progress.

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

export default function Default() {
	const [value, setValue] = useState(50);
	return (
		<div className="flex flex-col gap-8 items-center">
			<Progress value={value} className="items-center w-fit">
				<Progress.Label>Label</Progress.Label>
				<Progress.Circle>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
				<Progress.ValueText />
			</Progress>
			<Slider className="w-full" value={[value]} onValueChange={(e) => setValue(e.value[0])} step={10}>
				<Slider.Control>
					<Slider.Track>
						<Slider.Range />
					</Slider.Track>
					<Slider.Thumb index={0}>
						<Slider.HiddenInput />
					</Slider.Thumb>
				</Slider.Control>
			</Slider>
		</div>
	);
}

```

## Size

Use different sizes for context-appropriate indicators.

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

export default function Size() {
	return (
		<div className="flex gap-4 justify-evenly items-center w-full">
			<Progress value={75} className="w-fit">
				<Progress.Circle style={{ '--size': '48px', '--thickness': '6px' } as CSSProperties}>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
			</Progress>
			<Progress value={75} className="w-fit">
				<Progress.Circle>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
			</Progress>
			<Progress value={75} className="w-fit">
				<Progress.Circle style={{ '--size': '125px', '--thickness': '12px' } as CSSProperties}>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
			</Progress>
		</div>
	);
}

```

## Color

Change the track and indicator colour using utility classes or custom CSS variables to match your design system.

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

export default function Color() {
	return (
		<div className="flex gap-4 justify-evenly items-center w-full">
			<Progress value={40} className="w-fit">
				<Progress.Circle>
					<Progress.CircleTrack className="stroke-primary-500/30" />
					<Progress.CircleRange className="stroke-primary-500" />
				</Progress.Circle>
			</Progress>
			<Progress value={40} className="w-fit">
				<Progress.Circle>
					<Progress.CircleTrack className="stroke-secondary-500/30" />
					<Progress.CircleRange className="stroke-secondary-500" />
				</Progress.Circle>
			</Progress>
			<Progress value={40} className="w-fit">
				<Progress.Circle>
					<Progress.CircleTrack className="stroke-tertiary-500/30" />
					<Progress.CircleRange className="stroke-tertiary-500" />
				</Progress.Circle>
			</Progress>
		</div>
	);
}

```

## Centered Content

Place content in the center of the circular progress if needed (for example, a numeric value).

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

export default function CenteredContent() {
	return (
		<Progress className="w-fit relative">
			<div className="absolute inset-0 flex items-center justify-center">
				<Progress.ValueText />
			</div>
			<Progress.Circle>
				<Progress.CircleTrack />
				<Progress.CircleRange />
			</Progress.Circle>
		</Progress>
	);
}

```

## Indeterminate

Use a `null` value to enable indeterminate mode.

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

export default function Default() {
	return (
		<Progress className="items-center w-fit" value={null}>
			<Progress.Circle>
				<Progress.CircleTrack />
				<Progress.CircleRange />
			</Progress.Circle>
			<Progress.ValueText />
		</Progress>
	);
}

```

## Format

Use the `format` prop to customize the output of the `ValueText` component. Options include:

* `percentage` (default)
* `decimal` (0.0 - 1.0)
* Custom - via the [Intl API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl).

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

export default function Format() {
	return (
		<div className="flex gap-4 justify-evenly items-center w-full">
			<Progress className="items-center w-fit" formatOptions={{ style: 'percent' }}>
				<Progress.Circle>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
				<Progress.ValueText />
			</Progress>
			<Progress className="items-center w-fit" formatOptions={{ style: 'decimal' }}>
				<Progress.Circle>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
				<Progress.ValueText />
			</Progress>
			<Progress className="items-center w-fit" formatOptions={{ style: 'currency', currency: 'EUR' }}>
				<Progress.Circle>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
				<Progress.ValueText />
			</Progress>
		</div>
	);
}

```

## Custom Value Text

Provide a custom renderer for the `ValueText` if you need to show a different layout or label.

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

export default function CustomValueText() {
	return (
		<Progress className="items-center w-fit">
			<Progress.Circle>
				<Progress.CircleTrack />
				<Progress.CircleRange />
			</Progress.Circle>
			<Progress.ValueText>
				<Progress.Context>{(progress) => `${progress.value} of ${progress.max}`}</Progress.Context>
			</Progress.ValueText>
		</Progress>
	);
}

```

## API Reference

### Root

| Prop          | Description                                                                                                                | Type                                                                                    | Default               |
| ------------- | -------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | --------------------- |
| ids           | The ids of the elements in the progress bar. Useful for composition.                                                       | Partial\<\{ root: string; track: string; label: string; circle: string; }> \| undefined | -                     |
| value         | The controlled value of the progress bar.                                                                                  | number \| null \| undefined                                                             | -                     |
| defaultValue  | The initial value of the progress bar when rendered.&#xA;Use when you don't need to control the value of the progress bar. | number \| null \| undefined                                                             | 50                    |
| min           | The minimum allowed value of the progress bar.                                                                             | number \| undefined                                                                     | 0                     |
| max           | The maximum allowed value of the progress bar.                                                                             | number \| undefined                                                                     | 100                   |
| translations  | The localized messages to use.                                                                                             | IntlTranslations \| undefined                                                           | -                     |
| onValueChange | Callback fired when the value changes.                                                                                     | ((details: ValueChangeDetails) => void) \| undefined                                    | -                     |
| formatOptions | The options to use for formatting the value.                                                                               | NumberFormatOptions \| undefined                                                        | \{ style: "percent" } |
| locale        | The locale to use for formatting the value.                                                                                | string \| undefined                                                                     | "en-US"               |
| dir           | The document's text/writing direction.                                                                                     | "ltr" \| "rtl" \| undefined                                                             | "ltr"                 |
| getRootNode   | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                 | (() => ShadowRoot \| Node \| Document) \| undefined                                     | -                     |
| orientation   | The orientation of the element.                                                                                            | "horizontal" \| "vertical" \| undefined                                                 | "horizontal"          |
| element       | Render the element yourself                                                                                                | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                          | -                     |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | ProgressApi\<PropTypes>                                        | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                             | Default |
| -------- | ----------- | ------------------------------------------------ | ------- |
| children | -           | (progress: ProgressApi\<PropTypes>) => ReactNode | -       |

### Label

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### ValueText

| Prop    | Description                 | Type                                                            | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | -       |

### Track

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Range

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Circle

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"svg">) => Element) \| undefined | -       |

### CircleTrack

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"circle">) => Element) \| undefined | -       |

### CircleRange

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"circle">) => Element) \| undefined | -       |

# Progress - Linear

An indicator showing the progress or completion of a task.

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

export default function Default() {
	return (
		<Progress>
			<Progress.Label>
				<Progress.ValueText />
			</Progress.Label>
			<Progress.Track>
				<Progress.Range />
			</Progress.Track>
		</Progress>
	);
}

```

## Color

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

export default function Color() {
	return (
		<div className="flex w-full flex-col gap-8">
			<Progress>
				<Progress.Track>
					<Progress.Range className="bg-primary-500" />
				</Progress.Track>
			</Progress>
			<Progress>
				<Progress.Track>
					<Progress.Range className="bg-secondary-500" />
				</Progress.Track>
			</Progress>
			<Progress>
				<Progress.Track>
					<Progress.Range className="bg-tertiary-500" />
				</Progress.Track>
			</Progress>
		</div>
	);
}

```

## Height

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

export default function Height() {
	return (
		<div className="flex w-full flex-col gap-8">
			<Progress>
				<Progress.Track className="h-1">
					<Progress.Range />
				</Progress.Track>
			</Progress>
			<Progress>
				<Progress.Track className="h-4">
					<Progress.Range />
				</Progress.Track>
			</Progress>
			<Progress>
				<Progress.Track className="h-6">
					<Progress.Range />
				</Progress.Track>
			</Progress>
		</div>
	);
}

```

## Orientation

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

export default function Orientation() {
	return (
		<Progress orientation="vertical">
			<Progress.Track>
				<Progress.Range />
			</Progress.Track>
		</Progress>
	);
}

```

## Indeterminate

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

export default function Indeterminate() {
	return (
		<Progress value={null}>
			<Progress.Track>
				<Progress.Range />
			</Progress.Track>
		</Progress>
	);
}

```

## Custom Animation

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

export default function CustomAnimation() {
	return (
		<>
			<Progress value={null}>
				<Progress.Track>
					<Progress.Range className="animate-[custom-animation_2s_ease-in-out_infinite]" />
				</Progress.Track>
			</Progress>
			<style>{`
                @keyframes custom-animation {
                    from {
                        scale: 0.5 1;
                        transform: translateX(-200%);
                    }
                    25% {
                        transform: translateX(50%);
                    }
                    50% {
                        transform: translateX(-50%);
                    }
                    75% {
                        transform: translateX(150%);
                    }
                    to {
                        scale: 0.5 1;
                        transform: translateX(200%);
                    }
                }
            `}</style>
		</>
	);
}

```

## Direction

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

export default function Dir() {
	return (
		<Progress dir="rtl">
			<Progress.Label>Label</Progress.Label>
			<Progress.Track>
				<Progress.Range />
			</Progress.Track>
		</Progress>
	);
}

```

## Native Alternative

```tsx
export default function Native() {
	return <progress className="progress" value="50" max="100" />;
}

```

## API Reference

### Root

| Prop          | Description                                                                                                                | Type                                                                                    | Default               |
| ------------- | -------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | --------------------- |
| ids           | The ids of the elements in the progress bar. Useful for composition.                                                       | Partial\<\{ root: string; track: string; label: string; circle: string; }> \| undefined | -                     |
| value         | The controlled value of the progress bar.                                                                                  | number \| null \| undefined                                                             | -                     |
| defaultValue  | The initial value of the progress bar when rendered.&#xA;Use when you don't need to control the value of the progress bar. | number \| null \| undefined                                                             | 50                    |
| min           | The minimum allowed value of the progress bar.                                                                             | number \| undefined                                                                     | 0                     |
| max           | The maximum allowed value of the progress bar.                                                                             | number \| undefined                                                                     | 100                   |
| translations  | The localized messages to use.                                                                                             | IntlTranslations \| undefined                                                           | -                     |
| onValueChange | Callback fired when the value changes.                                                                                     | ((details: ValueChangeDetails) => void) \| undefined                                    | -                     |
| formatOptions | The options to use for formatting the value.                                                                               | NumberFormatOptions \| undefined                                                        | \{ style: "percent" } |
| locale        | The locale to use for formatting the value.                                                                                | string \| undefined                                                                     | "en-US"               |
| dir           | The document's text/writing direction.                                                                                     | "ltr" \| "rtl" \| undefined                                                             | "ltr"                 |
| getRootNode   | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                 | (() => ShadowRoot \| Node \| Document) \| undefined                                     | -                     |
| orientation   | The orientation of the element.                                                                                            | "horizontal" \| "vertical" \| undefined                                                 | "horizontal"          |
| element       | Render the element yourself                                                                                                | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                          | -                     |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | ProgressApi\<PropTypes>                                        | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                             | Default |
| -------- | ----------- | ------------------------------------------------ | ------- |
| children | -           | (progress: ProgressApi\<PropTypes>) => ReactNode | -       |

### Label

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### ValueText

| Prop    | Description                 | Type                                                            | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | -       |

### Track

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Range

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Circle

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"svg">) => Element) \| undefined | -       |

### CircleTrack

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"circle">) => Element) \| undefined | -       |

### CircleRange

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"circle">) => Element) \| undefined | -       |

# Rating Group

Rating Group allows users to rate something

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

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

```

## Allow Half

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

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

```

## Custom Icons

```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';
import { BoneIcon, SkullIcon } from 'lucide-react';

export default function CustomIcons() {
	return (
		<RatingGroup count={3}>
			<RatingGroup.Control>
				<RatingGroup.Context>
					{(ratingGroup) =>
						ratingGroup.items.map((index) => <RatingGroup.Item key={index} index={index} empty={<BoneIcon />} full={<SkullIcon />} />)
					}
				</RatingGroup.Context>
			</RatingGroup.Control>
			<RatingGroup.HiddenInput />
		</RatingGroup>
	);
}

```

## Label

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

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

```

## Disabled

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

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

```

## Direction

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

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

```

## API Reference

### Root

| Prop          | Description                                                                                                    | Type                                                                                                                         | Default |
| ------------- | -------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------- |
| ids           | The ids of the elements in the rating. Useful for composition.                                                 | Partial\<\{ root: string; label: string; hiddenInput: string; control: string; item: (id: string) => string; }> \| undefined | -       |
| translations  | Specifies the localized strings that identifies the accessibility elements and their states                    | IntlTranslations \| undefined                                                                                                | -       |
| count         | The total number of ratings.                                                                                   | number \| undefined                                                                                                          | 5       |
| name          | The name attribute of the rating element (used in forms).                                                      | string \| undefined                                                                                                          | -       |
| form          | The associate form of the underlying input element.                                                            | string \| undefined                                                                                                          | -       |
| value         | The controlled value of the rating                                                                             | number \| undefined                                                                                                          | -       |
| defaultValue  | The initial value of the rating when rendered.&#xA;Use when you don't need to control the value of the rating. | number \| undefined                                                                                                          | -       |
| readOnly      | Whether the rating is readonly.                                                                                | boolean \| undefined                                                                                                         | -       |
| disabled      | Whether the rating is disabled.                                                                                | boolean \| undefined                                                                                                         | -       |
| required      | Whether the rating is required.                                                                                | boolean \| undefined                                                                                                         | -       |
| allowHalf     | Whether to allow half stars.                                                                                   | boolean \| undefined                                                                                                         | -       |
| autoFocus     | Whether to autofocus the rating.                                                                               | boolean \| undefined                                                                                                         | -       |
| onValueChange | Function to be called when the rating value changes.                                                           | ((details: ValueChangeDetails) => void) \| undefined                                                                         | -       |
| onHoverChange | Function to be called when the rating value is hovered.                                                        | ((details: HoverChangeDetails) => void) \| undefined                                                                         | -       |
| dir           | The document's text/writing direction.                                                                         | "ltr" \| "rtl" \| undefined                                                                                                  | "ltr"   |
| getRootNode   | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                     | (() => ShadowRoot \| Node \| Document) \| undefined                                                                          | -       |
| element       | Render the element yourself                                                                                    | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                               | -       |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | RatingGroupApi\<PropTypes>                                     | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                                   | Default |
| -------- | ----------- | ------------------------------------------------------ | ------- |
| children | -           | (ratingGroup: RatingGroupApi\<PropTypes>) => ReactNode | -       |

### Label

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | -       |

### Control

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Item

| Prop    | Description                                                | Type                                                            | Default         |
| ------- | ---------------------------------------------------------- | --------------------------------------------------------------- | --------------- |
| empty   | The content to render when the item is in the empty state. | ReactNode                                                       | StarEmpty (SVG) |
| half    | The content to render when the item is in the half state.  | ReactNode                                                       | StarHalf (SVG)  |
| full    | The content to render when the item is in the full state.  | ReactNode                                                       | StarFull (SVG)  |
| index   | -                                                          | number                                                          | -               |
| element | Render the element yourself                                | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | -               |

### HiddenInput

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | -       |

# Segmented Control

Capture input for a limited set of options.

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

export default function Default() {
	return (
		<SegmentedControl defaultValue="item-1">
			<SegmentedControl.Label>Label</SegmentedControl.Label>
			<SegmentedControl.Control>
				<SegmentedControl.Indicator />
				<SegmentedControl.Item value="item-1">
					<SegmentedControl.ItemText>Item 1</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
				<SegmentedControl.Item value="item-2">
					<SegmentedControl.ItemText>Item 2</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
				<SegmentedControl.Item value="item-3">
					<SegmentedControl.ItemText>Item 3</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
			</SegmentedControl.Control>
		</SegmentedControl>
	);
}

```

## Controlled

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

export default function Controlled() {
	const [value, setValue] = useState<string | null>('item-1');

	return (
		<div className="flex flex-col items-center gap-4">
			<SegmentedControl value={value} onValueChange={(details) => setValue(details.value)}>
				<SegmentedControl.Control>
					<SegmentedControl.Indicator />
					{['item-1', 'item-2', 'item-3'].map((item) => (
						<SegmentedControl.Item value={item} key={item}>
							<SegmentedControl.ItemText>{item}</SegmentedControl.ItemText>
							<SegmentedControl.ItemHiddenInput />
						</SegmentedControl.Item>
					))}
				</SegmentedControl.Control>
			</SegmentedControl>
			<pre className="pre">{value}</pre>
		</div>
	);
}

```

## Icons

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

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

```

## Orientation

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

export default function Orientation() {
	return (
		<SegmentedControl defaultValue="item-1" orientation="vertical">
			<SegmentedControl.Control>
				<SegmentedControl.Indicator />
				<SegmentedControl.Item value="item-1">
					<SegmentedControl.ItemText>Item 1</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
				<SegmentedControl.Item value="item-2">
					<SegmentedControl.ItemText>Item 2</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
				<SegmentedControl.Item value="item-3">
					<SegmentedControl.ItemText>Item 3</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
			</SegmentedControl.Control>
		</SegmentedControl>
	);
}

```

## API Reference

### Root

| Prop          | Description                                                                                                                | Type                                                                                                                                                                                                                                   | Default |
| ------------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| ids           | The ids of the elements in the radio. Useful for composition.                                                              | Partial\<\{ root: string; label: string; indicator: string; item: (value: string) => string; itemLabel: (value: string) => string; itemControl: (value: string) => string; itemHiddenInput: (value: string) => string; }> \| undefined | -       |
| value         | The controlled value of the radio group                                                                                    | string \| null \| undefined                                                                                                                                                                                                            | -       |
| defaultValue  | The initial value of the checked radio when rendered.&#xA;Use when you don't need to control the value of the radio group. | string \| null \| undefined                                                                                                                                                                                                            | -       |
| name          | The name of the input fields in the radio&#xA;(Useful for form submission).                                                | string \| undefined                                                                                                                                                                                                                    | -       |
| form          | The associate form of the underlying input.                                                                                | string \| undefined                                                                                                                                                                                                                    | -       |
| disabled      | If \`true\`, the radio group will be disabled                                                                              | boolean \| undefined                                                                                                                                                                                                                   | -       |
| readOnly      | Whether the checkbox is read-only                                                                                          | boolean \| undefined                                                                                                                                                                                                                   | -       |
| onValueChange | Function called once a radio is checked                                                                                    | ((details: ValueChangeDetails) => void) \| undefined                                                                                                                                                                                   | -       |
| orientation   | Orientation of the radio group                                                                                             | "horizontal" \| "vertical" \| undefined                                                                                                                                                                                                | -       |
| dir           | The document's text/writing direction.                                                                                     | "ltr" \| "rtl" \| undefined                                                                                                                                                                                                            | "ltr"   |
| getRootNode   | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                 | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                                                                                                    | -       |
| element       | Render the element yourself                                                                                                | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                                                                                                         | -       |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | RadioGroupApi\<PropTypes>                                      | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                                  | Default |
| -------- | ----------- | ----------------------------------------------------- | ------- |
| children | -           | (ratingGroup: RadioGroupApi\<PropTypes>) => ReactNode | -       |

### Label

| Prop    | Description                 | Type                                                            | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | -       |

### Control

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Indicator

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Item

| Prop     | Description                 | Type                                                             | Default |
| -------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| value    | -                           | string                                                           | -       |
| disabled | -                           | boolean \| undefined                                             | -       |
| invalid  | -                           | boolean \| undefined                                             | -       |
| element  | Render the element yourself | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | -       |

### ItemText

| Prop    | Description                 | Type                                                            | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | -       |

### ItemHiddenInput

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | -       |

# Slider

Capture input from a range of values.

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

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

```

## Color

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

export default function Color() {
	return (
		<div className="space-y-8 w-full">
			<Slider defaultValue={[50]}>
				<Slider.Control>
					<Slider.Track>
						<Slider.Range className="bg-primary-500" />
					</Slider.Track>
					<Slider.Thumb index={0}>
						<Slider.HiddenInput />
					</Slider.Thumb>
				</Slider.Control>
			</Slider>
			<Slider defaultValue={[50]}>
				<Slider.Control>
					<Slider.Track>
						<Slider.Range className="bg-secondary-500" />
					</Slider.Track>
					<Slider.Thumb index={0}>
						<Slider.HiddenInput />
					</Slider.Thumb>
				</Slider.Control>
			</Slider>
			<Slider defaultValue={[50]}>
				<Slider.Control>
					<Slider.Track>
						<Slider.Range className="bg-tertiary-500" />
					</Slider.Track>
					<Slider.Thumb index={0}>
						<Slider.HiddenInput />
					</Slider.Thumb>
				</Slider.Control>
			</Slider>
		</div>
	);
}

```

## Disabled

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

export default function Disabled() {
	return (
		<Slider defaultValue={[50]} disabled>
			<Slider.Control>
				<Slider.Track>
					<Slider.Range />
				</Slider.Track>
				<Slider.Thumb index={0}>
					<Slider.HiddenInput />
				</Slider.Thumb>
			</Slider.Control>
		</Slider>
	);
}

```

## Read-Only

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

export default function Readonly() {
	return (
		<Slider defaultValue={[50]} readOnly>
			<Slider.Control>
				<Slider.Track>
					<Slider.Range />
				</Slider.Track>
				<Slider.Thumb index={0}>
					<Slider.HiddenInput />
				</Slider.Thumb>
			</Slider.Control>
		</Slider>
	);
}

```

## Multiple Thumbs

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

export default function MultipleThumbs() {
	return (
		<Slider defaultValue={[25, 75]}>
			<Slider.Control>
				<Slider.Track>
					<Slider.Range />
				</Slider.Track>
				<Slider.Thumb index={0}>
					<Slider.HiddenInput />
				</Slider.Thumb>
				<Slider.Thumb index={1}>
					<Slider.HiddenInput />
				</Slider.Thumb>
			</Slider.Control>
		</Slider>
	);
}

```

## Direction

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

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

```

## API Reference

### Root

| Prop                  | Description                                                                                                                                                                                                                                                                                                          | Type                                                                                                                                                                                                                                    | Default      |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| ids                   | The ids of the elements in the slider. Useful for composition.                                                                                                                                                                                                                                                       | Partial\<\{ root: string; thumb: (index: number) => string; hiddenInput: (index: number) => string; control: string; track: string; range: string; label: string; valueText: string; marker: (index: number) => string; }> \| undefined | -            |
| aria-label            | The aria-label of each slider thumb. Useful for providing an accessible name to the slider                                                                                                                                                                                                                           | string\[] \| undefined                                                                                                                                                                                                                  | -            |
| aria-labelledby       | The \`id\` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider                                                                                                                                                                                                      | string\[] \| undefined                                                                                                                                                                                                                  | -            |
| name                  | The name associated with each slider thumb (when used in a form)                                                                                                                                                                                                                                                     | string \| undefined                                                                                                                                                                                                                     | -            |
| form                  | The associate form of the underlying input element.                                                                                                                                                                                                                                                                  | string \| undefined                                                                                                                                                                                                                     | -            |
| value                 | The controlled value of the slider                                                                                                                                                                                                                                                                                   | number\[] \| undefined                                                                                                                                                                                                                  | -            |
| defaultValue          | The initial value of the slider when rendered.&#xA;Use when you don't need to control the value of the slider.                                                                                                                                                                                                       | number\[] \| undefined                                                                                                                                                                                                                  | -            |
| disabled              | Whether the slider is disabled                                                                                                                                                                                                                                                                                       | boolean \| undefined                                                                                                                                                                                                                    | -            |
| readOnly              | Whether the slider is read-only                                                                                                                                                                                                                                                                                      | boolean \| undefined                                                                                                                                                                                                                    | -            |
| invalid               | Whether the slider is invalid                                                                                                                                                                                                                                                                                        | boolean \| undefined                                                                                                                                                                                                                    | -            |
| onValueChange         | Function invoked when the value of the slider changes                                                                                                                                                                                                                                                                | ((details: ValueChangeDetails) => void) \| undefined                                                                                                                                                                                    | -            |
| onValueChangeEnd      | Function invoked when the slider value change is done                                                                                                                                                                                                                                                                | ((details: ValueChangeDetails) => void) \| undefined                                                                                                                                                                                    | -            |
| onFocusChange         | Function invoked when the slider's focused index changes                                                                                                                                                                                                                                                             | ((details: FocusChangeDetails) => void) \| undefined                                                                                                                                                                                    | -            |
| getAriaValueText      | Function that returns a human readable value for the slider thumb                                                                                                                                                                                                                                                    | ((details: ValueTextDetails) => string) \| undefined                                                                                                                                                                                    | -            |
| min                   | The minimum value of the slider                                                                                                                                                                                                                                                                                      | number \| undefined                                                                                                                                                                                                                     | 0            |
| max                   | The maximum value of the slider                                                                                                                                                                                                                                                                                      | number \| undefined                                                                                                                                                                                                                     | 100          |
| step                  | The step value of the slider                                                                                                                                                                                                                                                                                         | number \| undefined                                                                                                                                                                                                                     | 1            |
| minStepsBetweenThumbs | The minimum permitted steps between multiple thumbs.&#xA;&#xA;\`minStepsBetweenThumbs\` \* \`step\` should reflect the gap between the thumbs.&#xA;&#xA;- \`step: 1\` and \`minStepsBetweenThumbs: 10\` => gap is \`10\`&#xA;- \`step: 10\` and \`minStepsBetweenThumbs: 2\` => gap is \`20\`                        | number \| undefined                                                                                                                                                                                                                     | 0            |
| orientation           | The orientation of the slider                                                                                                                                                                                                                                                                                        | "vertical" \| "horizontal" \| undefined                                                                                                                                                                                                 | "horizontal" |
| origin                | The origin of the slider range. The track is filled from the origin&#xA;to the thumb for single values.&#xA;- "start": Useful when the value represents an absolute value&#xA;- "center": Useful when the value represents an offset (relative)&#xA;- "end": Useful when the value represents an offset from the end | "start" \| "center" \| "end" \| undefined                                                                                                                                                                                               | "start"      |
| thumbAlignment        | The alignment of the slider thumb relative to the track&#xA;- \`center\`: the thumb will extend beyond the bounds of the slider track.&#xA;- \`contain\`: the thumb will be contained within the bounds of the track.                                                                                                | "center" \| "contain" \| undefined                                                                                                                                                                                                      | "contain"    |
| thumbSize             | The slider thumbs dimensions                                                                                                                                                                                                                                                                                         | \{ width: number; height: number; } \| undefined                                                                                                                                                                                        | -            |
| dir                   | The document's text/writing direction.                                                                                                                                                                                                                                                                               | "ltr" \| "rtl" \| undefined                                                                                                                                                                                                             | "ltr"        |
| getRootNode           | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                                                                                                                                                                                                           | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                                                                                                     | -            |
| element               | Render the element yourself                                                                                                                                                                                                                                                                                          | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                                                                                                          | -            |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | SliderApi\<PropTypes>                                          | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                         | Default |
| -------- | ----------- | -------------------------------------------- | ------- |
| children | -           | (slider: SliderApi\<PropTypes>) => ReactNode | -       |

### Label

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | -       |

### ValueText

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"output">) => Element) \| undefined | -       |

### Control

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Track

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Range

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Thumb

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| index   | -                           | number                                                         | -       |
| name    | -                           | string \| undefined                                            | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### HiddenInput

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | -       |

### MarkerGroup

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Marker

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | number                                                         | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

# Switch

Toggle between two states, such as on/off.

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

export default function Default() {
	return (
		<Switch>
			<Switch.Control>
				<Switch.Thumb />
			</Switch.Control>
			<Switch.Label>Label</Switch.Label>
			<Switch.HiddenInput />
		</Switch>
	);
}

```

## Checked Color

Use the [Tailwind data attribute syntax](https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes) to target the active state using `data-[state=checked]`

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

export default function Colors() {
	return (
		<Switch>
			<Switch.Control className="data-[state=checked]:preset-filled-success-500">
				<Switch.Thumb />
			</Switch.Control>
			<Switch.Label>Label</Switch.Label>
			<Switch.HiddenInput />
		</Switch>
	);
}

```

## List

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

export default function List() {
	return (
		<div className="grid gap-2 w-full">
			{['Option 1', 'Option 2', 'Option 3'].map((label, i) => (
				<div key={label}>
					<Switch className="flex justify-between p-2">
						<Switch.Label>{label}</Switch.Label>
						<Switch.Control>
							<Switch.Thumb />
						</Switch.Control>
						<Switch.HiddenInput />
					</Switch>
					{i < 2 && <hr className="hr" />}
				</div>
			))}
		</div>
	);
}

```

## Icons

```tsx
import { Switch } from '@skeletonlabs/skeleton-react';
import { MoonIcon, SunIcon } from 'lucide-react';

export default function ThumbIcons() {
	return (
		<Switch>
			<Switch.HiddenInput />
			<Switch.Control>
				<Switch.Thumb>
					<Switch.Context>
						{(switch_) => (switch_.checked ? <SunIcon className="size-3" /> : <MoonIcon className="size-3" />)}
					</Switch.Context>
				</Switch.Thumb>
			</Switch.Control>
			<Switch.Label>Label</Switch.Label>
		</Switch>
	);
}

```

## Direction

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

export default function Dir() {
	return (
		<Switch dir="rtl">
			<Switch.Control>
				<Switch.Thumb />
			</Switch.Control>
			<Switch.Label>Label</Switch.Label>
			<Switch.HiddenInput />
		</Switch>
	);
}

```

## API Reference

### Root

| Prop            | Description                                                                                                                    | Type                                                                                                          | Default |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ------- |
| ids             | The ids of the elements in the switch. Useful for composition.                                                                 | Partial\<\{ root: string; hiddenInput: string; control: string; label: string; thumb: string; }> \| undefined | -       |
| label           | Specifies the localized strings that identifies the accessibility elements and their states                                    | string \| undefined                                                                                           | -       |
| disabled        | Whether the switch is disabled.                                                                                                | boolean \| undefined                                                                                          | -       |
| invalid         | If \`true\`, the switch is marked as invalid.                                                                                  | boolean \| undefined                                                                                          | -       |
| required        | If \`true\`, the switch input is marked as required,                                                                           | boolean \| undefined                                                                                          | -       |
| readOnly        | Whether the switch is read-only                                                                                                | boolean \| undefined                                                                                          | -       |
| onCheckedChange | Function to call when the switch is clicked.                                                                                   | ((details: CheckedChangeDetails) => void) \| undefined                                                        | -       |
| checked         | The controlled checked state of the switch                                                                                     | boolean \| undefined                                                                                          | -       |
| defaultChecked  | The initial checked state of the switch when rendered.&#xA;Use when you don't need to control the checked state of the switch. | boolean \| undefined                                                                                          | -       |
| name            | The name of the input field in a switch&#xA;(Useful for form submission).                                                      | string \| undefined                                                                                           | -       |
| form            | The id of the form that the switch belongs to                                                                                  | string \| undefined                                                                                           | -       |
| value           | The value of switch input. Useful for form submission.                                                                         | string \| number \| undefined                                                                                 | "on"    |
| dir             | The document's text/writing direction.                                                                                         | "ltr" \| "rtl" \| undefined                                                                                   | "ltr"   |
| getRootNode     | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                     | (() => ShadowRoot \| Node \| Document) \| undefined                                                           | -       |
| element         | Render the element yourself                                                                                                    | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined                                              | -       |

### Provider

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| value   | -                           | SwitchApi\<PropTypes>                                            | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                           | Default |
| -------- | ----------- | ---------------------------------------------- | ------- |
| children | -           | (switch\_: SwitchApi\<PropTypes>) => ReactNode | -       |

### Control

| Prop    | Description                 | Type                                                            | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | -       |

### Thumb

| Prop    | Description                 | Type                                                            | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | -       |

### Label

| Prop    | Description                 | Type                                                            | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | -       |

### HiddenInput

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | -       |

# Tabs

Use tabs to quickly switch between different views and pages.

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

export default function Default() {
	return (
		<Tabs defaultValue="overview">
			<Tabs.List>
				<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
				<Tabs.Trigger value="features">Key features</Tabs.Trigger>
				<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
				<Tabs.Indicator />
			</Tabs.List>
			<Tabs.Content value="overview">
				A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
				to deeper docs.
			</Tabs.Content>
			<Tabs.Content value="features">
				List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
				theming, integrations).
			</Tabs.Content>
			<Tabs.Content value="activity">
				Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
				actionable.
			</Tabs.Content>
		</Tabs>
	);
}

```

## Controlled

Use the `value` and `onValueChange` props to control the active tab programmatically.

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

export default function Controlled() {
	const [value, setValue] = useState('overview');

	return (
		<Tabs value={value} onValueChange={(details) => setValue(details.value)}>
			<Tabs.List>
				<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
				<Tabs.Trigger value="features">Key features</Tabs.Trigger>
				<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
				<Tabs.Indicator />
			</Tabs.List>
			<Tabs.Content value="overview">
				A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
				to deeper docs.
			</Tabs.Content>
			<Tabs.Content value="features">
				List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
				theming, integrations).
			</Tabs.Content>
			<Tabs.Content value="activity">
				Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
				actionable.
			</Tabs.Content>
		</Tabs>
	);
}

```

## Navigation

Use the `element` slot to override the default `button` with an `a` tag for navigation tabs.

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

export default function Navigation() {
	return (
		<Tabs defaultValue="overview">
			<Tabs.List>
				<Tabs.Trigger
					value="overview"
					element={(attributes: Record<string, unknown>) => (
						<a href="#overview" {...attributes}>
							Overview
						</a>
					)}
				/>
				<Tabs.Trigger
					value="features"
					element={(attributes: Record<string, unknown>) => (
						<a href="#features" {...attributes}>
							Key features
						</a>
					)}
				/>
				<Tabs.Trigger
					value="activity"
					element={(attributes: Record<string, unknown>) => (
						<a href="#activity" {...attributes}>
							Activity
						</a>
					)}
				/>
				<Tabs.Indicator />
			</Tabs.List>
			<Tabs.Content value="overview">
				A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
				to deeper docs.
			</Tabs.Content>
			<Tabs.Content value="features">
				List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
				theming, integrations).
			</Tabs.Content>
			<Tabs.Content value="activity">
				Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
				actionable.
			</Tabs.Content>
		</Tabs>
	);
}

```

## Fluid Width

Use `flex` utility classes to make the tabs stretch to fill the width of their container.

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

export default function Fluid() {
	return (
		<Tabs defaultValue="overview">
			<Tabs.List>
				<Tabs.Trigger className="flex-1" value="overview">
					Overview
				</Tabs.Trigger>
				<Tabs.Trigger className="flex-1" value="features">
					Key features
				</Tabs.Trigger>
				<Tabs.Trigger className="flex-1" value="activity">
					Activity
				</Tabs.Trigger>
				<Tabs.Indicator />
			</Tabs.List>
			<Tabs.Content value="overview">
				A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
				to deeper docs.
			</Tabs.Content>
			<Tabs.Content value="features">
				List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
				theming, integrations).
			</Tabs.Content>
			<Tabs.Content value="activity">
				Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
				actionable.
			</Tabs.Content>
		</Tabs>
	);
}

```

## Vertical

Use the `vertical` prop to render tabs stacked vertically.

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

export default function Vertical() {
	return (
		<Tabs defaultValue="overview" orientation="vertical">
			<Tabs.List>
				<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
				<Tabs.Trigger value="features">Key features</Tabs.Trigger>
				<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
				<Tabs.Indicator />
			</Tabs.List>
			<Tabs.Content value="overview">
				A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
				to deeper docs.
			</Tabs.Content>
			<Tabs.Content value="features">
				List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
				theming, integrations).
			</Tabs.Content>
			<Tabs.Content value="activity">
				Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
				actionable.
			</Tabs.Content>
		</Tabs>
	);
}

```

## Direction

Use the `dir` prop to switch direction for RTL/LTR layouts.

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

export default function Dir() {
	return (
		<Tabs defaultValue="overview" dir="rtl">
			<Tabs.List>
				<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
				<Tabs.Trigger value="features">Key features</Tabs.Trigger>
				<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
				<Tabs.Indicator />
			</Tabs.List>
			<Tabs.Content value="overview">
				A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
				to deeper docs.
			</Tabs.Content>
			<Tabs.Content value="features">
				List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
				theming, integrations).
			</Tabs.Content>
			<Tabs.Content value="activity">
				Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
				actionable.
			</Tabs.Content>
		</Tabs>
	);
}

```

## API Reference

### Root

| Prop           | Description                                                                                                                                                                                                       | Type                                                                                                                                               | Default      |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| ids            | The ids of the elements in the tabs. Useful for composition.                                                                                                                                                      | Partial\<\{ root: string; trigger: (value: string) => string; list: string; content: (value: string) => string; indicator: string; }> \| undefined | -            |
| translations   | Specifies the localized strings that identifies the accessibility elements and their states                                                                                                                       | IntlTranslations \| undefined                                                                                                                      | -            |
| loopFocus      | Whether the keyboard navigation will loop from last tab to first, and vice versa.                                                                                                                                 | boolean \| undefined                                                                                                                               | true         |
| value          | The controlled selected tab value                                                                                                                                                                                 | string \| null \| undefined                                                                                                                        | -            |
| defaultValue   | The initial selected tab value when rendered.&#xA;Use when you don't need to control the selected tab value.                                                                                                      | string \| null \| undefined                                                                                                                        | -            |
| orientation    | The orientation of the tabs. Can be \`horizontal\` or \`vertical\`&#xA;- \`horizontal\`: only left and right arrow key navigation will work.&#xA;- \`vertical\`: only up and down arrow key navigation will work. | "horizontal" \| "vertical" \| undefined                                                                                                            | "horizontal" |
| activationMode | The activation mode of the tabs. Can be \`manual\` or \`automatic\`&#xA;- \`manual\`: Tabs are activated when clicked or press \`enter\` key.&#xA;- \`automatic\`: Tabs are activated when receiving focus        | "manual" \| "automatic" \| undefined                                                                                                               | "automatic"  |
| onValueChange  | Callback to be called when the selected/active tab changes                                                                                                                                                        | ((details: ValueChangeDetails) => void) \| undefined                                                                                               | -            |
| onFocusChange  | Callback to be called when the focused tab changes                                                                                                                                                                | ((details: FocusChangeDetails) => void) \| undefined                                                                                               | -            |
| composite      | Whether the tab is composite                                                                                                                                                                                      | boolean \| undefined                                                                                                                               | -            |
| deselectable   | Whether the active tab can be deselected when clicking on it.                                                                                                                                                     | boolean \| undefined                                                                                                                               | -            |
| navigate       | Function to navigate to the selected tab when clicking on it.&#xA;Useful if tab triggers are anchor elements.                                                                                                     | ((details: NavigateDetails) => void) \| null \| undefined                                                                                          | -            |
| dir            | The document's text/writing direction.                                                                                                                                                                            | "ltr" \| "rtl" \| undefined                                                                                                                        | "ltr"        |
| getRootNode    | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                                                                                                        | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                | -            |
| element        | Render the element yourself                                                                                                                                                                                       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                     | -            |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | TabsApi\<PropTypes>                                            | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                     | Default |
| -------- | ----------- | ---------------------------------------- | ------- |
| children | -           | (tabs: TabsApi\<PropTypes>) => ReactNode | -       |

### List

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Trigger

| Prop     | Description                 | Type                                                              | Default |
| -------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| value    | The value of the tab        | string                                                            | -       |
| disabled | Whether the tab is disabled | boolean \| undefined                                              | -       |
| element  | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### Indicator

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Content

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | The value of the tab        | string                                                         | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

# Tags Input

Allows input of multiple values.

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

export default function Default() {
	return (
		<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
			<TagsInput.Label>Label</TagsInput.Label>
			<TagsInput.Control>
				<TagsInput.Context>
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							<TagsInput.Item key={index} value={value} index={index}>
								<TagsInput.ItemPreview>
									<TagsInput.ItemText>{value}</TagsInput.ItemText>
									<TagsInput.ItemDeleteTrigger />
								</TagsInput.ItemPreview>
								<TagsInput.ItemInput />
							</TagsInput.Item>
						))
					}
				</TagsInput.Context>
				<TagsInput.Input placeholder="Add a flavor..." />
			</TagsInput.Control>
			<TagsInput.ClearTrigger>Clear All</TagsInput.ClearTrigger>
			<TagsInput.HiddenInput />
		</TagsInput>
	);
}

```

## Controlled

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

export default function Default() {
	return (
		<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
			<TagsInput.Label>Label</TagsInput.Label>
			<TagsInput.Control>
				<TagsInput.Context>
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							<TagsInput.Item key={index} value={value} index={index}>
								<TagsInput.ItemPreview>
									<TagsInput.ItemText>{value}</TagsInput.ItemText>
									<TagsInput.ItemDeleteTrigger />
								</TagsInput.ItemPreview>
								<TagsInput.ItemInput />
							</TagsInput.Item>
						))
					}
				</TagsInput.Context>
				<TagsInput.Input placeholder="Add a flavor..." />
			</TagsInput.Control>
			<TagsInput.ClearTrigger>Clear All</TagsInput.ClearTrigger>
			<TagsInput.HiddenInput />
		</TagsInput>
	);
}

```

## Custom Icon

```tsx
import { TagsInput } from '@skeletonlabs/skeleton-react';
import { CircleXIcon } from 'lucide-react';

export default function Default() {
	return (
		<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
			<TagsInput.Control>
				<TagsInput.Context>
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							<TagsInput.Item key={index} value={value} index={index}>
								<TagsInput.ItemPreview>
									<TagsInput.ItemText>{value}</TagsInput.ItemText>
									<TagsInput.ItemDeleteTrigger>
										<CircleXIcon className="size-4" />
									</TagsInput.ItemDeleteTrigger>
								</TagsInput.ItemPreview>
								<TagsInput.ItemInput />
							</TagsInput.Item>
						))
					}
				</TagsInput.Context>
				<TagsInput.Input placeholder="Add a flavor..." />
			</TagsInput.Control>
			<TagsInput.HiddenInput />
		</TagsInput>
	);
}

```

## Color

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

export default function Default() {
	return (
		<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
			<TagsInput.Control>
				<TagsInput.Context>
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							<TagsInput.Item key={index} value={value} index={index}>
								<TagsInput.ItemPreview className="preset-filled-secondary-500">
									<TagsInput.ItemText>{value}</TagsInput.ItemText>
									<TagsInput.ItemDeleteTrigger />
								</TagsInput.ItemPreview>
								<TagsInput.ItemInput />
							</TagsInput.Item>
						))
					}
				</TagsInput.Context>
				<TagsInput.Input placeholder="Add a flavor..." />
			</TagsInput.Control>
			<TagsInput.HiddenInput />
		</TagsInput>
	);
}

```

## Provider Pattern

Use the [Provider Pattern](/docs/\[framework]/get-started/fundamentals#provider-pattern) to gain access to the inner component APIs.

```tsx
import { TagsInput, useTagsInput } from '@skeletonlabs/skeleton-react';

export default function Default() {
	const tagsInput = useTagsInput({
		defaultValue: ['Vanilla', 'Chocolate', 'Strawberry'],
	});

	return (
		<div className="w-full space-y-4">
			<TagsInput.Provider value={tagsInput}>
				<TagsInput.Control>
					<TagsInput.Context>
						{(tagsInput) =>
							tagsInput.value.map((value, index) => (
								<TagsInput.Item key={index} value={value} index={index}>
									<TagsInput.ItemPreview>
										<TagsInput.ItemText>{value}</TagsInput.ItemText>
										<TagsInput.ItemDeleteTrigger />
									</TagsInput.ItemPreview>
									<TagsInput.ItemInput />
								</TagsInput.Item>
							))
						}
					</TagsInput.Context>
					<TagsInput.Input placeholder="Add a flavor..." />
				</TagsInput.Control>
				<TagsInput.HiddenInput />
			</TagsInput.Provider>

			{/* Programmatic Controls */}
			<div className="card preset-outlined-surface-200-800 flex justify-center items-center py-4">
				<button className="btn preset-filled" onClick={() => tagsInput.clearValue()}>
					Clear Tags
				</button>
			</div>
		</div>
	);
}

```

## Direction

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

export default function Default() {
	return (
		<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']} dir="rtl">
			<TagsInput.Label>Label</TagsInput.Label>
			<TagsInput.Control>
				<TagsInput.Context>
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							<TagsInput.Item key={index} value={value} index={index}>
								<TagsInput.ItemPreview>
									<TagsInput.ItemText>{value}</TagsInput.ItemText>
									<TagsInput.ItemDeleteTrigger />
								</TagsInput.ItemPreview>
								<TagsInput.ItemInput />
							</TagsInput.Item>
						))
					}
				</TagsInput.Context>
				<TagsInput.Input placeholder="Add a flavor..." />
			</TagsInput.Control>
			<TagsInput.ClearTrigger>Clear All</TagsInput.ClearTrigger>
			<TagsInput.HiddenInput />
		</TagsInput>
	);
}

```

## API Reference

### Root

| Prop                 | Description                                                                                                                                         | Type                                                                                                                                                                                                                                                       | Default  |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| ids                  | The ids of the elements in the tags input. Useful for composition.                                                                                  | Partial\<\{ root: string; input: string; hiddenInput: string; clearBtn: string; label: string; control: string; item: (opts: ItemProps) => string; itemDeleteTrigger: (opts: ItemProps) => string; itemInput: (opts: ItemProps) => string; }> \| undefined | -        |
| translations         | Specifies the localized strings that identifies the accessibility elements and their states                                                         | IntlTranslations \| undefined                                                                                                                                                                                                                              | -        |
| maxLength            | The max length of the input.                                                                                                                        | number \| undefined                                                                                                                                                                                                                                        | -        |
| delimiter            | The character that serves has:&#xA;- event key to trigger the addition of a new tag&#xA;- character used to split tags when pasting into the input  | string \| RegExp \| undefined                                                                                                                                                                                                                              | ","      |
| autoFocus            | Whether the input should be auto-focused                                                                                                            | boolean \| undefined                                                                                                                                                                                                                                       | -        |
| disabled             | Whether the tags input should be disabled                                                                                                           | boolean \| undefined                                                                                                                                                                                                                                       | -        |
| readOnly             | Whether the tags input should be read-only                                                                                                          | boolean \| undefined                                                                                                                                                                                                                                       | -        |
| invalid              | Whether the tags input is invalid                                                                                                                   | boolean \| undefined                                                                                                                                                                                                                                       | -        |
| required             | Whether the tags input is required                                                                                                                  | boolean \| undefined                                                                                                                                                                                                                                       | -        |
| editable             | Whether a tag can be edited after creation, by pressing \`Enter\` or double clicking.                                                               | boolean \| undefined                                                                                                                                                                                                                                       | true     |
| inputValue           | The controlled tag input's value                                                                                                                    | string \| undefined                                                                                                                                                                                                                                        | -        |
| defaultInputValue    | The initial tag input value when rendered.&#xA;Use when you don't need to control the tag input value.                                              | string \| undefined                                                                                                                                                                                                                                        | -        |
| value                | The controlled tag value                                                                                                                            | string\[] \| undefined                                                                                                                                                                                                                                     | -        |
| defaultValue         | The initial tag value when rendered.&#xA;Use when you don't need to control the tag value.                                                          | string\[] \| undefined                                                                                                                                                                                                                                     | -        |
| onValueChange        | Callback fired when the tag values is updated                                                                                                       | ((details: ValueChangeDetails) => void) \| undefined                                                                                                                                                                                                       | -        |
| onInputValueChange   | Callback fired when the input value is updated                                                                                                      | ((details: InputValueChangeDetails) => void) \| undefined                                                                                                                                                                                                  | -        |
| onHighlightChange    | Callback fired when a tag is highlighted by pointer or keyboard navigation                                                                          | ((details: HighlightChangeDetails) => void) \| undefined                                                                                                                                                                                                   | -        |
| onValueInvalid       | Callback fired when the max tag count is reached or the \`validateTag\` function returns \`false\`                                                  | ((details: ValidityChangeDetails) => void) \| undefined                                                                                                                                                                                                    | -        |
| validate             | Returns a boolean that determines whether a tag can be added.&#xA;Useful for preventing duplicates or invalid tag values.                           | ((details: ValidateArgs) => boolean) \| undefined                                                                                                                                                                                                          | -        |
| blurBehavior         | The behavior of the tags input when the input is blurred&#xA;- \`"add"\`: add the input value as a new tag&#xA;- \`"clear"\`: clear the input value | "clear" \| "add" \| undefined                                                                                                                                                                                                                              | -        |
| addOnPaste           | Whether to add a tag when you paste values into the tag input                                                                                       | boolean \| undefined                                                                                                                                                                                                                                       | false    |
| max                  | The max number of tags                                                                                                                              | number \| undefined                                                                                                                                                                                                                                        | Infinity |
| allowOverflow        | Whether to allow tags to exceed max. In this case,&#xA;we'll attach \`data-invalid\` to the root                                                    | boolean \| undefined                                                                                                                                                                                                                                       | -        |
| name                 | The name attribute for the input. Useful for form submissions                                                                                       | string \| undefined                                                                                                                                                                                                                                        | -        |
| form                 | The associate form of the underlying input element.                                                                                                 | string \| undefined                                                                                                                                                                                                                                        | -        |
| dir                  | The document's text/writing direction.                                                                                                              | "ltr" \| "rtl" \| undefined                                                                                                                                                                                                                                | "ltr"    |
| getRootNode          | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                                          | (() => ShadowRoot \| Node \| Document) \| undefined                                                                                                                                                                                                        | -        |
| onPointerDownOutside | Function called when the pointer is pressed down outside the component                                                                              | ((event: PointerDownOutsideEvent) => void) \| undefined                                                                                                                                                                                                    | -        |
| onFocusOutside       | Function called when the focus is moved outside the component                                                                                       | ((event: FocusOutsideEvent) => void) \| undefined                                                                                                                                                                                                          | -        |
| onInteractOutside    | Function called when an interaction happens outside the component                                                                                   | ((event: InteractOutsideEvent) => void) \| undefined                                                                                                                                                                                                       | -        |
| element              | Render the element yourself                                                                                                                         | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                                                                                                                             | -        |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | TagsInputApi\<PropTypes>                                       | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                               | Default |
| -------- | ----------- | -------------------------------------------------- | ------- |
| children | -           | (tagsInput: TagsInputApi\<PropTypes>) => ReactNode | -       |

### Label

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | -       |

### Control

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Item

| Prop     | Description                 | Type                                                            | Default |
| -------- | --------------------------- | --------------------------------------------------------------- | ------- |
| index    | -                           | string \| number                                                | -       |
| value    | -                           | string                                                          | -       |
| disabled | -                           | boolean \| undefined                                            | -       |
| element  | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | -       |

### ItemPreview

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### ItemText

| Prop    | Description                 | Type                                                            | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | -       |

### ItemDeleteTrigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### ItemInput

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | -       |

### Input

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | -       |

### ClearTrigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### HiddenInput

| Prop    | Description                 | Type                                                             | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | -       |

# Toast

Display brief messages to users.

```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Default() {
	const toaster = createToaster({});

	return (
		<>
			<button
				className="btn preset-filled"
				onClick={() =>
					toaster.info({
						title: 'Title',
						description: 'This is a description.',
					})
				}
			>
				Toast
			</button>
			<Toast.Group toaster={toaster}>
				{(toast) => (
					<Toast toast={toast} key={toast.id}>
						<Toast.Message>
							<Toast.Title>{toast.title}</Toast.Title>
							<Toast.Description>{toast.description}</Toast.Description>
						</Toast.Message>
						<Toast.CloseTrigger />
					</Toast>
				)}
			</Toast.Group>
		</>
	);
}

```

## Usage

This component acts as a Singleton - meaning you only implement a single instance (typically at the root scope of your app) and then reuse it over and over. To do this, implement the `<Toast.Group>` at the root scope of your app (the root layout), and use a shared `createToaster()` instance to trigger messages to that group from anywhere in your application.

## Type

```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Type() {
	const toaster = createToaster({});

	return (
		<>
			<div className="grid grid-cols-2 gap-2">
				<button
					className="btn preset-filled"
					onClick={() =>
						toaster.info({
							title: 'Info',
							description: 'This is an info toast.',
						})
					}
				>
					Info
				</button>
				<button
					className="btn preset-filled-success-500"
					onClick={() =>
						toaster.success({
							title: 'Success',
							description: 'This is a success toast.',
						})
					}
				>
					Success
				</button>
				<button
					className="btn preset-filled-warning-500"
					onClick={() =>
						toaster.warning({
							title: 'Warning',
							description: 'This is a warning toast.',
						})
					}
				>
					Warning
				</button>
				<button
					className="btn preset-filled-error-500"
					onClick={() =>
						toaster.error({
							title: 'Error',
							description: 'This is an error toast.',
						})
					}
				>
					Error
				</button>
			</div>
			<Toast.Group toaster={toaster}>
				{(toast) => (
					<Toast toast={toast} key={toast.id}>
						<Toast.Message>
							<Toast.Title>{toast.title}</Toast.Title>
							<Toast.Description>{toast.description}</Toast.Description>
						</Toast.Message>
						<Toast.CloseTrigger />
					</Toast>
				)}
			</Toast.Group>
		</>
	);
}

```

## Placement

```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Placement() {
	const toaster = createToaster({
		placement: 'bottom-end',
	});

	return (
		<>
			<button
				className="btn preset-filled"
				onClick={() =>
					toaster.info({
						title: 'Title',
						description: 'This is a description.',
					})
				}
			>
				Toast
			</button>
			<Toast.Group toaster={toaster}>
				{(toast) => (
					<Toast toast={toast} key={toast.id}>
						<Toast.Message>
							<Toast.Title>{toast.title}</Toast.Title>
							<Toast.Description>{toast.description}</Toast.Description>
						</Toast.Message>
						<Toast.CloseTrigger />
					</Toast>
				)}
			</Toast.Group>
		</>
	);
}

```

## Action

```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Action() {
	const toaster = createToaster({});

	return (
		<>
			<button
				className="btn preset-filled"
				onClick={() =>
					toaster.info({
						title: 'Toast',
						description: 'This is a toast message.',
						duration: Infinity,
						action: {
							label: 'Undo',
							onClick: () => {
								toaster.success({
									title: 'Task undone',
									description: 'The task has been undone.',
								});
							},
						},
					})
				}
			>
				Toast
			</button>

			<Toast.Group toaster={toaster}>
				{(toast) => (
					<Toast toast={toast} key={toast.id}>
						<Toast.Message>
							<Toast.Title>{toast.title}</Toast.Title>
							<Toast.Description>{toast.description}</Toast.Description>
						</Toast.Message>
						{toast.action && <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>}
						<Toast.CloseTrigger />
					</Toast>
				)}
			</Toast.Group>
		</>
	);
}

```

## Closable

```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Closable() {
	const toaster = createToaster({});

	return (
		<>
			<button
				className="btn preset-filled"
				onClick={() =>
					toaster.info({
						title: 'Title',
						description: 'This is a description.',
						closable: false,
					})
				}
			>
				Toast
			</button>
			<Toast.Group toaster={toaster}>
				{(toast) => (
					<Toast toast={toast} key={toast.id}>
						<Toast.Message>
							<Toast.Title>{toast.title}</Toast.Title>
							<Toast.Description>{toast.description}</Toast.Description>
						</Toast.Message>
						{toast.closable && <Toast.CloseTrigger />}
					</Toast>
				)}
			</Toast.Group>
		</>
	);
}

```

## Meta

```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
import { SkullIcon } from 'lucide-react';

export default function Meta() {
	const toaster = createToaster({});

	return (
		<>
			<button
				className="btn preset-filled"
				onClick={() =>
					toaster.info({
						title: 'Title',
						description: 'This is a description.',
						meta: {
							icon: <SkullIcon className="size-8" />,
						},
					})
				}
			>
				Toast
			</button>
			<Toast.Group toaster={toaster}>
				{(toast) => (
					<Toast toast={toast} key={toast.id}>
						{toast.meta!.icon}
						<Toast.Message>
							<Toast.Title className="flex gap-2 items-center">{toast.title}</Toast.Title>
							<Toast.Description>{toast.description}</Toast.Description>
						</Toast.Message>
						<Toast.CloseTrigger />
					</Toast>
				)}
			</Toast.Group>
		</>
	);
}

```

## Promise

```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Promise_() {
	const toaster = createToaster({});

	function generatePositiveNumber() {
		return new Promise<number>((resolve, reject) => {
			setTimeout(() => {
				const number = Math.random() - 0.5;
				if (number > 0) {
					resolve(number);
				} else {
					reject(number);
				}
			}, 2000);
		});
	}

	return (
		<>
			<button
				className="btn preset-filled"
				onClick={() =>
					toaster.promise(generatePositiveNumber(), {
						loading: {
							title: 'Loading...',
							description: 'Please wait while generating your number',
						},
						success: (number) => ({
							title: 'Success',
							description: `Your number is ${number.toFixed(2)}`,
						}),
						error: (number) => ({
							title: 'Error',
							description: `Your number is ${(number as number).toFixed(2)}`,
						}),
					})
				}
			>
				Toast
			</button>

			<Toast.Group toaster={toaster}>
				{(toast) => (
					<Toast toast={toast} key={toast.id}>
						<Toast.Message>
							<Toast.Title>{toast.title}</Toast.Title>
							<Toast.Description>{toast.description}</Toast.Description>
						</Toast.Message>
						<Toast.CloseTrigger />
					</Toast>
				)}
			</Toast.Group>
		</>
	);
}

```

## API Reference

### Root

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| toast   | -                           | Omit\<Options\<any>, "id" \| "parent">                         | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                            | Default |
| -------- | ----------- | ----------------------------------------------- | ------- |
| children | -           | (toast: ToastApi\<PropTypes, any>) => ReactNode | -       |

### Group

| Prop     | Description                 | Type                                                           | Default |
| -------- | --------------------------- | -------------------------------------------------------------- | ------- |
| toaster  | -                           | ToastStore\<any>                                               | -       |
| children | -                           | ((toast: ToastProps\<any>) => Element \| null) \| undefined    | -       |
| element  | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Message

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Title

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Description

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### ActionTrigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### CloseTrigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

# Toggle Group

Grouped buttons for toggling option states.

```tsx
import { ToggleGroup } from '@skeletonlabs/skeleton-react';
import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react';

export default function Default() {
	return (
		<ToggleGroup defaultValue={['bold']} multiple>
			<ToggleGroup.Item value="bold">
				<BoldIcon className="size-4" />
			</ToggleGroup.Item>
			<ToggleGroup.Item value="italic">
				<ItalicIcon className="size-4" />
			</ToggleGroup.Item>
			<ToggleGroup.Item value="underline">
				<UnderlineIcon className="size-4" />
			</ToggleGroup.Item>
		</ToggleGroup>
	);
}

```

## Controlled

```tsx
import { ToggleGroup } from '@skeletonlabs/skeleton-react';
import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react';
import { useState } from 'react';

export default function Controlled() {
	const [value, setValue] = useState(['bold']);

	return (
		<div className="flex flex-col items-center gap-4">
			<ToggleGroup value={value} onValueChange={(details) => setValue(details.value)} multiple>
				<ToggleGroup.Item value="bold">
					<BoldIcon className="size-4" />
				</ToggleGroup.Item>
				<ToggleGroup.Item value="italic">
					<ItalicIcon className="size-4" />
				</ToggleGroup.Item>
				<ToggleGroup.Item value="underline">
					<UnderlineIcon className="size-4" />
				</ToggleGroup.Item>
			</ToggleGroup>
			<pre className="pre">{JSON.stringify(value)}</pre>
		</div>
	);
}

```

## Orientation

Use the `orientation` prop to change the layout direction of the Toggle Group.

```tsx
import { ToggleGroup } from '@skeletonlabs/skeleton-react';
import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react';

export default function Orientation() {
	return (
		<div className="flex gap-4 flex-col sm:flex-row">
			<div>
				<p className="mb-2">Horizontal</p>
				<ToggleGroup defaultValue={['bold']} multiple orientation="horizontal">
					<ToggleGroup.Item value="bold">
						<BoldIcon className="size-4" />
					</ToggleGroup.Item>
					<ToggleGroup.Item value="italic">
						<ItalicIcon className="size-4" />
					</ToggleGroup.Item>
					<ToggleGroup.Item value="underline">
						<UnderlineIcon className="size-4" />
					</ToggleGroup.Item>
				</ToggleGroup>
			</div>

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

```

## Direction

Use the `dir` prop to change the text direction (LTR/RTL).

```tsx
import { ToggleGroup } from '@skeletonlabs/skeleton-react';
import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react';

export default function Dir() {
	return (
		<ToggleGroup defaultValue={['bold']} multiple dir="rtl">
			<ToggleGroup.Item value="bold">
				<BoldIcon className="size-4" />
			</ToggleGroup.Item>
			<ToggleGroup.Item value="italic">
				<ItalicIcon className="size-4" />
			</ToggleGroup.Item>
			<ToggleGroup.Item value="underline">
				<UnderlineIcon className="size-4" />
			</ToggleGroup.Item>
		</ToggleGroup>
	);
}

```

## API Reference

### Root

| Prop          | Description                                                                                                                                  | Type                                                                       | Default      |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------ |
| ids           | The ids of the elements in the toggle. Useful for composition.                                                                               | Partial\<\{ root: string; item: (value: string) => string; }> \| undefined | -            |
| disabled      | Whether the toggle is disabled.                                                                                                              | boolean \| undefined                                                       | -            |
| value         | The controlled selected value of the toggle group.                                                                                           | string\[] \| undefined                                                     | -            |
| defaultValue  | The initial selected value of the toggle group when rendered.&#xA;Use when you don't need to control the selected value of the toggle group. | string\[] \| undefined                                                     | -            |
| onValueChange | Function to call when the toggle is clicked.                                                                                                 | ((details: ValueChangeDetails) => void) \| undefined                       | -            |
| loopFocus     | Whether to loop focus inside the toggle group.                                                                                               | boolean \| undefined                                                       | true         |
| rovingFocus   | Whether to use roving tab index to manage focus.                                                                                             | boolean \| undefined                                                       | true         |
| orientation   | The orientation of the toggle group.                                                                                                         | Orientation \| undefined                                                   | "horizontal" |
| multiple      | Whether to allow multiple toggles to be selected.                                                                                            | boolean \| undefined                                                       | -            |
| deselectable  | Whether the toggle group allows empty selection.&#xA;\*\*Note:\*\* This is ignored if \`multiple\` is \`true\`.                              | boolean \| undefined                                                       | true         |
| dir           | The document's text/writing direction.                                                                                                       | "ltr" \| "rtl" \| undefined                                                | "ltr"        |
| getRootNode   | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                                   | (() => ShadowRoot \| Node \| Document) \| undefined                        | -            |
| element       | Render the element yourself                                                                                                                  | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined             | -            |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | ToggleGroupApi\<PropTypes>                                     | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                                   | Default |
| -------- | ----------- | ------------------------------------------------------ | ------- |
| children | -           | (togglegroup: ToggleGroupApi\<PropTypes>) => ReactNode | -       |

### Item

| Prop     | Description                 | Type                                                              | Default |
| -------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| value    | -                           | string                                                            | -       |
| disabled | -                           | boolean \| undefined                                              | -       |
| element  | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

# Tooltip

A floating label that appears on hover or focus, providing additional context.

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

export default function Default() {
	return (
		<Tooltip>
			<Tooltip.Trigger>Hover Me</Tooltip.Trigger>
			<Portal>
				<Tooltip.Positioner>
					<Tooltip.Content className="card max-w-md p-2 bg-surface-100-900 shadow-xl">
						Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
						nesciunt enim.
					</Tooltip.Content>
				</Tooltip.Positioner>
			</Portal>
		</Tooltip>
	);
}

```

## Arrow

You may optionally enable arrows via the `Arrow` and `ArrowTip` component parts. Note that Zag.js opts to style these with CSS custom properties, which can be adjusted using a `style` attribute.

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

export default function Arrow() {
	return (
		<Tooltip>
			<Tooltip.Trigger>Hover Me</Tooltip.Trigger>
			<Portal>
				<Tooltip.Positioner>
					<Tooltip.Content className="card max-w-md p-2 bg-surface-100-900 shadow-xl">
						Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
						nesciunt enim.
						<Tooltip.Arrow
							style={{
								['--arrow-size' as string]: 'calc(var(--spacing) * 2)',
								['--arrow-background' as string]: 'var(--color-surface-100-900)',
							}}
						>
							<Tooltip.ArrowTip />
						</Tooltip.Arrow>
					</Tooltip.Content>
				</Tooltip.Positioner>
			</Portal>
		</Tooltip>
	);
}

```

## Z-Index

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

export default function ZIndex() {
	return (
		<div className="grid grid-cols-2 gap-4">
			<Tooltip>
				<Tooltip.Trigger>Default (auto)</Tooltip.Trigger>
				<Portal>
					<Tooltip.Positioner>
						<Tooltip.Content className="card max-w-md p-2 bg-surface-100-900 shadow-xl">
							This example will be below the sibling.
						</Tooltip.Content>
					</Tooltip.Positioner>
				</Portal>
			</Tooltip>

			<Tooltip>
				<Tooltip.Trigger>Above (20)</Tooltip.Trigger>
				<Portal>
					<Tooltip.Positioner className="z-20!">
						<Tooltip.Content className="card max-w-md p-2 bg-surface-100-900 shadow-xl">
							This example will be above the sibling.
						</Tooltip.Content>
					</Tooltip.Positioner>
				</Portal>
			</Tooltip>

			<div className="col-span-2 h-[100px] relative">
				<div className="rounded bg-primary-200-800/75 w-full h-full z-10 flex justify-center items-center absolute">Sibling (10)</div>
			</div>
		</div>
	);
}

```

## Headless

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

export default function Headless() {
	return (
		<Tooltip>
			<Tooltip.Trigger>Hover Me</Tooltip.Trigger>
			<Portal>
				<Tooltip.Positioner>
					<Tooltip.Content className="card max-w-md p-2 bg-surface-100-900 shadow-xl space-y-2">
						<img
							className="size-72"
							src="https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExNWVmbzcxanp6YmtxZ28xcXBqaXBscThsdDZ5Nm9ncWxkeWtqaHJ2bSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9dg/dn1PN6NtunfnUjUGFC/giphy.gif"
							alt="Skeleton Gif"
						/>
						<p>Three spooky skeletons!</p>
					</Tooltip.Content>
				</Tooltip.Positioner>
			</Portal>
		</Tooltip>
	);
}

```

## Provider Pattern

Use the [Provider Pattern](/docs/\[framework]/get-started/fundamentals#provider-pattern) to programmatically open and close the tooltip.

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

export default function Programmatic() {
	const tooltip = useTooltip();
	return (
		<div className="flex flex-col gap-4">
			<button className="btn preset-filled w-[150px]" onClick={() => tooltip.setOpen(!tooltip.open)}>
				Trigger
			</button>

			<Tooltip.Provider value={tooltip}>
				<Tooltip.Trigger>Anchor ({tooltip.open ? 'open' : 'closed'})</Tooltip.Trigger>
				<Portal>
					<Tooltip.Positioner>
						<Tooltip.Content className="card max-w-md p-2 bg-surface-100-900 shadow-xl">
							Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
							nesciunt enim.
						</Tooltip.Content>
					</Tooltip.Positioner>
				</Portal>
			</Tooltip.Provider>
		</div>
	);
}

```

## Direction

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

export default function Dir() {
	return (
		<Tooltip dir="rtl">
			<Tooltip.Trigger>Hover Me</Tooltip.Trigger>
			<Portal>
				<Tooltip.Positioner>
					<Tooltip.Content className="card max-w-md p-2 bg-surface-100-900 shadow-xl">
						Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente magni distinctio explicabo quisquam. Rerum impedit culpa
						nesciunt enim.
					</Tooltip.Content>
				</Tooltip.Positioner>
			</Portal>
		</Tooltip>
	);
}

```

## API Reference

### Root

| Prop               | Description                                                                                                                     | Type                                                                                             | Default |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------- |
| children           | -                                                                                                                               | ReactNode                                                                                        | -       |
| dir                | The document's text/writing direction.                                                                                          | "ltr" \| "rtl" \| undefined                                                                      | "ltr"   |
| aria-label         | Custom label for the tooltip.                                                                                                   | string \| undefined                                                                              | -       |
| ids                | The ids of the elements in the tooltip. Useful for composition.                                                                 | Partial\<\{ trigger: string; content: string; arrow: string; positioner: string; }> \| undefined | -       |
| openDelay          | The open delay of the tooltip.                                                                                                  | number \| undefined                                                                              | 400     |
| closeDelay         | The close delay of the tooltip.                                                                                                 | number \| undefined                                                                              | 150     |
| closeOnPointerDown | Whether to close the tooltip on pointerdown.                                                                                    | boolean \| undefined                                                                             | true    |
| closeOnEscape      | Whether to close the tooltip when the Escape key is pressed.                                                                    | boolean \| undefined                                                                             | true    |
| closeOnScroll      | Whether the tooltip should close on scroll                                                                                      | boolean \| undefined                                                                             | true    |
| closeOnClick       | Whether the tooltip should close on click                                                                                       | boolean \| undefined                                                                             | true    |
| interactive        | Whether the tooltip's content is interactive.&#xA;In this mode, the tooltip will remain open when user hovers over the content. | boolean \| undefined                                                                             | false   |
| onOpenChange       | Function called when the tooltip is opened.                                                                                     | ((details: OpenChangeDetails) => void) \| undefined                                              | -       |
| positioning        | The user provided options used to position the popover content                                                                  | PositioningOptions \| undefined                                                                  | -       |
| disabled           | Whether the tooltip is disabled                                                                                                 | boolean \| undefined                                                                             | -       |
| open               | The controlled open state of the tooltip                                                                                        | boolean \| undefined                                                                             | -       |
| defaultOpen        | The initial open state of the tooltip when rendered.&#xA;Use when you don't need to control the open state of the tooltip.      | boolean \| undefined                                                                             | -       |
| getRootNode        | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                      | (() => Node \| ShadowRoot \| Document) \| undefined                                              | -       |

### Provider

| Prop     | Description | Type                   | Default |
| -------- | ----------- | ---------------------- | ------- |
| value    | -           | TooltipApi\<PropTypes> | -       |
| children | -           | ReactNode              | -       |

### Context

| Prop     | Description | Type                                           | Default |
| -------- | ----------- | ---------------------------------------------- | ------- |
| children | -           | (tooltip: TooltipApi\<PropTypes>) => ReactNode | -       |

### Trigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### Positioner

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Content

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Arrow

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### ArrowTip

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

# Tree View

Used to display hierarchical data.

```tsx
import { TreeView, createTreeViewCollection } from '@skeletonlabs/skeleton-react';
import { FileIcon, FolderIcon } from 'lucide-react';

interface Node {
	id: string;
	name: string;
	children?: Node[];
}

function TreeNode(props: { node: Node; indexPath: number[] }) {
	return (
		<TreeView.NodeProvider value={props}>
			{props.node.children ? (
				<TreeView.Branch>
					<TreeView.BranchControl>
						<TreeView.BranchIndicator />
						<TreeView.BranchText>
							<FolderIcon className="size-4" />
							{props.node.name}
						</TreeView.BranchText>
					</TreeView.BranchControl>
					<TreeView.BranchContent>
						<TreeView.BranchIndentGuide />
						{props.node.children.map((childNode, childIndex) => (
							<TreeNode key={childNode.id} node={childNode} indexPath={[...props.indexPath, childIndex]} />
						))}
					</TreeView.BranchContent>
				</TreeView.Branch>
			) : (
				<TreeView.Item>
					<FileIcon className="size-4" />
					{props.node.name}
				</TreeView.Item>
			)}
		</TreeView.NodeProvider>
	);
}

export default function Default() {
	const collection = createTreeViewCollection<Node>({
		nodeToValue: (node) => node.id,
		nodeToString: (node) => node.name,
		rootNode: {
			id: 'root',
			name: '',
			children: [
				{
					id: 'node_modules',
					name: 'node_modules',
					children: [
						{
							id: 'node_modules/@skeletonlabs',
							name: '@skeletonlabs',
							children: [
								{
									id: 'node_modules/@skeletonlabs/skeleton',
									name: 'skeleton',
								},
							],
						},
					],
				},
				{
					id: 'package.json',
					name: 'package.json',
				},
			],
		},
	});
	return (
		<TreeView collection={collection}>
			<TreeView.Label>File System</TreeView.Label>
			<TreeView.Tree>
				{collection.rootNode.children?.map((node, index) => (
					<TreeNode node={node} indexPath={[index]} key={node.id} />
				))}
			</TreeView.Tree>
		</TreeView>
	);
}

```

## Controlled

```tsx
import { TreeView, createTreeViewCollection } from '@skeletonlabs/skeleton-react';
import { FileIcon, FolderIcon } from 'lucide-react';

interface Node {
	id: string;
	name: string;
	children?: Node[];
}

function TreeNode(props: { node: Node; indexPath: number[] }) {
	return (
		<TreeView.NodeProvider value={props}>
			{props.node.children ? (
				<TreeView.Branch>
					<TreeView.BranchControl>
						<TreeView.BranchIndicator />
						<TreeView.BranchText>
							<FolderIcon className="size-4" />
							{props.node.name}
						</TreeView.BranchText>
					</TreeView.BranchControl>
					<TreeView.BranchContent>
						<TreeView.BranchIndentGuide />
						{props.node.children.map((childNode, childIndex) => (
							<TreeNode key={childNode.id} node={childNode} indexPath={[...props.indexPath, childIndex]} />
						))}
					</TreeView.BranchContent>
				</TreeView.Branch>
			) : (
				<TreeView.Item>
					<FileIcon className="size-4" />
					{props.node.name}
				</TreeView.Item>
			)}
		</TreeView.NodeProvider>
	);
}

export default function Default() {
	const collection = createTreeViewCollection<Node>({
		nodeToValue: (node) => node.id,
		nodeToString: (node) => node.name,
		rootNode: {
			id: 'root',
			name: '',
			children: [
				{
					id: 'node_modules',
					name: 'node_modules',
					children: [
						{
							id: 'node_modules/@skeletonlabs',
							name: '@skeletonlabs',
							children: [
								{
									id: 'node_modules/@skeletonlabs/skeleton',
									name: 'skeleton',
								},
							],
						},
					],
				},
				{
					id: 'package.json',
					name: 'package.json',
				},
			],
		},
	});
	return (
		<TreeView collection={collection}>
			<TreeView.Label>File System</TreeView.Label>
			<TreeView.Tree>
				{collection.rootNode.children?.map((node, index) => (
					<TreeNode node={node} indexPath={[index]} key={node.id} />
				))}
			</TreeView.Tree>
		</TreeView>
	);
}

```

## Multiple Selection

* Windows: Hold  + left click with mouse.
* MacOS: Hold  + left click with mouse.

```tsx
import { TreeView, createTreeViewCollection } from '@skeletonlabs/skeleton-react';
import { FileIcon, FolderIcon } from 'lucide-react';

interface Node {
	id: string;
	name: string;
	children?: Node[];
}

function TreeNode(props: { node: Node; indexPath: number[] }) {
	return (
		<TreeView.NodeProvider value={props}>
			{props.node.children ? (
				<TreeView.Branch>
					<TreeView.BranchControl>
						<TreeView.BranchIndicator />
						<TreeView.BranchText>
							<FolderIcon className="size-4" />
							{props.node.name}
						</TreeView.BranchText>
					</TreeView.BranchControl>
					<TreeView.BranchContent>
						<TreeView.BranchIndentGuide />
						{props.node.children.map((childNode, childIndex) => (
							<TreeNode key={childNode.id} node={childNode} indexPath={[...props.indexPath, childIndex]} />
						))}
					</TreeView.BranchContent>
				</TreeView.Branch>
			) : (
				<TreeView.Item>
					<FileIcon className="size-4" />
					{props.node.name}
				</TreeView.Item>
			)}
		</TreeView.NodeProvider>
	);
}

export default function MultipleSelection() {
	const collection = createTreeViewCollection<Node>({
		nodeToValue: (node) => node.id,
		nodeToString: (node) => node.name,
		rootNode: {
			id: 'root',
			name: '',
			children: [
				{
					id: 'node_modules',
					name: 'node_modules',
					children: [
						{
							id: 'node_modules/@skeletonlabs',
							name: '@skeletonlabs',
							children: [
								{
									id: 'node_modules/@skeletonlabs/skeleton',
									name: 'skeleton',
								},
							],
						},
					],
				},
				{
					id: 'package.json',
					name: 'package.json',
				},
			],
		},
	});
	return (
		<TreeView collection={collection} selectionMode="multiple">
			<TreeView.Label>File System</TreeView.Label>
			<TreeView.Tree>
				{collection.rootNode.children?.map((node, index) => (
					<TreeNode node={node} indexPath={[index]} key={node.id} />
				))}
			</TreeView.Tree>
		</TreeView>
	);
}

```

## Collapse and Expand

Use the [Provider Pattern](/docs/\[framework]/get-started/fundamentals#provider-pattern) to gain access to the `collapse` and `expand` methods on the `TreeView` instance.

```tsx
import { TreeView, createTreeViewCollection, useTreeView } from '@skeletonlabs/skeleton-react';
import { FileIcon, FolderIcon } from 'lucide-react';

interface Node {
	id: string;
	name: string;
	children?: Node[];
}

function TreeNode(props: { node: Node; indexPath: number[] }) {
	return (
		<TreeView.NodeProvider value={props}>
			{props.node.children ? (
				<TreeView.Branch>
					<TreeView.BranchControl>
						<TreeView.BranchIndicator />
						<TreeView.BranchText>
							<FolderIcon className="size-4" />
							{props.node.name}
						</TreeView.BranchText>
					</TreeView.BranchControl>
					<TreeView.BranchContent>
						<TreeView.BranchIndentGuide />
						{props.node.children.map((childNode, childIndex) => (
							<TreeNode key={childNode.id} node={childNode} indexPath={[...props.indexPath, childIndex]} />
						))}
					</TreeView.BranchContent>
				</TreeView.Branch>
			) : (
				<TreeView.Item>
					<FileIcon className="size-4" />
					{props.node.name}
				</TreeView.Item>
			)}
		</TreeView.NodeProvider>
	);
}

export default function CollapseExpand() {
	const collection = createTreeViewCollection<Node>({
		nodeToValue: (node) => node.id,
		nodeToString: (node) => node.name,
		rootNode: {
			id: 'root',
			name: '',
			children: [
				{
					id: 'node_modules',
					name: 'node_modules',
					children: [
						{
							id: 'node_modules/@skeletonlabs',
							name: '@skeletonlabs',
							children: [
								{
									id: 'node_modules/@skeletonlabs/skeleton',
									name: 'skeleton',
								},
							],
						},
					],
				},
				{
					id: 'package.json',
					name: 'package.json',
				},
			],
		},
	});

	const treeView = useTreeView({
		collection: collection,
	});

	return (
		<div className="w-full flex flex-col items-center gap-4">
			<TreeView.Provider value={treeView}>
				<TreeView.Label>File System</TreeView.Label>
				<TreeView.Tree>
					{collection.rootNode.children?.map((node, index) => (
						<TreeNode node={node} indexPath={[index]} key={node.id} />
					))}
				</TreeView.Tree>
			</TreeView.Provider>

			<div className="flex gap-2">
				<button className="btn preset-filled" onClick={() => treeView.collapse()}>
					Collapse
				</button>
				<button className="btn preset-filled" onClick={() => treeView.expand()}>
					Expand
				</button>
			</div>
		</div>
	);
}

```

## Lazy Loading

```tsx
import { TreeView, createTreeViewCollection, type TreeViewRootProps } from '@skeletonlabs/skeleton-react';
import { FileIcon, FolderIcon, LoaderIcon } from 'lucide-react';
import { useState } from 'react';

interface Node {
	id: string;
	name: string;
	children?: Node[];
	childrenCount?: number;
}

const response: Record<string, Node[]> = {
	node_modules: [
		{
			id: 'node_modules/@skeletonlabs',
			name: '@skeletonlabs',
			childrenCount: 3,
		},
	],
	'node_modules/@skeletonlabs': [
		{
			id: 'node_modules/@skeletonlabs/skeleton',
			name: 'skeleton',
		},
		{
			id: 'node_modules/@skeletonlabs/skeleton-react',
			name: 'skeleton-react',
		},
		{
			id: 'node_modules/@skeletonlabs/skeleton-svelte',
			name: 'skeleton-svelte',
		},
	],
};

function TreeNode(props: { node: Node; indexPath: number[] }) {
	return (
		<TreeView.NodeProvider value={props}>
			{props.node.children || props.node.childrenCount ? (
				<TreeView.Branch>
					<TreeView.BranchControl>
						<TreeView.BranchIndicator className="data-loading:hidden" />
						<TreeView.BranchIndicator className="hidden data-loading:inline animate-spin">
							<LoaderIcon className="size-4" />
						</TreeView.BranchIndicator>
						<TreeView.BranchText>
							<FolderIcon className="size-4" />
							{props.node.name}
						</TreeView.BranchText>
					</TreeView.BranchControl>
					<TreeView.BranchContent>
						<TreeView.BranchIndentGuide />
						{props.node.children?.map((childNode, childIndex) => (
							<TreeNode key={childNode.id} node={childNode} indexPath={[...props.indexPath, childIndex]} />
						))}
					</TreeView.BranchContent>
				</TreeView.Branch>
			) : (
				<TreeView.Item>
					<FileIcon className="size-4" />
					{props.node.name}
				</TreeView.Item>
			)}
		</TreeView.NodeProvider>
	);
}

export default function LazyLoading() {
	const [collection, setCollection] = useState(
		createTreeViewCollection<Node>({
			nodeToValue: (node) => node.id,
			nodeToString: (node) => node.name,
			rootNode: {
				id: 'root',
				name: '',
				children: [
					{
						id: 'node_modules',
						name: 'node_modules',
						childrenCount: 1,
					},
					{
						id: 'package.json',
						name: 'package.json',
					},
				],
			},
		}),
	);

	const loadChildren: TreeViewRootProps['loadChildren'] = async (details) => {
		await new Promise((resolve) => setTimeout(resolve, 1000));
		return response[details.node.id] || [];
	};

	const onLoadChildrenComplete: TreeViewRootProps['onLoadChildrenComplete'] = (details) => {
		setCollection(details.collection);
	};

	return (
		<TreeView collection={collection} loadChildren={loadChildren} onLoadChildrenComplete={onLoadChildrenComplete}>
			<TreeView.Label>File System</TreeView.Label>
			<TreeView.Tree>
				{collection.rootNode.children?.map((node, index) => (
					<TreeNode node={node} indexPath={[index]} key={node.id} />
				))}
			</TreeView.Tree>
		</TreeView>
	);
}

```

## API Reference

### Root

| Prop                   | Description                                                                                                                                 | Type                                                                                                    | Default  |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -------- |
| collection             | The tree collection data                                                                                                                    | TreeCollection\<T> \| undefined                                                                         | -        |
| ids                    | The ids of the tree elements. Useful for composition.                                                                                       | Partial\<\{ root: string; tree: string; label: string; node: (value: string) => string; }> \| undefined | -        |
| expandedValue          | The controlled expanded node ids                                                                                                            | string\[] \| undefined                                                                                  | -        |
| defaultExpandedValue   | The initial expanded node ids when rendered.&#xA;Use when you don't need to control the expanded node value.                                | string\[] \| undefined                                                                                  | -        |
| selectedValue          | The controlled selected node value                                                                                                          | string\[] \| undefined                                                                                  | -        |
| defaultSelectedValue   | The initial selected node value when rendered.&#xA;Use when you don't need to control the selected node value.                              | string\[] \| undefined                                                                                  | -        |
| defaultCheckedValue    | The initial checked node value when rendered.&#xA;Use when you don't need to control the checked node value.                                | string\[] \| undefined                                                                                  | -        |
| checkedValue           | The controlled checked node value                                                                                                           | string\[] \| undefined                                                                                  | -        |
| defaultFocusedValue    | The initial focused node value when rendered.&#xA;Use when you don't need to control the focused node value.                                | string \| null \| undefined                                                                             | -        |
| focusedValue           | The value of the focused node                                                                                                               | string \| null \| undefined                                                                             | -        |
| selectionMode          | Whether the tree supports multiple selection&#xA;- "single": only one node can be selected&#xA;- "multiple": multiple nodes can be selected | "single" \| "multiple" \| undefined                                                                     | "single" |
| onExpandedChange       | Called when the tree is opened or closed                                                                                                    | ((details: ExpandedChangeDetails\<T>) => void) \| undefined                                             | -        |
| onSelectionChange      | Called when the selection changes                                                                                                           | ((details: SelectionChangeDetails\<T>) => void) \| undefined                                            | -        |
| onFocusChange          | Called when the focused node changes                                                                                                        | ((details: FocusChangeDetails\<T>) => void) \| undefined                                                | -        |
| onCheckedChange        | Called when the checked value changes                                                                                                       | ((details: CheckedChangeDetails) => void) \| undefined                                                  | -        |
| canRename              | Function to determine if a node can be renamed                                                                                              | ((node: T, indexPath: IndexPath) => boolean) \| undefined                                               | -        |
| onRenameStart          | Called when a node starts being renamed                                                                                                     | ((details: RenameStartDetails\<T>) => void) \| undefined                                                | -        |
| onBeforeRename         | Called before a rename is completed. Return false to prevent the rename.                                                                    | ((details: RenameCompleteDetails) => boolean) \| undefined                                              | -        |
| onRenameComplete       | Called when a node label rename is completed                                                                                                | ((details: RenameCompleteDetails) => void) \| undefined                                                 | -        |
| onLoadChildrenComplete | Called when a node finishes loading children                                                                                                | ((details: LoadChildrenCompleteDetails\<T>) => void) \| undefined                                       | -        |
| onLoadChildrenError    | Called when loading children fails for one or more nodes                                                                                    | ((details: LoadChildrenErrorDetails\<T>) => void) \| undefined                                          | -        |
| expandOnClick          | Whether clicking on a branch should open it or not                                                                                          | boolean \| undefined                                                                                    | true     |
| typeahead              | Whether the tree supports typeahead search                                                                                                  | boolean \| undefined                                                                                    | true     |
| loadChildren           | Function to load children for a node asynchronously.&#xA;When provided, branches will wait for this promise to resolve before expanding.    | ((details: LoadChildrenDetails\<T>) => Promise\<T\[]>) \| undefined                                     | -        |
| dir                    | The document's text/writing direction.                                                                                                      | "ltr" \| "rtl" \| undefined                                                                             | "ltr"    |
| getRootNode            | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                                  | (() => ShadowRoot \| Node \| Document) \| undefined                                                     | -        |
| element                | Render the element yourself                                                                                                                 | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                          | -        |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | TreeViewApi\<PropTypes, any>                                   | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                                  | Default |
| -------- | ----------- | ----------------------------------------------------- | ------- |
| children | -           | (treeView: TreeViewApi\<PropTypes, any>) => ReactNode | -       |

### Tree

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Label

| Prop    | Description                 | Type                                                          | Default |
| ------- | --------------------------- | ------------------------------------------------------------- | ------- |
| level   | The level of the heading.   | 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined                       | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"h3">) => Element) \| undefined | -       |

### NodeProvider

| Prop     | Description | Type      | Default |
| -------- | ----------- | --------- | ------- |
| value    | -           | NodeProps | -       |
| children | -           | ReactNode | -       |

### Branch

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### BranchControl

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### BranchText

| Prop    | Description                 | Type                                                            | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | -       |

### BranchIndicator

| Prop    | Description                 | Type                                                            | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | -       |

### BranchContent

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### BranchIndentGuide

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Item

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

## Integrations

# Code Block

Learn how to integrate Shiki, a beautiful yet powerful syntax highlighter.

Shiki (式, a Japanese word for "Style") is a beautiful and powerful syntax highlighter based on TextMate grammar and themes, the same engine as VS Code's syntax highlighting. It provides accurate and fast syntax highlighting for almost any mainstream programming language.

## Installation

[Install Shiki](https://shiki.style/guide/install) with your preferred package manager.

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

## Next.js Integration

Shiki provides [official documentation](https://shiki.style/packages/next) for integrating into Next.js. This guide will follow this outline.

## Create a Component

A reusable component should suffice in most projects. Follow the steps below.

1. Implement a new `<CodeBlock>` component in `/src/components/code-block.tsx`.
2. Implement several variations of our `<CodeBlock>` component in any route `page.tsx`.

```tsx
import CodeBlock from './code-block';

export default function Page() {
	return (
		<div className="p-10 space-y-4">
			<CodeBlock code="npx sv create my-skeleton-app" lang="bash" />
			<CodeBlock code='<div class="bg-green-500"' lang="html" />
			<CodeBlock code=".foobar { background: green; }" lang="css" />
			<CodeBlock code="const foot = 'bar';" lang="js" />
		</div>
	);
}

```

```tsx
import { createHighlighterCore } from 'shiki/core';
import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';

const highlighter = await createHighlighterCore({
	langs: [import('@shikijs/langs/bash'), import('@shikijs/langs/css'), import('@shikijs/langs/html'), import('@shikijs/langs/javascript')],
	themes: [import('@shikijs/themes/github-dark')],
	engine: createJavaScriptRegexEngine(),
});

interface CodeBlockProps {
	code: Parameters<typeof highlighter.codeToHtml>[0];
	lang?: Parameters<typeof highlighter.codeToHtml>[1]['lang'];
	// Base Style Props
	base?: string;
	background?: string;
	rounded?: string;
	shadow?: string;
	classes?: string;
	// Pre Style Props
	preBase?: string;
	prePadding?: string;
	preClasses?: string;
}

export default function CodeBlock({
	code = '',
	lang = 'txt',
	// Base Style Props
	base = 'overflow-hidden',
	background = 'bg-neutral-950',
	rounded = 'rounded-container',
	shadow = '',
	classes = '',
	// Pre Style Props
	preBase = '',
	prePadding = '[&>pre]:p-4',
	preClasses = '',
}: CodeBlockProps) {
	const html = highlighter.codeToHtml(code, {
		lang,
		theme: 'github-dark',
	});
	return (
		<div
			dangerouslySetInnerHTML={{ __html: html }}
			className={`${base} ${background} ${rounded} ${shadow} ${classes} ${preBase} ${prePadding} ${preClasses}`}
		></div>
	);
}

```

A few things of note about this component:

* You will need to import and configure any number of [Shiki themes](https://shiki.style/themes).
* You will need to import and configure any number of [supported languages](https://shiki.style/languages).
* The component has been implemented using Skeleton's [component style guidelines](/docs/\[framework]/resources/contribute/components).
* This provides a number of style props for easy customization via Skeleton's standard conventions.
* The component exposes `code`, `lang`, and `theme` properties to configure on-the-fly.
* The Code Block `<pre>` tag is auto-generated by Shiki; target utility classes with: `[&>pre]:myClassHere`.

## Programmatic Usage

In some cases you may not have direct access to the source code, such as content from a blog posts or CMS pages. In fact the code may even come pre-baked with surrounding `<pre>` or `<code>` elements. For this, you'll need to follow the general steps below. Specific implementation may differ based on your app and framework.

1. Query all `<pre>` or `<code>` blocks using Javascript tools like `document.querySelectorAll()`. Be as specific as possible.
2. Ensure you have a clean instance of the source code itself, with no extra markup injected within.
3. Use Shiki's [codeToHtml](https://shiki.style/guide/install#shorthands) feature to parse the code as styled HTML markup.
4. Then append each instance of the code blocks in your DOM.

## Custom Themes

Shiki provides support for generating a custom highlighter theme:

* [Loading Custom Themes](https://shiki.style/guide/load-theme)
* [List of Bundled Themes](https://shiki.style/themes)

Shiki theme values can be defined using Skeleton custom theme properties, such as `rgba(--color-primary-500)`.

## Accessibility

See [Salma Alam-Naylor's](https://whitep4nth3r.com/about/) guidelines for [creating accessible code blocks](https://whitep4nth3r.com/blog/how-to-make-your-code-blocks-accessible-on-your-website/) that meet WGAC standards.

# Bits UI

Flexible, unstyled, and accessible primitives that provide the foundation for building your own high-quality Svelte component library.

Bits UI is a collection of headless component primitives for Svelte that prioritizes developer experience, accessibility, and flexibility. The goal is to empower developers to build high-quality, accessible user interfaces without sacrificing creative control or performance.

At minimum, we recommend you read the following documentation before you start this integration guide.

* [Getting Started](https://www.bits-ui.com/docs/getting-started)
* [Styling](https://www.bits-ui.com/docs/styling)

## Requirements

\| Tooling                              | Minimum Supported |
\| ------------------------------------ | ----------------- |
\| [Svelte](https://svelte.dev/)        | 5                 |
\| [Skeleton](https://skeleton.dev)     | 3                 |
\| [Tailwind](https://tailwindcss.com/) | 4                 |
\| [Bits UI](https://www.bits-ui.com/)  | 1                 |

## Introduction

In this guide we'll implement the following Bits UI `<Calendar>` component. This will showcase the bare minimum requirements for integrating Skeleton with Bits UI.

## Get Started

## Styling

Each Bits UI component accepts a `class` attribute. Use this to provide Tailwind and Skeleton utility classes.

### Basic Styles

Styling the `<Calendar.Root>` parent component.

```svelte
<Calendar.Root class="card inline-block border border-surface-200-800 bg-surface-50-950 shadow-xl mt-6 p-4">
	<!-- ... -->
</Calendar.Root>
```

Styling the `<Calendar.PrevButton>` sub-component. You can clone these to `<Calendar.NextButton>` too.

```svelte
<Calendar.PrevButton class="btn-icon preset-filled-primary-500" title="Previous month" aria-label="Previous month">
	<span>&larr;</span>
</Calendar.PrevButton>
```

Styling the `<Calendar.Day>` sub-component.

```svelte
<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-background group-data-today:block absolute top-[5px] hidden size-1 rounded-full"></div>
	{date.day}
</Calendar.Day>
```

For the sake of time we won't cover every sub-component.

### Complete Example

Below is a complete example showing the entire component with all styles and basic configuration.

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

## Going Further

If you wish to match Skeleton component conventions, view our [contributor component guidelines](/docs/\[framework]/resources/contribute/components).

## Attribution

Bits UI is created and maintained by [Huntabyte](https://github.com/huntabyte). Consider [sponsoring him](https://github.com/sponsors/huntabyte) to support this open source project.

# Melt UI

An open-source Svelte library for building high-quality, accessible design systems and web apps.

Melt UI empowers developers to create accessible UIs that embody their unique style. With a strong focus on accessibility, limitless customization options, and an overall delightful developer experience, Melt UI strives to be the de-facto headless UI library for Svelte.

At minimum, we recommend you read the following documentation before you start this integration guide.

* [Styling](https://next.melt-ui.com/guides/styling)
* [How to Use](https://next.melt-ui.com/guides/how-to-use)

## Requirements

\| Tooling                              | Minimum Supported  |
\| ------------------------------------ | ------------------ |
\| [Svelte](https://svelte.dev/)        | 5                  |
\| [Skeleton](https://skeleton.dev)     | 3                  |
\| [Tailwind](https://tailwindcss.com/) | 4                  |
\| [Melt UI](https://next.melt-ui.com/) | (Svelte 5 version) |

## Introduction

In this guide we'll implement the following Melt UI `<Accordion>` component. This will showcase the bare minimum requirements for integrating Skeleton with Melt UI.

## Get Started

## Styling

Melt UI builders are made up of native HTML elements, meaning you can implement classes directly. Use this to provide Tailwind and Skeleton utility classes.

### Basic Styles

Styling the root element.

```svelte
<div {...accordion.root} class="card overflow-hidden">
	<!-- ... -->
</div>
```

Styling the trigger button element.

```svelte
<button {...item.trigger} class="preset-filled-surface-200-800 hover:preset-filled-primary-500 w-full cursor-pointer p-4 text-left">
	<!-- ... -->
</button>
```

Styling content element, including animations based on the `data-state` value.

```svelte
<div
	{...item.content}
	class="preset-filled-surface-100-900 cursor-pointer p-4 transition-all duration-200 data-[state=closed]:h-0 data-[state=closed]:py-0"
>
	<!-- ... -->
</div>
```

Before the close of the `#each` block, insert the follow to insert a `<hr />` divider.

```svelte
{#if index < items.length - 1}<hr class="hr border-surface-50-950" />{/if}
```

### Complete Example

Below is a complete example showing the entire component with styles, transitions, and some basic configuration.

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

## Going Further

If you wish to match Skeleton component conventions, view our [contributor component guidelines](/docs/\[framework]/resources/contribute/components).

## Attribution

Melt UI is created and maintained by [TGlide](https://github.com/TGlide). Consider [sponsoring him](https://github.com/sponsors/TGlide) to support this open source project.

# Radix UI

Unstyled, accessible, open source React primitives for high-quality web apps and design systems.

Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.

At minimum, we recommend you read the following documentation before you start this integration guide.

* [Introduction](https://www.radix-ui.com/primitives/docs/overview/introduction)
* [Getting Started](https://www.radix-ui.com/primitives/docs/overview/getting-started)
* [Styling](https://www.radix-ui.com/primitives/docs/guides/styling)

## Requirements

\| Tooling                               | Minimum Supported |
\| ------------------------------------- | ----------------- |
\| [React](https://react.dev/)           | 18                |
\| [Skeleton](https://skeleton.dev)      | 3                 |
\| [Radix UI](https://www.radix-ui.com/) | 1                 |
\| [Tailwind](https://tailwindcss.com/)  | 4                 |

## Introduction

In this guide we'll implement the following Radix UI `<ToggleGroup>` component. This will showcase the bare minimum requirements for integrating Skeleton with Radix UI.

## Get Started

## Styling

Each Radix UI component accepts a `className` prop. Use this to provide Tailwind and Skeleton utility classes.

### Basic Styles

Styling the `<RadixToggleGroup.Root>` component.

```tsx
<RadixToggleGroup.Root
	className="btn-group preset-outlined-surface-200-800 flex-col p-2 md:flex-row"
	type="single"
	defaultValue="center"
	aria-label="Text alignment"
>
	{/* ... */}
</RadixToggleGroup.Root>
```

Styling each item component. Apply these styles to each button.

```tsx
<RadixToggleGroup.Item className="btn hover:preset-tonal data-[state=on]:preset-filled" value="..." aria-label="...">
	{/* ... */}
</RadixToggleGroup.Item>
```

### Complete Example

Below is a complete example showing the entire component with all styles and basic configuration.

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

interface ToggleGroupProps {
	/* ... */
}

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

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

## Going Further

If you wish to match Skeleton component conventions, view our [contributor component guidelines](/docs/\[framework]/resources/contribute/components).

## Attribution

Radix UI is created and maintained by [WorkOS](https://workos.com/).

## Resources

# Contribute

Learn how to contribute to Skeleton.
# LLMs

Documentation for LLMs. Beep Boop.

The Skeleton `LLMs.txt` files provide concise, up-to-date documentation optimized for large language models. The have been implemented to follow the **LLM.txt Standard**.

## Paths

\| Path                                 | Description                                               |
\| ------------------------------------ | --------------------------------------------------------- |
\| [/llms.txt](/llms.txt)               | Comprehensive list of LLMs txt files.                     |
\| [/llms-react.txt](/llms-react.txt)   | Complete documentation for Skeleton, tailored for React.  |
\| [/llms-svelte.txt](/llms-svelte.txt) | Complete documentation for Skeleton, tailored for Svelte. |
\| [/llms-full.txt](/llms-full.txt)     | Complete documentation for Skeleton                       |