# 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.

<figure className="linker bg-noise">
  <SkeletonBig className="aspect-square size-48 drop-shadow-md fill-current" />
</figure>

## In a Nutshell

{

  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
    	<h3 className="h3">Design System</h3>
    	<p className="text-surface-800-200">
    		This aims to augment Tailwind CSS. It provides themes, styled elements, and provides opinionated guardrails for integrating your fully
    		featured design system.
    	</p>
    </div>
    <div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
    	<h3 className="h3">Components</h3>
    	<p className="text-surface-800-200">
    		Turnkey components built atop the foundation of{' '}
    		<a href="https://zagjs.com/" target="_blank" class="anchor">
    			Zag.js
    		</a>
    		. These automatically adapt to the Skeleton design system out of the box. Currently available for Svelte and React.
    	</p>
    </div>
  </div>

}

## Our Philosophy

{

  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
    	<h3 className="h3">Framework Agnostic</h3>
    	<p className="text-surface-800-200">
    		Skeleton's core features are framework agnostic, only requiring the use of{' '}
    		<a className="anchor" href="https://tailwindcss.com/" target="_blank" rel="external">
    			Tailwind CSS
    		</a>
    		. This provides full access to all design system features, while enabling you to standardize the design process for your framework of
    		choice.
    	</p>
    </div>
    <div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
    	<h3 className="h3">Native-First</h3>
    	<p className="text-surface-800-200">
    		We aim to embrace the interface of the web, not replace it. This is why Skeleton defaults to semantic HTML elements and native browser
    		APIs. Beyond ease of use, we feel this offers a huge advantages to accessibility.
    	</p>
    </div>
    <div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
    	<h3 className="h3">Simple Standards</h3>
    	<p className="text-surface-800-200">
    		We aim to standardize the design process, providing common conventions that are easy to learn and retain, whether you work alone or in
    		a team environment. Covering common fixtures such as themes, colors, typography, spacing, and more.
    	</p>
    </div>
    <div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
    	<h3 className="h3">Utility-First</h3>
    	<p className="text-surface-800-200">
    		Skeleton embraces the{' '}
    		<a className="anchor" href="https://tailwindcss.com/docs/utility-first" target="_blank" rel="external">
    			utility-first
    		</a>{' '}
    		methodology for styling, supporting all features provided by{' '}
    		<a className="anchor" href="https://tailwindcss.com/" target="_blank" rel="external">
    			Tailwind
    		</a>
    		, while extending its capabilities in meaningful ways. Providing full support for the encapsulated components of the modern web.
    	</p>
    </div>
    <div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
    	<h3 className="h3">Opt-In by Default</h3>
    	<p className="text-surface-800-200">
    		Most features in Skeleton are modular and opt-in by default. Enabling interface features like buttons and typography via dedicated
    		utility classes. This allows for a simple escape hatch when you need to draw outside the lines and generate custom interfaces.
    	</p>
    </div>
    <div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
    	<h3 className="h3">Adaptive</h3>
    	<p className="text-surface-800-200">
    		Skeleton is intended to adapt to the design and aesthetic of your project, while still providing reasonable defaults. Providing a
    		powerful{' '}
    		<a className="anchor" href="https://themes.skeleton.dev/" target="_blank" rel="external">
    			theme generator
    		</a>{' '}
    		for custom themes, while also supplying a curated set of themes for those less design savvy.
    	</p>
    </div>
  </div>

}

## Additional Benefits

{

  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
    	<h3 className="h3">Open Source</h3>
    	<p className="text-surface-800-200">
    		Skeleton is provided as{' '}
    		<a href="https://github.com/skeletonlabs/skeleton" target="_blank" class="anchor">
    			free and open-source software (FOSS)
    		</a>{' '}
    		under the{' '}
    		<a href="https://github.com/skeletonlabs/skeleton?tab=MIT-1-ov-file#readme" target="_blank" class="anchor">
    			MIT License
    		</a>
    		.
    	</p>
    </div>
    <div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
    	<h3 className="h3">The Community</h3>
    	<p className="text-surface-800-200">
    		A vast community of users and contributors across{' '}
    		<a href="https://github.com/skeletonlabs/skeleton" target="_blank" class="anchor">
    			GitHub
    		</a>
    		,{' '}
    		<a href="https://discord.gg/EXqV7W8MtY" target="_blank" class="anchor">
    			Discord
    		</a>
    		, and{' '}
    		<a href="https://bsky.app/profile/skeleton.dev" target="_blank" class="anchor">
    			Bluesky
    		</a>
    		.
    	</p>
    </div>
    <div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
    	<h3 className="h3">Frequent Updates</h3>
    	<p className="text-surface-800-200">
    		Skeleton has maintained a frequent release cadence over for years. Just take a look at our{' '}
    		<a href="https://github.com/skeletonlabs/skeleton/releases" target="_blank" class="anchor">
    			Releases
    		</a>
    		.
    	</p>
    </div>
    <div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
    	<h3 className="h3">Community Tools</h3>
    	<p className="text-surface-800-200">
    		We promote community-based projects that help augment Skeleton and improve your productivity, such as the{' '}
    		<a href="https://www.etesie.dev/figma" target="_blank" rel="noopener noreferrer" class="anchor">
    			Figma UI Kit
    		</a>
    		.
    	</p>
    </div>
  </div>

}

# Installation

Learn how to install and setup Skeleton for your project.

## Guides

<NavigationGrid filter={(doc) => doc.id.includes('installation/')} class="md:grid-cols-2" />

## 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.

Skeleton is comprised of three pillars - the design system, our extensions to Tailwind, and an optional suite of framework-specific components. Together these form a comprehensive solution for designing and implementing complex web interfaces at scale.

***

## Design System

Explore each pillar of the Skeleton design system. Provided via the Skeleton core.

<NavigationGrid filter={(doc) => doc.id.includes('design/')} class="md:grid-cols-2" />

***

## Tailwind Components

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

<NavigationGrid filter={(doc) => doc.id.includes('tailwind-components/')} class="md:grid-cols-2" />

***

## Framework 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.

### Supported Frameworks

\| 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/).

<iframe class="aspect-video" src="https://www.youtube-nocookie.com/embed/SLPBmP588Hk?si=NJLvt4aMrevTnQbY" title="Skeleton + Zag.js: Building Cross-Framework Components" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

<figure class="linker bg-noise">
  <a class="btn preset-filled" href="https://zagjs.com/" target="_blank">
    View Zag.js
  </a>
</figure>

### Importing Components

You may import components per each Skeleton framework as follows.

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

This also includes access to the component prop types.

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

### 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 template within. Including: `required`, `data-*`, `style`, `className`, and more.

```tsx
export default function Avatar() {
	return (
		<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 `className` attribute. Use this to pass any CSS utility class.

```tsx
export default function Avatar() {
	return (
		<Avatar className="rounded-2xl">
			<Avatar.Image src="https://i.pravatar.cc/150?img=48" className="grayscale" />
			<Avatar.Fallback>SK</Avatar.Fallback>
		</Avatar>
	);
}
```

### Extensible Markup

Skeleton components provide a mechanism for overwriting the internal HTML with custom markup. Use the `element` prop to provide a custom element, this prop accepts a function which the `attributes` are passed into. Then spread the `attributes` to your custom elements. Note that this is an optional and advanced feature aimed at power users, and should not be needed for normal usage.

```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>
	);
}
```

### Custom Animations

Using the extensible markup pattern, you may implement custom animations. We showcase this below with [Motion](https://motion.dev/), but you could also use framework agnostic solutions such as [Anime.js](https://animejs.com/) or [Animate.css](https://animate.style/).

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

export default function CustomAnimation() {
	return (
		<Accordion>
			{['1', '2', '3'].map((item) => (
				<Accordion.Item key={item} value={item}>
					<h3>
						<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
					</h3>
					<Accordion.ItemContent
						element={(attributes) => (
							<AnimatePresence initial={false}>
								{!attributes.hidden && (
									<motion.div
										className="overflow-hidden"
										initial={{ height: 0, opacity: 0 }}
										animate={{ height: 'auto', opacity: 1 }}
										exit={{ height: 0, opacity: 0 }}
									>
										<div {...attributes}>Content for item {item}</div>
									</motion.div>
								)}
							</AnimatePresence>
						)}
					/>
				</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. Wrap the custom element in Motion's `<AnimatePresence>`.
4. Then implement conditional rendering that triggers animations when `attributes.hidden` is toggled.

### Data Model Pattern

Skeleton components maintain a uniform pattern for handling data flow in and out. We lean into the Zag convention for this, which handles this explicitly with a prop for data in and event handler for data out. As opposed to two-way binding (such as `bind:` in Svelte). You can see this in practice below for the Switch component.

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

export default function Default() {
	const [checked, setChecked] = useState(false);

    return (
    	<Switch checked={checked} onCheckedChange={(e) => setChecked(e.checked)}>
    		<Switch.Control>
    			<Switch.Thumb />
    		</Switch.Control>
    		<Switch.Label>Label</Switch.Label>
    		<Switch.HiddenInput />
    	</Switch>
    );

}

```

In this example the Switch component uses `checked` to pass state in, and `onCheckedChange` to listen and update then the state is modified internally. Please note the prop, event prop, and key within the event payload may vary from component to component. For example:

* `<Accordion>` - handled via `open` / `onOpenChange` / `e.change`
* `<Slider>` - handled via `value` / `onValueChange` / `e.value`
* `<Stepper>` - handled via `step` / `onStepChange` / `e.step`

This pattern is utilized for all relevant components, and is documented via the [API Reference](/docs/framework-components/switch#api-reference) table per component.

### Provider Pattern

Most Skeleton components also support the Provider Pattern. This utilizes a provider component that replaces the root and provides access to the underlying 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.

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

export default function TooltipExample() {
	const tooltip = useTooltip();

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

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

### 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 the framework agnostic core package. This adapts and extends Tailwind to introduce Skeleton's global styles, color system, typography, and more. Each section below details available theme properties and utility classes.

## Introduction

Below you will find documentation covering Skeleton's core features.

* **Skeleton Theme Property** - represents the CSS design token within each Skeleton theme file.
* **Tailwind @theme Property** - represents the `@theme` property provided to Tailwind.
* **Class** - represents one or more utility classes generated by `@theme` injection.

## @base

Extends Tailwind's base layer with a set of opinionated global styles. Refer to [Globals](/docs/svelte/design/globals) for details.

<figure class="linker bg-noise">
  <a class="btn preset-filled" href="https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton/src/base/globals.css" target="_blank">
    View Global Styles
  </a>
</figure>

## @theme

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

<figure class="linker bg-noise">
  <a class="btn preset-filled" href="https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton/src/base/theme.css" target="_blank">
    View Theme Properties
  </a>
</figure>

### Animations

Provides keyframe-driven animation utilities used by Skeleton's internal components.

\| Skeleton Theme Property                                | Tailwind @theme Property                               | Class                                              |
\| ------------------------------------------------------ | ------------------------------------------------------ | -------------------------------------------------- |
\| {`--`}animate-progress-linear-indeterminate-horizontal | {`--`}animate-progress-linear-indeterminate-horizontal | `animate-progress-linear-indeterminate-horizontal` |
\| {`--`}animate-progress-linear-indeterminate-vertical   | {`--`}animate-progress-linear-indeterminate-vertical   | `animate-progress-linear-indeterminate-vertical`   |
\| {`--`}animate-progress-circular-indeterminate          | {`--`}animate-progress-circular-indeterminate          | `animate-progress-circular-indeterminate`          |

### Colors

Extends Tailwind's color palette with Skeleton theme-specific color values. Refer to [Colors](/docs/\[framework]/design/colors) for details.

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

Represents the most common and standard color properties available to use.

\| Skeleton Theme Property              | Tailwind @theme Property             | Class                                 |
\| ------------------------------------ | ------------------------------------ | ------------------------------------- |
\| {`--`}color-\[color]-\[shade]          | {`--`}color-\[color]-\[shade]          | `[property]-[color]-[shade]`          |
\| {`--`}color-\[color]-contrast-\[shade] | {`--`}color-\[color]-contrast-\[shade] | `[property]-[color]-contrast-[shade]` |
\| {`--`}color-\[color]-contrast-light   | {`--`}color-\[color]-contrast-light   | `[property]-[color]-contrast-light`   |
\| {`--`}color-\[color]-contrast-dark    | {`--`}color-\[color]-contrast-dark    | `[property]-[color]-contrast-dark`    |
\| {`--`}color-root-bg-light            | {`--`}color-root-bg-light            | `[property]-root-bg-light`            |
\| {`--`}color-root-bg-dark             | {`--`}color-root-bg-dark             | `[property]-root-bg-dark`             |

#### Brand

Represents a variable accent color that can be tailored for light and dark mode. Refer to [Brand Color](/docs/svelte/design/colors#brand-color) for details.

\| Skeleton Theme Property          | Tailwind @theme Property         | Class                             |
\| -------------------------------- | -------------------------------- | --------------------------------- |
\| {`--`}color-brand-light          | {`--`}color-brand-light          | `[property]-brand-light`          |
\| {`--`}color-brand-contrast-light | {`--`}color-brand-contrast-light | `[property]-brand-contrast-light` |
\| {`--`}color-brand-dark           | {`--`}color-brand-dark           | `[property]-brand-dark`           |
\| {`--`}color-brand-contrast-dark  | {`--`}color-brand-contrast-dark  | `[property]-brand-contrast-dark`  |

#### Color Pairings

Extends colors to implement [Color Pairing](/docs/\[framework]/design/colors#color-pairings), balancing colors for light and dark mode using the CSS `light-dark()` function.

\| Skeleton Theme Property                      | Tailwind @theme Property                     | Class                                         |
\| -------------------------------------------- | -------------------------------------------- | --------------------------------------------- |
\| {`--`}color-\[color]-\[shade]-\[shade]          | {`--`}color-\[color]-\[shade]-\[shade]          | `[property]-[color]-[shade]-[shade]`          |
\| {`--`}color-\[color]-contrast-\[shade]-\[shade] | {`--`}color-\[color]-contrast-\[shade]-\[shade] | `[property]-[color]-contrast-[shade]-[shade]` |

> NOTE: Pairing values are specific; shade 500 does not include a pairing.

### Edges

Sets the default width for Tailwind's border, ring, and outline utilities to match theme values.

\| Skeleton Theme Property     | Tailwind @theme Property    | Class     |
\| --------------------------- | --------------------------- | --------- |
\| {`--`}default-border-width  | {`--`}default-border-width  | `border`  |
\| {`--`}default-ring-width    | {`--`}default-ring-width    | `ring`    |
\| {`--`}default-outline-width | {`--`}default-outline-width | `outline` |

> IMPORTANT: never set `outline` to `0px` as this would violate accessibility.

#### Border Radius

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

\| Skeleton Theme Property | Tailwind @theme Property | Class               |
\| ----------------------- | ------------------------ | ------------------- |
\| {`--`}radius-base       | {`--`}radius-base        | `rounded-base`      |
\| {`--`}radius-container  | {`--`}radius-container   | `rounded-container` |

#### Corner Shape

Enables the [corner-shape](/docs/\[framework]/tailwind-utilities/corner-shapes#browser-support) utility, and sets the default `base` and `container` sizes respectively.

\| Skeleton Theme Property      | Tailwind @theme Property | Class                  |
\| ---------------------------- | ------------------------ | ---------------------- |
\|                              |                          | corner-shape-\*        |
\| {`--`}corner-shape-base      |                          | corner-shape-base      |
\| {`--`}corner-shape-container |                          | corner-shape-container |

> NOTE: this is an emerging feature with limited browser support. Make sure to utilize progressive enhancement.

### Element Sizes

A roster of element sizes matching Tailwind's built-in `--type-*` scale. These are the basis for button, badge, chip, and field sizes. As well as enabling uniform [icons sizes](/docs/\[framework]/design/iconography#sizes). Can also be used with `size-*`, `w-*`, `h-*`, and more (ex: `size-elem-xl`).

\| Skeleton Theme Property | Tailwind @theme Property | Class                  |
\| ----------------------- | ------------------------ | ---------------------- |
\|                         | {`--`}spacing-elem-xs    | `[property]-elem-xs`   |
\|                         | {`--`}spacing-elem-sm    | `[property]-elem-sm`   |
\|                         | {`--`}spacing-elem-base  | `[property]-elem-base` |
\|                         | {`--`}spacing-elem-lg    | `[property]-elem-lg`   |
\|                         | {`--`}spacing-elem-xl    | `[property]-elem-xl`   |
\|                         | {`--`}spacing-elem-2xl   | `[property]-elem-2xl`  |
\|                         | {`--`}spacing-elem-3xl   | `[property]-elem-3xl`  |
\|                         | {`--`}spacing-elem-4xl   | `[property]-elem-4xl`  |
\|                         | {`--`}spacing-elem-5xl   | `[property]-elem-5xl`  |
\|                         | {`--`}spacing-elem-6xl   | `[property]-elem-6xl`  |
\|                         | {`--`}spacing-elem-7xl   | `[property]-elem-7xl`  |
\|                         | {`--`}spacing-elem-8xl   | `[property]-elem-8xl`  |
\|                         | {`--`}spacing-elem-9xl   | `[property]-elem-9xl`  |

### 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.

\| Skeleton Theme Property | Tailwind @theme Property | Class     |
\| ----------------------- | ------------------------ | --------- |
\| {`--`}spacing           | {`--`}spacing            | (various) |

### Typography

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

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

\| Skeleton Theme Property | Tailwind @theme Property | Class |
\| ----------------------- | ------------------------ | ----- |
\| {`--`}text-scaling      |                          |       |

#### Base

Controls the style of the base (aka global) default page text.

\| Skeleton Theme Property         | Tailwind @theme Property    | Class                        |
\| ------------------------------- | --------------------------- | ---------------------------- |
\| {`--`}typo-base--font-family    | {`--`}font-typo-base        | `font-typo-base`             |
\| {`--`}typo-base--font-size      | {`--`}text-typo-base        | `text-typo-base`             |
\| {`--`}typo-base--color-light    | {`--`}color-typo-base-light | `[property]-typo-base-light` |
\| {`--`}typo-base--color-dark     | {`--`}color-typo-base-dark  | `[property]-typo-base-dark`  |
\| {`--`}typo-base--line-height    | {`--`}leading-typo-base     | `leading-typo-base`          |
\| {`--`}typo-base--font-weight    |                             |                              |
\| {`--`}typo-base--font-style     |                             |                              |
\| {`--`}typo-base--letter-spacing | {`--`}tracking-typo-base    | `tracking-typo-base`         |
\| {`--`}typo-base--font-stretch   |                             |                              |
\| {`--`}typo-base--font-kerning   |                             |                              |
\| {`--`}typo-base--text-shadow    | {`--`}text-shadow-typo-base | `text-shadow-typo-base`      |
\| {`--`}typo-base--word-spacing   |                             |                              |
\| {`--`}typo-base--hyphens        |                             |                              |
\| {`--`}typo-base--text-transform |                             |                              |

#### Heading

Controls the style of the heading text.

\| Skeleton Theme Property            | Tailwind @theme Property       | Class                           |
\| ---------------------------------- | ------------------------------ | ------------------------------- |
\| {`--`}typo-heading--font-family    | {`--`}font-typo-heading        | `font-typo-heading`             |
\| {`--`}typo-heading--color-light    | {`--`}color-typo-heading-light | `[property]-typo-heading-light` |
\| {`--`}typo-heading--color-dark     | {`--`}color-typo-heading-dark  | `[property]-typo-heading-dark`  |
\| {`--`}typo-heading--font-weight    |                                |                                 |
\| {`--`}typo-heading--font-style     |                                |                                 |
\| {`--`}typo-heading--letter-spacing | {`--`}tracking-typo-heading    | `tracking-typo-heading`         |
\| {`--`}typo-heading--font-stretch   |                                |                                 |
\| {`--`}typo-heading--font-kerning   |                                |                                 |
\| {`--`}typo-heading--text-shadow    | {`--`}text-shadow-typo-heading | `text-shadow-typo-heading`      |
\| {`--`}typo-heading--word-spacing   |                                |                                 |
\| {`--`}typo-heading--hyphens        |                                |                                 |
\| {`--`}typo-heading--text-transform |                                |                                 |

#### Anchor

Controls the style of anchor links.

\| Skeleton Theme Property                              | Tailwind @theme Property      | Class                          |
\| ---------------------------------------------------- | ----------------------------- | ------------------------------ |
\| {`--`}typo-anchor--font-family                       | {`--`}font-typo-anchor        | `font-typo-anchor`             |
\| {`--`}typo-anchor--font-size                         | {`--`}text-typo-anchor        | `text-typo-anchor`             |
\| {`--`}typo-anchor--color-light                       | {`--`}color-typo-anchor-light | `[property]-typo-anchor-light` |
\| {`--`}typo-anchor--color-dark                        | {`--`}color-typo-anchor-dark  | `[property]-typo-anchor-dark`  |
\| {`--`}typo-anchor--line-height                       | {`--`}leading-typo-anchor     | `leading-typo-anchor`          |
\| {`--`}typo-anchor--font-weight                       |                               |                                |
\| {`--`}typo-anchor--font-style                        |                               |                                |
\| {`--`}typo-anchor--letter-spacing                    | {`--`}tracking-typo-anchor    | `tracking-typo-anchor`         |
\| {`--`}typo-anchor--font-stretch                      |                               |                                |
\| {`--`}typo-anchor--font-kerning                      |                               |                                |
\| {`--`}typo-anchor--text-shadow                       | {`--`}text-shadow-typo-anchor | `text-shadow-typo-anchor`      |
\| {`--`}typo-anchor--word-spacing                      |                               |                                |
\| {`--`}typo-anchor--hyphens                           |                               |                                |
\| {`--`}typo-anchor--text-transform                    |                               |                                |
\| {`--`}typo-anchor--text-decoration-line              |                               |                                |
\| {`--`}typo-anchor--text-decoration-color             |                               |                                |
\| {`--`}typo-anchor--text-decoration-style             |                               |                                |
\| {`--`}typo-anchor--text-decoration-thickness         |                               |                                |
\| {`--`}typo-anchor--text-underline-offset             |                               |                                |
\| {`--`}typo-anchor--text-underline-position           |                               |                                |
\| {`--`}typo-anchor--hover--text-decoration-line       |                               |                                |
\| {`--`}typo-anchor--hover--text-decoration-color      |                               |                                |
\| {`--`}typo-anchor--hover--text-decoration-style      |                               |                                |
\| {`--`}typo-anchor--hover--text-decoration-thickness  |                               |                                |
\| {`--`}typo-anchor--hover--text-underline-offset      |                               |                                |
\| {`--`}typo-anchor--hover--text-underline-position    |                               |                                |
\| {`--`}typo-anchor--active--text-decoration-line      |                               |                                |
\| {`--`}typo-anchor--active--text-decoration-color     |                               |                                |
\| {`--`}typo-anchor--active--text-decoration-style     |                               |                                |
\| {`--`}typo-anchor--active--text-decoration-thickness |                               |                                |
\| {`--`}typo-anchor--active--text-underline-offset     |                               |                                |
\| {`--`}typo-anchor--active--text-underline-position   |                               |                                |
\| {`--`}typo-anchor--focus--text-decoration-line       |                               |                                |
\| {`--`}typo-anchor--focus--text-decoration-color      |                               |                                |
\| {`--`}typo-anchor--focus--text-decoration-style      |                               |                                |
\| {`--`}typo-anchor--focus--text-decoration-thickness  |                               |                                |
\| {`--`}typo-anchor--focus--text-underline-offset      |                               |                                |
\| {`--`}typo-anchor--focus--text-underline-position    |                               |                                |

## @utility

Implements Skeleton's Tailwind-specific components and utilities.

<figure class="linker bg-noise">
  <a href="https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton/src/utilities" target="_blank" class="btn preset-filled">
    View Utilities
  </a>
</figure>

### Presets

Provides a reusable set of canned [Preset](/docs/\[framework]/tailwind-utilities/presets) styles for use with buttons, badges, cards, and more.

### Tailwind Components

Allows you to style semantic HTML elements with utility classes.

<NavigationGrid filter={(doc) => doc.id.includes('tailwind-components/')} class="md:grid-cols-2" />

## Themes

Provides a curated set of handcrafted themes for Skeleton.

<figure class="linker bg-noise">
  <a href={resolvePath(props.Astro, '/docs/[framework]/design/themes')} class="btn preset-filled">
    Browse Themes
  </a>
</figure>

***

## Arbitrary Syntax

If a certain Tailwind-generated utility class is not available to represent a Skeleton theme property, consider using [Tailwind's arbitrary syntax](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) to supplement this.

```html
<p class="[font-style:var(--typo-heading--font-style)]">Heading Font Style</p>
```

# Migrate from v4

Learn how to migrate from Skeleton v4 to the latest v5 release.

Skeleton v5 represents a notable update to the core API and theme layer. This improves and expands your theme's design tokens, introduces new Tailwind Components such as Disclosures, provides size options for buttons and form fields, establishes the new brand color properties, and more.

## Prerequisites

For older versions of Skeleton, please complete the following guides below before you proceed.

\| Path             | Guide                                                                         |
\| ---------------- | ----------------------------------------------------------------------------- |
\| Version v2 to v4 | [View Guide](https://v4.skeleton.dev/docs/svelte/get-started/migrate-from-v2) |
\| Version v3 to v4 | [View Guide](https://v4.skeleton.dev/docs/svelte/get-started/migrate-from-v3) |

We recommend you handle all migration changes on a dedicated feature branch, allowing you to easily revert if needed.

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

Make sure you've accounted for the following:

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

For `svelte`, the minimum peer dependency has been raised from `^5.29.0` to `^5.40.0`. React remains unchanged.

```bash
npm install svelte@latest
```

***

## Themes

### Preset Themes

Preset themes will automatically update with all changes. No action is required on your part.

### Custom Themes

We recommend importing custom themes into the Theme Generator to automatically convert to the new format. This will also allow you to configure any new or updated settings, while fine tuning the overall design.

<figure class="linker bg-noise">
  <a class="btn preset-filled" href="https://themes.skeleton.dev/themes/import" target="_blank" rel="noopener noreferrer">
    Auto-Convert Themes →
  </a>
</figure>

> TIP: custom fonts will not be imported. You can, however, implement these via the **Typography** controls.

### Design Tokens

Please refer to the [Core API](/docs/\[framework]/get-started/core-api#base) documentation for a complete token reference. Refer to the [Cerberus](https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton/src/themes/cerberus.css) theme for a complete theme reference. We'll now cover all notable changes below.

#### Renamed

The following token keys have changed, each value remains the same.

**Base Typography**

\| v4 Token                 | v5 Token                      |
\| ------------------------ | ----------------------------- |
\| `--base-font-family`     | `--typo-base--font-family`    |
\| `--base-font-size`       | `--typo-base--font-size`      |
\| `--base-font-color`      | `--typo-base--color-light`    |
\| `--base-font-color-dark` | `--typo-base--color-dark`     |
\| `--base-line-height`     | `--typo-base--line-height`    |
\| `--base-font-weight`     | `--typo-base--font-weight`    |
\| `--base-font-style`      | `--typo-base--font-style`     |
\| `--base-letter-spacing`  | `--typo-base--letter-spacing` |

**Heading Typography**

\| v4 Token                    | v5 Token                         |
\| --------------------------- | -------------------------------- |
\| `--heading-font-family`     | `--typo-heading--font-family`    |
\| `--heading-font-color`      | `--typo-heading--color-light`    |
\| `--heading-font-color-dark` | `--typo-heading--color-dark`     |
\| `--heading-font-weight`     | `--typo-heading--font-weight`    |
\| `--heading-font-style`      | `--typo-heading--font-style`     |
\| `--heading-letter-spacing`  | `--typo-heading--letter-spacing` |

**Anchor Typography**

\| v4 Token                   | v5 Token                        |
\| -------------------------- | ------------------------------- |
\| `--anchor-font-family`     | `--typo-anchor--font-family`    |
\| `--anchor-font-size`       | `--typo-anchor--font-size`      |
\| `--anchor-font-color`      | `--typo-anchor--color-light`    |
\| `--anchor-font-color-dark` | `--typo-anchor--color-dark`     |
\| `--anchor-line-height`     | `--typo-anchor--line-height`    |
\| `--anchor-font-weight`     | `--typo-anchor--font-weight`    |
\| `--anchor-font-style`      | `--typo-anchor--font-style`     |
\| `--anchor-letter-spacing`  | `--typo-anchor--letter-spacing` |

**Anchor Decoration**

\| v4 Token                          | v5 Token                                      |
\| --------------------------------- | --------------------------------------------- |
\| `--anchor-text-decoration`        | `--typo-anchor--text-decoration-line`         |
\| `--anchor-text-decoration-hover`  | `--typo-anchor--hover--text-decoration-line`  |
\| `--anchor-text-decoration-active` | `--typo-anchor--active--text-decoration-line` |
\| `--anchor-text-decoration-focus`  | `--typo-anchor--focus--text-decoration-line`  |

**Root Background**

\| v4 Token                       | v5 Token                |
\| ------------------------------ | ----------------------- |
\| `--body-background-color`      | `--color-root-bg-light` |
\| `--body-background-color-dark` | `--color-root-bg-dark`  |

#### Added

The following tokens expand the capabilities of your themes. Recommended default values have been provided.

**Typography**

\| Token                         | Default |
\| ----------------------------- | ------- |
\| `--typo-base--font-stretch`   | inherit |
\| `--typo-base--font-kerning`   | inherit |
\| `--typo-base--text-shadow`    | inherit |
\| `--typo-base--word-spacing`   | inherit |
\| `--typo-base--hyphens`        | inherit |
\| `--typo-base--text-transform` | inherit |

\| Token                            | Default |
\| -------------------------------- | ------- |
\| `--typo-heading--font-stretch`   | inherit |
\| `--typo-heading--font-kerning`   | inherit |
\| `--typo-heading--text-shadow`    | inherit |
\| `--typo-heading--word-spacing`   | inherit |
\| `--typo-heading--hyphens`        | inherit |
\| `--typo-heading--text-transform` | inherit |

\| Token                           | Default |
\| ------------------------------- | ------- |
\| `--typo-anchor--font-stretch`   | inherit |
\| `--typo-anchor--font-kerning`   | inherit |
\| `--typo-anchor--text-shadow`    | inherit |
\| `--typo-anchor--word-spacing`   | inherit |
\| `--typo-anchor--hyphens`        | inherit |
\| `--typo-anchor--text-transform` | inherit |

**Anchor Decorations**

\| Token                                      | Default |
\| ------------------------------------------ | ------- |
\| `--typo-anchor--text-decoration-color`     | inherit |
\| `--typo-anchor--text-decoration-style`     | inherit |
\| `--typo-anchor--text-decoration-thickness` | inherit |
\| `--typo-anchor--text-underline-offset`     | inherit |
\| `--typo-anchor--text-underline-position`   | inherit |

\| Token                                             | Default |
\| ------------------------------------------------- | ------- |
\| `--typo-anchor--hover--text-decoration-color`     | inherit |
\| `--typo-anchor--hover--text-decoration-style`     | inherit |
\| `--typo-anchor--hover--text-decoration-thickness` | inherit |
\| `--typo-anchor--hover--text-underline-offset`     | inherit |
\| `--typo-anchor--hover--text-underline-position`   | inherit |

\| Token                                              | Default |
\| -------------------------------------------------- | ------- |
\| `--typo-anchor--active--text-decoration-color`     | inherit |
\| `--typo-anchor--active--text-decoration-style`     | inherit |
\| `--typo-anchor--active--text-decoration-thickness` | inherit |
\| `--typo-anchor--active--text-underline-offset`     | inherit |
\| `--typo-anchor--active--text-underline-position`   | inherit |

\| Token                                             | Default |
\| ------------------------------------------------- | ------- |
\| `--typo-anchor--focus--text-decoration-color`     | inherit |
\| `--typo-anchor--focus--text-decoration-style`     | inherit |
\| `--typo-anchor--focus--text-decoration-thickness` | inherit |
\| `--typo-anchor--focus--text-underline-offset`     | inherit |
\| `--typo-anchor--focus--text-underline-position`   | inherit |

**Edges**

\| Key                       | Default |
\| ------------------------- | ------- |
\| `--default-outline-width` | 1px     |

**Corner Shapes**

\| Key                        | Default |
\| -------------------------- | ------- |
\| `--corner-shape-base`      | initial |
\| `--corner-shape-container` | initial |

**Colors**

\| Key                            | Default                           |
\| ------------------------------ | --------------------------------- |
\| `--color-brand-light`          | var(--color-primary-500)          |
\| `--color-brand-contrast-light` | var(--color-primary-contrast-500) |
\| `--color-brand-dark`           | var(--color-primary-500)          |
\| `--color-brand-contrast-dark`  | var(--color-primary-contrast-500) |

#### Removed

\| Key                      | Notes                                                                                           |
\| ------------------------ | ----------------------------------------------------------------------------------------------- |
\| `--default-divide-width` | This is a bugfix; the value is derived from `--default-border-width`                            |
\| `--heading-font-size`    | Now derived from the [typographic scale](/docs/\[framework]/design/typography#typographic-scale) |
\| `--heading-line-height`  | Now derived from the [typographic scale](/docs/\[framework]/design/typography#typographic-scale) |

***

## Utility Classes

Several utility classes have been replaced or removed. Relevant replacements are noted below.

\| v4 Class                | v5 Replacement                                             | Docs                                                             |
\| ----------------------- | ---------------------------------------------------------- | ---------------------------------------------------------------- |
\| `card-hover`            | The `card` utility auto-applies styles to `<a>`/`<button>` | [View](/docs/\[framework]/tailwind-components/cards#hover)        |
\| `input-group`           | Replaced with the `field-group` feature                    | [View](/docs/\[framework]/tailwind-components/forms#field-groups) |
\| `ig-cell`               | `label label-text`; use a semantic `<label>`               | --                                                               |
\| `ig-input`              | `input`                                                    | --                                                               |
\| `ig-select`             | `select`                                                   | --                                                               |
\| `ig-btn`                | `btn`                                                      | --                                                               |
\| `@variant theme-[name]` | Permanently removed                                        | [View](/docs/svelte/design/themes#target-themes)                 |

### Migrate Field Groups

Input Groups have now been replaced with the intuitive [Field Groups](/docs/\[framework]/tailwind-components/forms#field-groups) feature.

```html
<!-- v4 -->
<div class="input-group grid-cols-[auto_1fr_auto]">
	<div class="ig-cell preset-tonal">https://</div>
	<input class="ig-input" type="text" />
</div>

<!-- v5 -->
<div class="field-group grid-cols-[auto_1fr_auto]">
	<label class="label label-text preset-tonal" for="url">https://</label>
	<input class="input" type="text" id="url" />
</div>
```

***

## Brand Color

A new `--color-brand-*` token provides a default accent color for a number of Skeleton features. Refer to the new [Core API](/docs/svelte/get-started/core-api#brand) and updated [Colors](/docs/svelte/design/colors#brand-color) documentation for details.

* New presets have been added, including: `preset-filled-brand`, `preset-tonal-brand`, `preset-outlined-brand`.
* Brand color is now the default for: checkboxes, radios, circular progress, steps, switches, tabs, and accordions.
* Most Skeleton preset themes default to `primary-500`, which should result in little to no visual changes out of the box.
* The `nouveau` theme is the only exception; it sets a different brand color between light and dark mode.

This can be customized for any preset Skeleton theme (eg: Cerberus) using [this pattern](/docs/svelte/design/themes#modify-properties) in your global stylesheet.

```css
[data-theme='cerberus'] {
	--color-brand-light: var(--color-secondary-500);
	--color-brand-contrast-light: var(--color-secondary-contrast-500);
	--color-brand-dark: var(--color-secondary-500);
	--color-brand-contrast-dark: var(--color-secondary-contrast-500);
}
```

***

## Element Sizing

A new universal scaling system has been introduced for keeping element sizes uniform, using the new `--spacing-elem-{size}` token. Use this with `w-*`, `h-*`, `size-*`, `m-*`, `p-*` and more, paired with `xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl`. Refer to [Element Sizes](/docs/\[framework]/get-started/core-api#element-sizes) for details.

```html
<!-- SVG icon sized to match the "lg" element scale -->
<svg class="size-elem-lg">...</svg>

<!-- Width/height set independently -->
<div class="w-elem-base h-elem-base">...</div>

<!-- Padding/margin using the same scale -->
<div class="p-elem-sm m-elem-xl">...</div>
```

### Icons

Refer to [Icon Sizes](/docs/svelte/design/iconography#sizes) for more explicit examples and details. Note that icons used within Tailwind Components such as buttons, badges, chips, and field groups are sized **automatically**. Adding an explicit sizing utility is redundant.

### Buttons

Button sizes have been greatly expanded when using the `btn-{size}` utility. Refer to [Button Sizes](/docs/svelte/tailwind-components/buttons#sizes) for details.

\| v4 Class   | v5 Class   |
\| ---------- | ---------- |
\| --         | `btn-xs`   |
\| `btn-sm`   | `btn-sm`   |
\| `btn-base` | `btn-base` |
\| `btn-lg`   | `btn-lg`   |
\| --         | `btn-xl`   |
\| --         | `btn-2xl`  |
\| --         | `btn-3xl`  |
\| --         | `btn-4xl`  |
\| --         | `btn-5xl`  |
\| --         | `btn-6xl`  |
\| --         | `btn-7xl`  |
\| --         | `btn-8xl`  |
\| --         | `btn-9xl`  |

### Form Fields

Form fields honor the same scale via new `field-{size}` utility. Refer to [Field Sizes](/docs/\[framework]/tailwind-components/forms#field-sizes) for details.

***

## Additional Features

The following features are new additions. These are not breaking changes and are included for completeness.

### Design System

\| Feature    | Docs                                                              | Description                                                                |
\| ---------- | ----------------------------------------------------------------- | -------------------------------------------------------------------------- |
\| Typography | [View](/docs/\[framework]/design/typography#native-element-styles) | Expanded native element styles: `abbr`, `cite`, `q`, `sub`, `sup`, `time`. |

### Tailwind Utilities

\| Feature      | Docs                                                       | Description                                                                             |
\| ------------ | ---------------------------------------------------------- | --------------------------------------------------------------------------------------- |
\| Mask         | [View](/docs/\[framework]/tailwind-utilities/masks)         | Clip elements to a variety of decorative shapes using CSS mask-image.                   |
\| Corner Shape | [View](/docs/\[framework]/tailwind-utilities/corner-shapes) | Specifies the shape of a box's corners, within the area specified by its border-radius. |

### Tailwind Components

\| Feature          | Docs                                                      | Description                                                                         |
\| ---------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------- |
\| Dialog           | [View](/docs/\[framework]/tailwind-components/dialogs)     | Display modal popups using the native HTML dialog element.                          |
\| Disclosure       | [View](/docs/\[framework]/tailwind-components/disclosures) | Toggle the visibility of collapsible content using the native HTML details element. |
\| Forms and Inputs | [View](/docs/\[framework]/tailwind-components/forms#meter) | A new `meter` component has been added.                                             |

### Framework Components

\| Feature         | Docs                                                           | Description                                                                     |
\| --------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------- |
\| Marquee         | [View](/docs/\[framework]/framework-components/marquee)         | Auto-scrolls content like logos, announcements, or featured items.              |
\| QR Code         | [View](/docs/\[framework]/framework-components/qr-code)         | Render scannable QR codes with a frame, overlay, pattern, and download trigger. |
\| Locale Provider | [View](/docs/\[framework]/framework-components/locale-provider) | Provides locale context to components for controlling reading direction.        |

***

## Migration Complete

If you've completed all steps above, then your app is now fully migrated. Run your local dev server to confirm.

```bash
npm run dev
```

> TIP: remember to merge all changes into your primary branch!

***

## Support and Feedback

Need help or support? Contact the Skeleton team using either [Discord](https://discord.gg/EXqV7W8MtY) or [GitHub](https://github.com/skeletonlabs/skeleton/discussions). We're 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 for controlling the overall app or page mode, as well as Color Scheme to selectively toggle light or dark interfaces at any scope.

## Strategies

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

### Media Strategy

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

***

## Dark Variant

Apply any base style, then override for dark mode using Tailwind's `dark:` variant.

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

## Color Scheme

Skeleton 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).

> TIP: try toggling light/dark mode to see the difference

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

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

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

```

***

## Light Switch

Refer to the following Cookbook recipe to learn how to create an interactive toggle interface element.

<figure class="linker bg-noise">
  <a class="btn preset-filled" href={resolvePath(props.Astro, '/docs/[framework]/guides/cookbook/light-switch')}>
    Light Switch →
  </a>
</figure>

# 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.

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

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

<ColOneReact />

<figure class="linker bg-noise">
  <a class="btn preset-filled" href="https://play.tailwindcss.com/3ayrvPnIC4" target="_blank">
    Preview and Source
  </a>
</figure>

### Two Column

<ColTwoReact />

<figure class="linker bg-noise">
  <a class="btn preset-filled" href="https://play.tailwindcss.com/yCv0ZOICSx" target="_blank">
    Preview and Source
  </a>
</figure>

### Three Column

<ColThreeReact />

<figure class="linker bg-noise">
  <a class="btn preset-filled" href="https://play.tailwindcss.com/BH0iosKxix" target="_blank">
    Preview and Source
  </a>
</figure>

## 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.

<StickyHeaderReact />

<figure class="linker bg-noise">
  <a class="btn preset-filled" href="https://play.tailwindcss.com/g7ory5pA4K" target="_blank">
    Preview and Source
  </a>
</figure>

### 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.

<figure class="linker bg-noise">
  <a class="btn preset-filled" href="https://play.tailwindcss.com/aSzgim96nc" target="_blank">
    Preview and Source
  </a>
</figure>

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

<TableCookbook />

## Design System

# Globals

Skeleton's global default styles.

The following represent all global defaults applied via the Skeleton stylesheet.

## Customizing Globals

Skeleton provides a very minimal set of global styles out of the box. However, you are encouraged to override these styles in your app's global stylesheet as you see desired. Refer to the [Core API](/docs/svelte/get-started/core-api) for details on the theme properties used below.

## Root Element

### Design Tokens

```css
:root {
	/* Defines form field placeholder text styling. */
	--field-placeholder: var(--color-surface-700-300);
}
```

### Color Scheme

Controls the [Tailwind color scheme](https://tailwindcss.com/docs/color-scheme) based on the current [dark mode configuration](/docs/guides/mode).

```css
:root {
	color-scheme: light;
	@variant dark {
		color-scheme: dark;
	}
}
```

### Scrollbars

Implements themed [scrollbar styling](https://developer.chrome.com/docs/css-ui/scrollbar-styling). We recommend a transparent track for the best aesthetics.

```css
:root {
	scrollbar-width: thin;
	/* thumb / track */
	scrollbar-color: light-dark(var(--color-surface-300), var(--color-surface-700)) transparent;
}
```

### Tap Highlight Color

Implements a themed [tap highlight color](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color). Shown briefly when tapping interactive elements such as buttons.

> NOTE: This is a non-standard property and only supported by select mobile devices.

```css
:root {
	-webkit-tap-highlight-color: color-mix(in oklab, var(--color-surface-50-950) 30%, transparent);
}
```

## Html Element

### Background Color

Sets the app-wide background color for light and dark mode, using Skeleton theme properties.

```css
html {
	background-color: light-dark(var(--color-root-bg-light), var(--color-root-bg-dark));
}
```

## Body Element

### Typography

Sets the app-wide base typography settings, using Skeleton theme properties.

```css
body {
	color: light-dark(var(--typo-base--color-light), var(--typo-base--color-dark));
	font-family: var(--typo-base--font-family);
	font-size: var(--typo-base--font-size);
	line-height: var(--typo-base--line-height);
	font-weight: var(--typo-base--font-weight);
	font-style: var(--typo-base--font-style);
	letter-spacing: var(--typo-base--letter-spacing);
	font-stretch: var(--typo-base--font-stretch);
	font-kerning: var(--typo-base--font-kerning);
	text-shadow: var(--typo-base--text-shadow);
	word-spacing: var(--typo-base--word-spacing);
	hyphens: var(--typo-base--hyphens);
	text-transform: var(--typo-base--text-transform);
}
```

## Miscellaneous

### Selection

Implements themed styles for [selection](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::selection).

```css
::selection {
	background-color: color-mix(in oklab, light-dark(var(--color-brand-light), var(--color-brand-dark)) 50%, transparent);
}
```

### Disabled State

Implements the default [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/disabled) state styling and provides an optional utility class.

```css
*:disabled,
.disabled {
	box-shadow: none;
	cursor: not-allowed;
	opacity: 0.5;
	& > * {
		pointer-events: none;
	}
}
```

## Accessibility

As a reminder, never disable `focus` or `outline` styles, as these would be harmful to [accessibility](http://www.outlinenone.com/).

# Themes

The Skeleton theme system.

Skeleton themes utilize CSS custom properties to define core settings for your design system. A number of preset themes are offered out of the box. As well as access to a powerful theme generator to create your own. Enable one or more and quickly switch on-demand.

## How Themes Work

Skeleton themes are CSS files you import into your global stylesheet. They contain a number of [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) (aka variables). Skeleton's core package and CSS import sets the default values for the [Tailwind @theme directive](https://tailwindcss.com/docs/functions-and-directives#theme-directive), while themes override the defined values using your active theme.

## Preset Themes

Skeleton ships with an an array of hand curated themes. Tap the themes below to preview it live.

<ThemeList />

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

> Make sure to replace `{theme-name}` with your desired theme names. Set all lower-case, such as `cerberus`.

## Custom Themes

Use our powerful Theme Generator to create your own themes.

<figure class="linker bg-noise">
  <a href="https://themes.skeleton.dev/" target="_blank" class="btn preset-filled">
    Theme Generator
  </a>
</figure>

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 just above the code block.
5. Paste the contents into a new file at your project root, such as `my-theme-name.css` (any name is fine).
6. Proceed below to learn how to register and activate each theme.

## Register Themes

You may register any number of themes by including multiple imports to your global stylesheet. Please note that each theme will slightly increase your project's CSS bundle size, so avoid including unused themes.

```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](/docs/guides/cookbook/dynamic-theming), this is the value you should aim to modify.

***

## Customize and Extend

### Modify Properties

You can modify any preset theme's [CSS custom properties](/docs/\[framework]/get-started/core-api) on demand using the following technique. Simply add this to your global stylesheet. For custom themes, modify each property directly in the theme file.

```css
[data-theme='cerberus'] {
	--spacing: 0.22rem;
	--radius-container: 0.375rem;
	--typo-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 using [Tailwind @variant directives](https://tailwindcss.com/docs/functions-and-directives#variant-directive).

```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'] {
	--color-root-bg-light: pink;
	--color-root-bg-dark: green;
}
```

Background images are supported, including mesh gradients. The following example is shown using theme-specific 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 an RGB color format, but can be migrated to utilize `var()` for colors and `color-mix()` for transparency, per the example above.

<figure class="linker bg-noise">
  <a class="btn preset-filled" href="https://csshero.org/mesher/" target="_blank">
    Mesher by CSS Hero
  </a>
</figure>

### Custom Fonts

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

<figure class="linker bg-noise">
  <a class="btn preset-filled" href="https://fontsource.org/" target="_blank">
    Browse Fontsource
  </a>
</figure>

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'] {
	--typo-heading--font-family: 'Open Sans', sans-serif;
	--typo-base--font-family: 'Open Sans', sans-serif;
	--typo-anchor--font-family: 'inherit';
}
```

## Core API

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

# Colors

The Skeleton color system.

Skeleton provides guardrails and utilities to help you craft your custom color system. This includes a number of colors, shades, and contrast values that work together seamlessly, providing a visually appealing and accessible palette for each theme.

## Color Palette

<Default />

Supports <u>all</u> 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

Test the following with different themes and dark mode combinations.

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

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

```

Contrast color values are available for every shade in the color ramp. Use these to set accessible text color and icon fill values. You may also refer to the [Preset system](/docs/\[framework]/tailwind-utilities/presets) for utility classes that automatically mix each color and contrast tone.

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

***

## Color Pairings

<Pairings />

Provides a condensed syntax for dual-tone color values, evenly balanced to swap between light and dark mode. Pairings are supported for all Tailwind utility color classes (`bg`, `border`, `fill`, etc).

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

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

### How Pairings Work

Color Pairings are enabled through the use of the CSS [light-dark](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) function. This means instead of writing the standard light/dark syntax with Tailwind utilities:

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

Skeleton provides utility classes that condense this into a single class:

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

When implemented in your CSS bundle, this will be generated as follows:

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

The use of the CSS `light-dark()` function enables use of [Tailwind's Color Scheme](https://tailwindcss.com/docs/color-scheme) utilities. Refer to [Color Scheme](/docs/guides/mode#color-scheme) to learn how to use this within your Skeleton application.

### When to Use Pairings

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

<PairingsStack />

* We can use shade `950` for light mode and `50` for dark mode to represent our body text color.
* Then use shade `50` for light mode and `950` for 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.

***

## Brand Color

A variable accent color for your design system. Use this as the default color value when styling elements and components.

> TIP: The **Nouveau** theme makes use of variable brand color for light and dark modes.

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

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

```

### Benefits

* Brand utilizes any color from your theme palette (ex: primary/secondary/tertiary).
* Brand supports the use of custom colors.
* Brand can use any shade from 50-950; it is not limited to shade 500.
* Brand color/shade can be tailored for light and dark mode independently.
* Brand includes a contrast color for foreground elements.
* Brand supports all standard [presets](/docs/svelte/tailwind-utilities/presets) (`preset-filled-brand`, `preset-outlined-brand`, `preset-tonal-brand`)

***

## Transparency

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

***

## Core API

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

# Typography

The Skeleton typography system.

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

## Global Styles

The default base typography styles are applied as [globals](/docs/design/globals).

## Native Element Styles

Skeleton provides the following utility classes for styling semantic native HTML elements. All styles are opt-in by default, providing an escape hatch when you need to break from convention.

### Headings

Represents six levels of section 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

Represents a block of running text.

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

```

### Anchor

Creates a hyperlink to other pages, files, or locations within the same page.

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

```

### Pre-Formatted

Displays preformatted text exactly as written, preserving whitespace and line breaks.

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

```

### Code

Displays an inline fragment of computer code. Provides support for [Presets](/docs/\[framework]/tailwind-utilities/presets).

```astro
<div class="space-y-4">
	<p>Use <code class="code">.code</code> to highlight partials.</p>
	<hr class="hr" />
	<p>Use <code class="code preset-filled-primary-500">.code</code> to highlight partials.</p>
	<p>Use <code class="code preset-filled-secondary-500">.code</code> to highlight partials.</p>
	<p>Use <code class="code preset-filled-tertiary-500">.code</code> to highlight partials.</p>
</div>

```

### Keyboard

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

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

	<hr class="hr" />

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

```

### Insert & Delete

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

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

```

### Abbreviation

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

```astro
<p>
	The <abbr class="abbr" title="HyperText Markup Language">HTML</abbr> standard is maintained by the
	<abbr class="abbr" title="World Wide Web Consortium">W3C</abbr>.
</p>

```

### Blockquotes

Indicates an extended quotation set apart from surrounding content.

```astro
<blockquote class="blockquote">
	<p>
		"The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle. As with all matters of
		the heart, you'll know when you find it. And, like any great relationship, it just gets better and better as the years roll on."
	</p>
	<cite class="cite">&mdash; Steve Jobs</cite>
</blockquote>

```

### Citation

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

```astro
<p>
	One of the most influential novels of the 20th century is
	<cite class="cite"><a class="anchor" href="https://en.wikipedia.org/wiki/The_Great_Gatsby">The Great Gatsby</a></cite>
	by F. Scott Fitzgerald, often studied alongside <cite class="cite">To Kill a Mockingbird</cite>.
</p>

```

### Mark

Highlights text of relevance or importance within the surrounding context.

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

```

### Quotation

Represents a short inline quotation.

```astro
<p>The lead said, <q class="quote">we ship when ready</q>.</p>

```

### Subscript

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

```astro
<p>The chemical formula for water is H<sub class="sub">2</sub>O, and table salt is Na<sub class="sub">1</sub>Cl<sub class="sub">1</sub>.</p>

```

### Superscript

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

```astro
<p>
	Einstein's mass-energy equivalence is expressed as E = mc<sup class="sup">2</sup>, and the area of a circle is &pi;r<sup class="sup"
		>2</sup
	>.
</p>

```

### Time

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

```astro
<p>
	Apollo 11 landed on the Moon on <time class="time" datetime="1969-07-20">July 20, 1969</time>.
</p>

```

### Lists

Represents ordered and unordered lists of items. Skeleton defers to Tailwind's built-in utility classes for common list styles.

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

	<hr class="hr" />

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

	<hr class="hr" />

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

	<hr class="hr" />

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

	<hr class="hr" />

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

```

## Advanced Features

The following features are optional and intended for professionals with moderate understanding of web-based typography. If you're unfamiliar with these concepts, feel free to skip them and use the friendly defaults Skeleton provides out of the box.

### Typographic Scale

Skeleton augments [Tailwind's font-size](https://tailwindcss.com/docs/font-size) utilities to support a customizable [Typographic Scale](https://designcode.io/typographic-scales). Put simply, by modifying your theme's `--text-scaling` property, you can control the overall scale of text sizing globally throughout your application. See the [Core API](/docs/get-started/core-api#typography) to review the scaling formula.

<Preview client:visible>
  <Typescale client:visible />
</Preview>

> TIP: the base scale size is `1.0` for `100%`

### Semantic Typography

When working with a designer, they may craft a semantic set of typography for your project. These might include semantic names, canned sizes, and pre-configured styling. To handle this in Skeleton, we recommend following best practices for [User Generated Presets](/docs/\[framework]/tailwind-utilities/presets#user-generated), while mixing CSS primitives with semantic HTML elements to replicate all required styles.

We've provided a boilerplate below to help you get started. Implement in your global stylesheet, and customize as needed.

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

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

	/*
		In a real world project, copy the following into your global stylesheet.
		Then rename, adjust the styles, and otherwise modify as desired.

		For a quick reference for these theme variables, see the Core API:
		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(--typo-heading--color-light);
		font-family: var(--typo-heading--font-family);
		font-weight: var(--typo-heading--font-weight);
		@variant dark {
			color: var(--typo-heading--color-dark);
		}
	}

	/* Body */
	.preset-typo-body-1,
	.preset-typo-body-2,
	.preset-typo-caption,
	.preset-typo-menu,
	.preset-typo-button {
		color: var(--typo-heading--color-light);
		@variant dark {
			color: var(--typo-heading--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(--typo-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>

```

## Core API

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

# Spacing

Set a dynamic scale for application whitespace.

Skeleton utilizes the power of Tailwind to provide a universal system for customizing spacing throughout your application. While enabling this customization per each theme.

<Preview client:visible>
  <Default client:visible />
</Preview>

## How It Works

In recent versions of Skeleton, this is implemented using the official [Tailwind Spacing](https://tailwindcss.com/blog/tailwindcss-v4#dynamic-utility-values-and-variants) property.

```css
@layer theme {
	:root {
		--spacing: 0.25rem;
	}
}
```

However, this can be customized to each Skeleton theme.

```css
[data-theme='cerberus'] {
	--spacing: 0.25rem;
}
[data-theme='mona'] {
	--spacing: 0.2rem;
}
```

## Supported Properties

The scaling system supports all relevant Tailwind utility classes, including, but not limited to:

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

## Core API

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

# Iconography

Learn about the Skeleton iconography system.

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

## Lucide

```tsx
import {
	HeartIcon,
	UserRoundIcon,
	RocketIcon,
	CrownIcon,
	CompassIcon,
	SparklesIcon,
	FlameIcon,
	LeafIcon,
	MusicIcon,
	GemIcon,
	CameraIcon,
	MoonIcon,
	SkullIcon,
	SunIcon,
	FeatherIcon,
	AnchorIcon,
	KeyIcon,
	BellIcon,
	StarIcon,
	GiftIcon,
	CloudIcon,
	CoffeeIcon,
	ZapIcon,
	GhostIcon,
	SwordsIcon,
} from 'lucide-react';

export default function Iconography() {
	return (
		<div className="grid grid-cols-5 gap-4 place-items-center">
			<HeartIcon className="size-12" />
			<UserRoundIcon className="size-12" />
			<RocketIcon className="size-12" />
			<CrownIcon className="size-12" />
			<CompassIcon className="size-12" />
			<SparklesIcon className="size-12" />
			<FlameIcon className="size-12" />
			<LeafIcon className="size-12" />
			<MusicIcon className="size-12" />
			<GemIcon className="size-12" />
			<CameraIcon className="size-12" />
			<MoonIcon className="size-12" />
			<SkullIcon className="size-12" />
			<SunIcon className="size-12" />
			<FeatherIcon className="size-12" />
			<AnchorIcon className="size-12" />
			<KeyIcon className="size-12" />
			<BellIcon className="size-12" />
			<StarIcon className="size-12" />
			<GiftIcon className="size-12" />
			<CloudIcon className="size-12" />
			<CoffeeIcon className="size-12" />
			<ZapIcon className="size-12" />
			<GhostIcon className="size-12" />
			<SwordsIcon className="size-12" />
		</div>
	);
}

```

While Skeleton is icon-agnostic, we recommend [Lucide](https://lucide.dev/) for its broad framework support and clean aesthetic. All examples found on this site use Lucide, but feel free to substitute with any alternative.

<figure class="linker bg-noise">
  <a href="https://lucide.dev/guide/packages/lucide-react" target="_blank" class="btn preset-filled">
    Install Lucide
  </a>
</figure>

## Sizes

You can size icons and related elements using the following utility classes:

* `size-elem-*`
* `h-elem-*`
* `w-elem-*`

> TIP: Tailwind Components (buttons, badges, chips, field sizes, etc) adjust icon size automatically for any SVG-based icons (such as Lucide). Explicitly setting the size is redundant.

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

<div class="grid grid-cols-[repeat(auto-fit,12rem)] auto-rows-[12rem] place-content-center w-full">
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-xs" />
		<code class="code">xs</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-sm" />
		<code class="code">sm</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-base" />
		<code class="code preset-filled">base</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-lg" />
		<code class="code">lg</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-xl" />
		<code class="code">xl</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-2xl" />
		<code class="code">2xl</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-3xl" />
		<code class="code">3xl</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-4xl" />
		<code class="code">4xl</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-5xl" />
		<code class="code">5xl</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-6xl" />
		<code class="code">6xl</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-7xl" />
		<code class="code">7xl</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-8xl" />
		<code class="code">8xl</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-9xl" />
		<code class="code">9xl</code>
	</div>
</div>

```

Icon sizes are based on Tailwind's built in `--text-*` property, which means you can match icon sizes as follows.

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

As well as extend with custom icon sizes as expected.

```css
:root {
	--text-10xl: --spacing(42); /* 168px */
}
```

```css
@utility icon-10xl {
	width: var(--text-10xl);
	height: var(--text-10xl);
}
```

## Alternatives

Looking for something a bit different? Check out these other popular alternatives.

{/* prettier-ignore */}

{/* prettier-ignore */}

* [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 Utilities

# Corner Shapes

Specifies the shape of a box's corners, within the area specified by its border-radius.

Based on the [corner-shape](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/corner-shape) CSS property. Pair `corner-shape-*` with a `rounded-*` utility on the same element.

```astro
---
const commonClasses = 'size-20 preset-filled rounded-xl text-xs font-medium grid place-items-center';
---

<div class="grid grid-cols-3 gap-4">
	<div class={`${commonClasses} corner-shape-round`}>round</div>
	<div class={`${commonClasses} corner-shape-bevel`}>bevel</div>
	<div class={`${commonClasses} corner-shape-notch`}>notch</div>
	<div class={`${commonClasses} corner-shape-scoop`}>scoop</div>
	<div class={`${commonClasses} corner-shape-squircle`}>squircle</div>
	<div class={`${commonClasses} corner-shape-straight`}>straight</div>
</div>

```

\| Class                   | Description                                 |
\| ----------------------- | ------------------------------------------- |
\| `corner-shape-round`    | Standard circular curve (default)           |
\| `corner-shape-bevel`    | Straight diagonal cut across the corner     |
\| `corner-shape-notch`    | Inverted bevel that carves into the corner  |
\| `corner-shape-scoop`    | Concave curve that scoops inward            |
\| `corner-shape-squircle` | Superellipse with a softer curve than round |
\| `corner-shape-straight` | Sharp 90° corner                            |
\| `corner-shape-none`     | Removes any shape property                  |

## Browser Support Warning

Currently available in a limited set of browsers. Follow progressive enhancement best practices when using it.

\| Browser            | Support              |
\| ------------------ | -------------------- |
\| Chrome             | 139+                 |
\| Edge               | 139+                 |
\| Firefox            | ⚠️ Not yet supported |
\| Safari             | ⚠️ Not yet supported |
\| Chrome for Android | 147+                 |
\| Safari on iOS      | ⚠️ Not yet supported |

## Individual Sides

Target each side and the adjacent corners, including: top, left, bottom, right.

```astro
---
const commonClasses = 'size-20 preset-filled text-xs font-medium grid place-items-center';
---

<div class="grid grid-cols-2 gap-4">
	<div class={`${commonClasses} rounded-t-xl corner-shape-t-bevel`}>-t-</div>
	<div class={`${commonClasses} rounded-r-xl corner-shape-r-bevel`}>-r-</div>
	<div class={`${commonClasses} rounded-b-xl corner-shape-b-bevel`}>-b-</div>
	<div class={`${commonClasses} rounded-l-xl corner-shape-l-bevel`}>-l-</div>
</div>

```

\| Class              | Description |
\| ------------------ | ----------- |
\| `corner-shape-t-*` | Top side    |
\| `corner-shape-r-*` | Right side  |
\| `corner-shape-b-*` | Bottom side |
\| `corner-shape-l-*` | Left side   |

## Individual Corners

Target a particular corner of an element.

```astro
---
const commonClasses = 'size-20 preset-filled text-xs font-medium grid place-items-center';
---

<div class="grid grid-cols-2 gap-4">
	<div class={`${commonClasses} rounded-tl-xl corner-shape-tl-bevel`}>-tl-</div>
	<div class={`${commonClasses} rounded-tr-xl corner-shape-tr-bevel`}>-tr-</div>
	<div class={`${commonClasses} rounded-br-xl corner-shape-br-bevel`}>-br-</div>
	<div class={`${commonClasses} rounded-bl-xl corner-shape-bl-bevel`}>-bl-</div>
</div>

```

\| Class               | Description         |
\| ------------------- | ------------------- |
\| `corner-shape-tl-*` | Top-left corner     |
\| `corner-shape-tr-*` | Top-right corner    |
\| `corner-shape-br-*` | Bottom-right corner |
\| `corner-shape-bl-*` | Bottom-left corner  |

## Logical Properties

Target sides and corners that flow with the document's writing direction. Sets automatically basedon LTR/RTL mode.

```astro
---
const commonClasses = 'size-20 preset-filled text-xs font-medium grid place-items-center';
---

<div class="grid grid-cols-2 gap-4">
	<div class={`${commonClasses} rounded-s-xl corner-shape-s-bevel`}>-s-</div>
	<div class={`${commonClasses} rounded-e-xl corner-shape-e-bevel`}>-e-</div>
	<div class={`${commonClasses} rounded-ss-xl corner-shape-ss-bevel`}>-ss-</div>
	<div class={`${commonClasses} rounded-se-xl corner-shape-se-bevel`}>-se-</div>
	<div class={`${commonClasses} rounded-ee-xl corner-shape-ee-bevel`}>-ee-</div>
	<div class={`${commonClasses} rounded-es-xl corner-shape-es-bevel`}>-es-</div>
</div>

```

\| Class               | Description        |
\| ------------------- | ------------------ |
\| `corner-shape-s-*`  | Inline-start side  |
\| `corner-shape-e-*`  | Inline-end side    |
\| `corner-shape-ss-*` | Start-start corner |
\| `corner-shape-se-*` | Start-end corner   |
\| `corner-shape-ee-*` | End-end corner     |
\| `corner-shape-es-*` | End-start corner   |

## Theme Variables

Canned variable default values defined via theme properties.

```astro
<div class="flex flex-col items-center gap-4">
	<!-- Base -->
	<button type="button" class="btn preset-filled corner-shape-base">base</button>
	<!-- Container -->
	<div class="card preset-filled corner-shape-container p-4">container</div>
</div>

```

\| Class                    | Theme Property                  | Role                               |
\| ------------------------ | ------------------------------- | ---------------------------------- |
\| `corner-shape-base`      | `var(--corner-shape-base)`      | Target small elements like buttons |
\| `corner-shape-container` | `var(--corner-shape-container)` | Target large elements like cards   |

## Arbitrary Syntax

Use the `corner-shape-[<value>]` syntax to set the corner shape based on a completely custom value.

```html
<div class="corner-shape-[squircle] rounded-2xl ...">
	<!-- ... -->
</div>
```

For CSS variables, you can also use the `corner-shape-(<custom-property>)` syntax.

```html
<div class="corner-shape-(--my-corner-shape) rounded-2xl ...">
	<!-- ... -->
</div>
```

## Global Theming

To apply a corner shape across a family of elements, target the class in your global stylesheet and pair it with a matching radius scale. This pattern is valid for any class or element has a `border-radius` applied.

```css
.btn,
.btn-icon,
.chip,
.chip-icon,
.badge,
.badge-icon {
	corner-shape: var(--corner-shape-base);
}
```

```css
.card {
	corner-shape: var(--corner-shape-container);
}
```

# Masks

Clip elements to a variety of decorative shapes using CSS mask-image.

```astro
<img class="mask mask-circle w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />
<img class="mask mask-squircle w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />
<img class="mask mask-triangle-up w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />
<img class="mask mask-triangle-down w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />
<img class="mask mask-triangle-right w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />
<img class="mask mask-triangle-left w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />
<img class="mask mask-diamond w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />
<img class="mask mask-pentagon w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />
<img class="mask mask-hexagon w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />
<img class="mask mask-cube w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />
<img class="mask mask-octagon w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />
<img class="mask mask-decagon w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />
<img class="mask mask-star w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />
<img class="mask mask-heart w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />
<img class="mask mask-cross w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />

```

## Shapes

Apply classes `mask mask-{shape}` with any of the shapes defined below.

### Circle

```astro
<img class="mask mask-circle w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />

```

### Squircle

```astro
<img class="mask mask-squircle w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />

```

### Triangle Up

```astro
<img class="mask mask-triangle-up w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />

```

### Triangle Down

```astro
<img class="mask mask-triangle-down w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />

```

### Triangle Right

```astro
<img class="mask mask-triangle-right w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />

```

### Triangle Left

```astro
<img class="mask mask-triangle-left w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />

```

### Diamond

```astro
<img class="mask mask-diamond w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />

```

### Pentagon

```astro
<img class="mask mask-pentagon w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />

```

### Hexagon

```astro
<img class="mask mask-hexagon w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />

```

### Cube

```astro
<img class="mask mask-cube w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />

```

### Octagon

```astro
<img class="mask mask-octagon w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />

```

### Decagon

```astro
<img class="mask mask-decagon w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />

```

### Star

```astro
<img class="mask mask-star w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />

```

### Heart

```astro
<img class="mask mask-heart w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />

```

### Cross

```astro
<img class="mask mask-cross w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />

```

## Custom Masks

Define your own custom shape. Any valid [CSS mask source](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mask) will work.

```css
@utility mask-custom {
	mask-image: url('/path/to/your-shape.svg');
}
```

```html
<img class="mask mask-custom w-32" src="https://i.pravatar.cc/150?img=48" alt="Avatar" />
```

# Presets

Canned styles for your interface elements.

Presets are pre-defined utility classes that allow you to quickly and easily style buttons, badges, cards, and more. They are implemented using a combination of Skeleton and Tailwind primitives. A number of presets are available out of the box, with guidelines provided for crafting your own.

## Skeleton Presets

The following Presets are available to you when using Skeleton. Each comes with a shorthand neutral option.

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

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

```

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.

### Filled

Has a wide variety of use cases and automatically implements [color pairings](/docs/design/colors#color-pairings) and [contrast colors](/docs/design/colors#contrast-colors) automatically.

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

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

	<hr class="hr" />

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

```

### Tonal

Ideal for alerts and axillary buttons and actions.

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

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

	<hr class="hr" />

	{/* Color Pairings */}
	<div class="grid grid-cols1 md:grid-cols-3 2xl:grid-cols-7 gap-2">
		<div class="card p-2 text-center preset-tonal-primary">primary</div>
		<div class="card p-2 text-center preset-tonal-secondary">secondary</div>
		<div class="card p-2 text-center preset-tonal-tertiary">tertiary</div>
		<div class="card p-2 text-center preset-tonal-success">success</div>
		<div class="card p-2 text-center preset-tonal-warning">warning</div>
		<div class="card p-2 text-center preset-tonal-error">error</div>
		<div class="card p-2 text-center preset-tonal-surface">surface</div>
	</div>
</div>

```

### Outlined

Ideal when for minimal interfaces, such as a surrounding card.

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

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

	<hr class="hr" />

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

```

***

## User Generated

In a nutshell, Presets are a resuable combination of styles that mix Skeleton and Tailwind primitives. This means you can create as many combinations as you wish to help control the aesthetic of your application. All custom presets should be implemented in your application's global stylesheet. See our reference examples below.

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

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

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

```

1. **Glass** - a custom preset using background transparency and backdrop blur.
2. **Elevated** - mixes a filled preset with a shadow.
3. **Ghost** - has no style by default, but shows a tonal preset on hover.
4. **Gradient** - a custom preset generated using Tailwind gradient primitives.

### Examples

#### Input Presets

Use Presets to generate your own custom validation classes for inputs.

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

Utilize [Tailwind Gradient](https://tailwindcss.com/docs/gradient-color-stops) utility classes to create fancy buttons or cards.

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

Fine tune your Presets with special effects, such as the [Tailwind Backdrop Blur](https://tailwindcss.com/docs/backdrop-filter-blur) for a glass-like effect.

```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-brand`}>Brand</div>
		<hr class="hr" />
		<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-brand {
		background: color-mix(in oklab, light-dark(var(--color-brand-light), var(--color-brand-dark)) 30%, transparent);
		box-shadow: 0 0px 30px color-mix(in oklab, light-dark(var(--color-brand-light), var(--color-brand-dark)) 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>

```

### Guidelines

* When creating custom Presets, you're only limited by your imagination.
* Use any combination of Skeleton or Tailwind primitives to generate a Preset.
* Apply Presets to any relevant element, including: buttons, badges, chips, cards, inputs, and more.
* Use a set naming convention, such as `preset-{foo}-{bar}` to keep things standardized.
* Consider implementing Presets using Tailwind's [@utility directive](https://tailwindcss.com/docs/functions-and-directives#utility-directive) in your stylesheet.
* Abstrast Presets to a stylesheet or NPM package for shared used between projects.
* Use Presets to apply styling for your components via the `class` attribute.

## Tailwind Components

# Badges

Show notifications, counts, or status information on navigation and icons

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

<div class="flex items-center gap-2">
	<!-- A standard badge -->
	<span class="badge preset-filled-brand">Badge</span>

	<!-- A badge + icon -->
	<span class="badge preset-filled-brand">
		<HeartIcon className="fill-current stroke-0" size={10} />
		<span>Badge</span>
	</span>

	<!-- An icon badge -->
	<span class="badge-icon preset-filled-brand">
		<HeartIcon className="fill-current stroke-0" size={10} />
	</span>

	<!-- A badge dot -->
	<span class="badge-dot preset-filled-brand"> Badge </span>
</div>

```

## Inline

Display badges inline within buttons or list items.

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

<div class="flex flex-col items-center gap-4">
	<btn class="btn btn-xs preset-tonal-brand">
		<HeartIcon />
		<span>Favorites</span>
		<span class="badge preset-filled-brand">64</span>
	</btn>
	<btn class="btn btn-sm preset-tonal-brand">
		<HeartIcon />
		<span>Favorites</span>
		<span class="badge preset-filled-brand">64</span>
	</btn>
	<btn class="btn btn-base preset-tonal-brand">
		<HeartIcon />
		<span>Favorites</span>
		<span class="badge preset-filled-brand">64</span>
	</btn>
	<btn class="btn btn-lg preset-tonal-brand">
		<HeartIcon />
		<span>Favorites</span>
		<span class="badge preset-filled-brand">64</span>
	</btn>
	<btn class="btn btn-xl preset-tonal-brand">
		<HeartIcon />
		<span>Favorites</span>
		<span class="badge preset-filled-brand">64</span>
	</btn>
</div>

```

## Overlapped

Create overlapping numeric or icon badge display.

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

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="flex items-center gap-4">
	<!-- A badge dot -->
	<div class="relative inline-block">
		<span class="badge-dot preset-filled-success-500 absolute right-1.5 top-1.5 z-10">Badge</span>
		<img class="size-20 overflow-hidden rounded-full grayscale" src={imgSrc} alt="Avatar" />
	</div>

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

	<!-- An icon badge -->
	<div class="relative inline-block">
		<span class="badge-icon preset-filled-error-500 absolute right-0 top-0 z-10">
			<HeartIcon className="fill-current stroke-0" />
		</span>
		<img class="size-20 overflow-hidden rounded-full grayscale" src={imgSrc} alt="Avatar" />
	</div>
</div>

```

## Presets

Provides full support of [Presets](/docs/\[framework]/tailwind-utilities/presets).

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

<div class="space-y-4">
	<div class="flex gap-4">
		<span class="badge-icon preset-filled"><HeartIcon className="fill-current stroke-0" /></span>
		<span class="badge preset-filled">Badge</span>
		<span class="badge preset-tonal">Badge</span>
		<span class="badge preset-outlined">Badge</span>
	</div>
	<div class="flex gap-4">
		<span class="badge-icon preset-filled-brand"><HeartIcon className="fill-current stroke-0" /></span>
		<span class="badge preset-filled-brand">Badge</span>
		<span class="badge preset-tonal-brand">Badge</span>
		<span class="badge preset-outlined-brand">Badge</span>
	</div>
	<hr class="hr" />
	<div class="flex gap-4">
		<span class="badge-icon preset-filled-primary-500"><HeartIcon className="fill-current stroke-0" /></span>
		<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-icon preset-filled-secondary-500"><HeartIcon className="fill-current stroke-0" /></span>
		<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-icon preset-filled-tertiary-500"><HeartIcon className="fill-current stroke-0" /></span>
		<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-icon preset-filled-success-500"><HeartIcon className="fill-current stroke-0" /></span>
		<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-icon preset-filled-warning-500"><HeartIcon className="fill-current stroke-0" /></span>
		<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-icon preset-filled-error-500"><HeartIcon className="fill-current stroke-0" /></span>
		<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-icon preset-filled-surface-500"><HeartIcon className="fill-current stroke-0" /></span>
		<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>

```

# Buttons

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

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

<div class="flex items-center gap-4">
	<!-- 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>
		<ArrowUpRightIcon size={16} />
	</button>
	<!-- An icon button -->
	<button type="button" class="btn-icon preset-filled" title="Go" aria-label="Go">
		<ArrowUpRightIcon size={16} />
	</button>
</div>

```

## Sizes

Use `btn-{size}` paired with: `xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl`

```astro
---
import { ArrowUpRightIcon, PlusIcon } from 'lucide-react';
---

<div class="flex flex-col items-center gap-4">
	<div class="flex items-center gap-4">
		<button type="button" class="btn btn-xs preset-filled">Button</button>
		<button type="button" class="btn-icon btn-icon-xs preset-filled" title="Go" aria-label="Go">
			<ArrowUpRightIcon />
		</button>
	</div>
	<div class="flex items-center gap-4">
		<button type="button" class="btn btn-sm preset-filled">Button</button>
		<button type="button" class="btn-icon btn-icon-sm preset-filled" title="Go" aria-label="Go">
			<ArrowUpRightIcon />
		</button>
	</div>
	<div class="flex items-center gap-4">
		<button type="button" class="btn btn-base preset-filled">Button</button>
		<button type="button" class="btn-icon btn-icon-base preset-filled" title="Go" aria-label="Go">
			<ArrowUpRightIcon />
		</button>
	</div>
	<div class="flex items-center gap-4">
		<button type="button" class="btn btn-lg preset-filled">Button</button>
		<button type="button" class="btn-icon btn-icon-lg preset-filled" title="Go" aria-label="Go">
			<ArrowUpRightIcon />
		</button>
	</div>
	<div class="flex items-center gap-4">
		<button type="button" class="btn btn-xl preset-filled">Button</button>
		<button type="button" class="btn-icon btn-icon-xl preset-filled" title="Go" aria-label="Go">
			<ArrowUpRightIcon />
		</button>
	</div>

	<!-- NOTE: 2x|3xl|4xl|5xl|6xl|7xl|8xl|9xl tructated for space -->

	<hr class="hr" />

	<!-- Floating Action Buttons -->
	<div class="flex items-center gap-4">
		<!-- Shaped -->
		<button type="button" class="btn-icon btn-icon-2xl preset-filled" title="Go" aria-label="Go">
			<PlusIcon />
		</button>
		<!-- Circular -->
		<button type="button" class="btn-icon btn-icon-2xl preset-filled rounded-full" title="Go" aria-label="Go">
			<PlusIcon />
		</button>
	</div>
</div>

```

## Disabled

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

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

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

```

## Presets

Provides full support of [Presets](/docs/\[framework]/tailwind-utilities/presets).

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

<div class="space-y-4">
	<div class="flex items-center gap-4">
		<button type="button" class="btn-icon preset-filled" title="Go" aria-label="Go"><ArrowUpRightIcon size={16} /></button>
		<button type="button" class="btn preset-filled">Button</button>
		<button type="button" class="btn preset-tonal">Button</button>
		<button type="button" class="btn preset-outlined">Button</button>
	</div>
	<div class="flex items-center gap-4">
		<button type="button" class="btn-icon preset-filled-brand" title="Go" aria-label="Go"><ArrowUpRightIcon size={16} /></button>
		<button type="button" class="btn preset-filled-brand">Button</button>
		<button type="button" class="btn preset-tonal-brand">Button</button>
		<button type="button" class="btn preset-outlined-brand">Button</button>
	</div>
	<hr class="hr" />
	<div class="flex items-center gap-4">
		<button type="button" class="btn-icon preset-filled-primary-500" title="Go" aria-label="Go"><ArrowUpRightIcon size={16} /></button>
		<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 items-center gap-4">
		<button type="button" class="btn-icon preset-filled-secondary-500" title="Go" aria-label="Go"><ArrowUpRightIcon size={16} /></button>
		<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 items-center gap-4">
		<button type="button" class="btn-icon preset-filled-tertiary-500" title="Go" aria-label="Go"><ArrowUpRightIcon size={16} /></button>
		<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 items-center gap-4">
		<button type="button" class="btn-icon preset-filled-success-500" title="Go" aria-label="Go"><ArrowUpRightIcon size={16} /></button>
		<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 items-center gap-4">
		<button type="button" class="btn-icon preset-filled-warning-500" title="Go" aria-label="Go"><ArrowUpRightIcon size={16} /></button>
		<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 items-center gap-4">
		<button type="button" class="btn-icon preset-filled-error-500" title="Go" aria-label="Go"><ArrowUpRightIcon size={16} /></button>
		<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 items-center gap-4">
		<button type="button" class="btn-icon preset-filled-surface-500" title="Go" aria-label="Go"><ArrowUpRightIcon size={16} /></button>
		<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>

```

## 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 md:flex-row">
			{months.map((month, i) => (
				<button
					key={i}
					type="button"
					className={`btn capitalize ${month === active ? 'preset-filled' : 'preset-tonal'}`}
					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>

```

## Hover

Hover styles are applied when the card is an `anchor` or `button` element.

```astro
---
const unsplashId = 'photo-1598305758677-7548ff30583b';
const imgSrc = `https://images.unsplash.com/${unsplashId}?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 divide-y divide-surface-200-800 max-w-md 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]/tailwind-utilities/presets).

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

		<div class="card p-4 preset-filled-brand">Card</div>
		<div class="card p-4 preset-tonal-brand">Card</div>
		<div class="card p-4 preset-outlined-brand">Card</div>
	</div>
	<hr class="hr" />
	<div class="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>
</div>

```

# Chips

Use chips to enter information, make selections, filter content, or trigger actions.

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

<div class="flex items-center gap-2">
	<!-- A standard chip -->
	<button type="button" class="chip preset-outlined-surface-400-600 hover:preset-tonal">Chip</button>

	<!-- A chip + icon -->
	<button type="button" class="chip preset-outlined-surface-400-600 hover:preset-tonal">
		<span>Chip</span>
		<CheckIcon size={14} />
	</button>

	<!-- A simple icon chip -->
	<button type="button" class="chip-icon preset-outlined-surface-400-600 hover:preset-tonal">
		<CheckIcon size={14} />
	</button>
</div>

```

## Assist Chips

Represent a group of related contextual choices.

```tsx
import { SunIcon, AlarmClockIcon, AppWindowIcon } from 'lucide-react';

export default function Assist() {
	return (
		<div className="card preset-filled-surface-100-900 p-4 space-y-4 w-full max-w-md overflow-hidden">
			<header>
				<h2 className="h6">Home Automation</h2>
			</header>
			<article className="space-y-4">
				<p className="opacity-60">Control your smart home with a single tap. Choose one of the quick actions below to get started.</p>
			</article>
			<hr className="hr" />
			<footer className="flex items-center justify-start gap-2 overflow-x-auto [scrollbar-width:none]">
				<button type="button" className="chip preset-outlined-surface-400-600">
					<SunIcon size={14} />
					<span>Turn on lights</span>
				</button>
				<button type="button" className="chip preset-outlined-surface-400-600">
					<AlarmClockIcon size={14} />
					<span>Set alarm</span>
				</button>
				<button type="button" className="chip preset-outlined-surface-400-600">
					<AppWindowIcon size={14} />
					<span>Close blinds</span>
				</button>
			</footer>
		</div>
	);
}

```

## Filter Chips

Represent a canned selection of options to choose from.

```tsx
import { useState } from 'react';
import { CheckIcon } from 'lucide-react';

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

	return (
		<div className="card preset-filled-surface-100-900 w-full max-w-md p-4">
			<div className="flex justify-center items-center gap-2">
				<span className="text-sm opacity-60">Favorite Color</span>
				{/* --- */}
				{colors.map((c) => (
					<button
						key={c}
						className={`chip capitalize preset-outlined-surface-400-600 ${color === c ? 'preset-tonal-primary' : ''}`}
						onClick={() => setColor(c)}
					>
						{color === c && <CheckIcon size={14} />}
						<span>{c}</span>
					</button>
				))}
				{/* --- */}
			</div>
		</div>
	);
}

```

## Input Chips

Represent user input values such as contacts or search terms.

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

export default function Input() {
	return (
		<div className="card preset-filled-surface-100-900 w-full max-w-md p-4">
			<div className="flex justify-center items-center gap-2">
				<span className="text-sm opacity-60">To</span>
				{/* --- */}
				<button className="chip preset-outlined-surface-400-600">
					<span>jane@email.com</span>
					<XIcon size={14} />
				</button>
				<button className="chip preset-outlined-surface-400-600">
					<span>dave@email.com</span>
					<XIcon size={14} />
				</button>
				{/* --- */}
			</div>
		</div>
	);
}

```

## Suggestion Chips

Represent a canned set of suggested options for a user to choose from.

```tsx
export default function Suggestion() {
	return (
		<div className="card preset-filled-surface-100-900 w-full max-w-md p-4">
			<div className="flex justify-center items-center gap-2">
				<span className="text-sm opacity-60">Rating</span>
				{/* --- */}
				<button className="chip preset-outlined-surface-400-600">
					<span>Bad</span>
				</button>
				<button className="chip preset-outlined-surface-400-600">
					<span>Good</span>
				</button>
				<button className="chip preset-outlined-surface-400-600">
					<span>Awesome</span>
				</button>
				{/* --- */}
			</div>
		</div>
	);
}

```

## Disabled

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

```astro
<button type="button" class="chip preset-outlined-surface-400-600 hover:preset-tonal" disabled>Chip</button>

```

## Presets

Provides full support of [Presets](/docs/\[framework]/tailwind-utilities/presets).

```astro
<div class="space-y-4">
	<div class="flex gap-4">
		<button type="button" class="chip preset-filled">Chip</button>
		<button type="button" class="chip preset-tonal">Chip</button>
		<button type="button" class="chip preset-outlined">Chip</button>
	</div>
	<div class="flex gap-4">
		<button type="button" class="chip preset-filled-brand">Chip</button>
		<button type="button" class="chip preset-tonal-brand">Chip</button>
		<button type="button" class="chip preset-outlined-brand">Chip</button>
	</div>
	<hr class="hr" />
	<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>

```

# Dialogs

Display modal popups using the native HTML dialog element.

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

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

	function showModal() {
		dialogRef.current?.showModal();
	}

	function closeModal() {
		dialogRef.current?.close();
	}

	return (
		<>
			{/* Dialog */}
			<dialog ref={dialogRef} className="dialog preset-filled-surface-100-900 animate-dialog">
				<header>
					<h2 className="h3">Hello world!</h2>
				</header>
				<article>
					<p>This is an example modal created using the native Dialog element.</p>
				</article>
				<footer className="flex justify-end">
					<form method="dialog">
						<button type="button" className="btn preset-tonal" onClick={closeModal}>
							Close
						</button>
					</form>
				</footer>
			</dialog>

			{/* Trigger */}
			<button className="btn preset-filled" onClick={showModal}>
				Open Dialog
			</button>
		</>
	);
}

```

## Alert Dialog

Set [`role="alertdialog"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alertdialog_role) for dialogs that interrupt the user with a message requiring a response.

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

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

	function showModal() {
		dialogRef.current?.showModal();
	}

	function closeModal() {
		dialogRef.current?.close();
	}

	return (
		<>
			{/* Dialog */}
			<dialog
				ref={dialogRef}
				role="alertdialog"
				aria-labelledby="alertdialog-title"
				aria-describedby="alertdialog-description"
				className="dialog animate-dialog preset-filled-error-500 [--dialog-backdrop:color-mix(in_oklab,var(--color-error-50-950)_75%,transparent)]"
			>
				<header>
					<h2 id="alertdialog-title" className="h3">
						Discard changes?
					</h2>
				</header>
				<article>
					<p id="alertdialog-description">You have unsaved changes that will be lost. This action cannot be undone.</p>
				</article>
				<footer className="flex justify-end gap-2">
					<button type="button" className="btn preset-tonal" onClick={closeModal}>
						Cancel
					</button>
					<button type="button" className="btn preset-filled" onClick={closeModal}>
						Discard
					</button>
				</footer>
			</dialog>

			{/* Trigger */}
			<button className="btn preset-filled" onClick={showModal}>
				Open Dialog
			</button>
		</>
	);
}

```

## Non-Modal

Call [`show()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/show) instead of `showModal()` to open a dialog without a backdrop or top-layer placement. Similar to a tooltip.

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

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

	function toggle() {
		const dialog = dialogRef.current;
		if (!dialog) return;
		if (dialog.open) {
			dialog.close();
		} else {
			dialog.show();
		}
	}

	return (
		<div className="relative">
			{/* Dialog */}
			<dialog
				ref={dialogRef}
				closedby="any"
				className="dialog preset-filled animate-dialog [--dialog-top:auto] [--dialog-left:50%] [--dialog-translate:-50%_0] bottom-full mb-2"
			>
				<p>This acts as a tooltip.</p>
			</dialog>

			{/* Trigger */}
			<button className="btn preset-filled" onClick={toggle}>
				Toggle Dialog
			</button>
		</div>
	);
}

```

## Fullscreen

Add `dialog-fullscreen` to expand the dialog to the full viewport.

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

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

	useEffect(() => {
		const dialog = dialogRef.current;
		if (!dialog) return;
		function onClose() {
			document.body.style.overflow = '';
		}
		dialog.addEventListener('close', onClose);
		return () => dialog.removeEventListener('close', onClose);
	}, []);

	function showModal() {
		document.body.style.overflow = 'hidden';
		dialogRef.current?.showModal();
	}

	function closeModal() {
		dialogRef.current?.close();
	}

	return (
		<>
			{/* Dialog */}
			<dialog ref={dialogRef} className="dialog dialog-fullscreen preset-filled-surface-100-900 animate-dialog">
				<header>
					<h2 className="h3">Hello world!</h2>
				</header>
				<article>
					<p>This dialog expands to fill the entire viewport and locks page scrolling while open.</p>
				</article>
				<footer className="flex justify-end">
					<form method="dialog">
						<button type="button" className="btn preset-tonal" onClick={closeModal}>
							Close
						</button>
					</form>
				</footer>
			</dialog>

			{/* Trigger */}
			<button className="btn preset-filled" onClick={showModal}>
				Open Dialog
			</button>
		</>
	);
}

```

## Animation

Add `animate-dialog` to opt into a fade transition for the dialog and its backdrop.

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

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

	function showModal() {
		dialogRef.current?.showModal();
	}

	function closeModal() {
		dialogRef.current?.close();
	}

	return (
		<>
			{/* Dialog */}
			<dialog ref={dialogRef} className="dialog animate-dialog preset-filled-surface-100-900">
				<header>
					<h2 className="h3">Hello world!</h2>
				</header>
				<article>
					<p>Opening and closing this dialog fades the surface and backdrop.</p>
				</article>
				<footer className="flex justify-end">
					<form method="dialog">
						<button type="button" className="btn preset-tonal" onClick={closeModal}>
							Close
						</button>
					</form>
				</footer>
			</dialog>

			{/* Trigger */}
			<button className="btn preset-filled" onClick={showModal}>
				Open Dialog
			</button>
		</>
	);
}

```

## Interaction

### Light Dismiss

Set [`closedby="any"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby) to allow the user to close the dialog by clicking the backdrop or pressing Esc.

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

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

	function showModal() {
		dialogRef.current?.showModal();
	}

	function closeModal() {
		dialogRef.current?.close();
	}

	return (
		<>
			{/* Dialog */}
			<dialog ref={dialogRef} closedby="any" className="dialog preset-filled-surface-100-900 animate-dialog">
				<header>
					<h2 className="h3">Click outside to close</h2>
				</header>
				<article>
					<p>This dialog supports light dismiss. Click the backdrop or press Esc to close.</p>
				</article>
				<footer className="flex justify-end">
					<form method="dialog">
						<button type="button" className="btn preset-tonal" onClick={closeModal}>
							Close
						</button>
					</form>
				</footer>
			</dialog>

			{/* Trigger */}
			<button className="btn preset-filled" onClick={showModal}>
				Open Dialog
			</button>
		</>
	);
}

```

<details class="disclosure">
  <summary>⚠️ View Browser Support</summary>

  <div class="disclosure-content">
    \| Browser             | Minimum Version | Released      |
    \| ------------------- | --------------- | ------------- |
    \| Safari              | 18.2            | December 2024 |
    \| Safari on iOS       | 18.2            | December 2024 |
    \| Chrome              | 134             | March 2025    |
    \| Edge                | 134             | March 2025    |
    \| Chrome for Android  | 134             | March 2025    |
    \| Firefox             | 136             | March 2025    |
    \| Firefox for Android | 136             | March 2025    |
  </div>
</details>

### Result Handling

Wrap controls in a [`<form method="dialog">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#usage_notes), then read each submit button's `value` from `dialog.returnValue` on [`close`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event).

```tsx
import { useEffect, useRef, useState } from 'react';

export default function Result() {
	const dialogRef = useRef<HTMLDialogElement>(null);
	const [result, setResult] = useState<string>('—');

	useEffect(() => {
		const dialog = dialogRef.current;
		if (!dialog) return;
		function onClose() {
			setResult(dialog!.returnValue || '(dismissed)');
		}
		dialog.addEventListener('close', onClose);
		return () => dialog.removeEventListener('close', onClose);
	}, []);

	function showModal() {
		dialogRef.current?.showModal();
	}

	return (
		<>
			{/* Dialog */}
			<dialog ref={dialogRef} className="dialog preset-filled-surface-100-900 animate-dialog">
				<header>
					<h2 className="h3">Confirm action</h2>
				</header>
				<article>
					<p>Submitting either button closes the dialog and exposes its value via the dialog's returnValue.</p>
				</article>
				<footer className="flex justify-end gap-2">
					<form method="dialog" className="flex gap-2">
						<button type="submit" value="cancel" className="btn preset-tonal">
							Cancel
						</button>
						<button type="submit" value="confirm" className="btn preset-filled">
							Confirm
						</button>
					</form>
				</footer>
			</dialog>

			{/* Trigger */}
			<div className="flex flex-col items-center gap-3">
				<button className="btn preset-filled" onClick={showModal}>
					Open Dialog
				</button>
				<p className="text-sm opacity-75">
					Last result: <code>{result}</code>
				</p>
			</div>
		</>
	);
}

```

### Invoker Commands

Use the [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#modal_dialogs_using_invoker_commands) to control state with pure HTML.

```astro
<!-- Dialog -->
<dialog id="invoker-dialog" class="dialog preset-filled-surface-100-900 animate-dialog">
	<header>
		<h2 class="h3">Hello world!</h2>
	</header>
	<article>
		<p>This modal is controlled using HTML invoker commands &mdash; no JavaScript required.</p>
	</article>
	<footer class="flex justify-end">
		<button type="button" class="btn preset-tonal" command="close" commandfor="invoker-dialog">Close</button>
	</footer>
</dialog>

<!-- Trigger -->
<button type="button" class="btn preset-filled" command="show-modal" commandfor="invoker-dialog">Open Dialog</button>

```

<details class="disclosure">
  <summary>⚠️ View Browser Support</summary>

  <div class="disclosure-content">
    \| Browser             | Minimum Version | Released      |
    \| ------------------- | --------------- | ------------- |
    \| Chrome              | 135             | April 2025    |
    \| Edge                | 135             | April 2025    |
    \| Chrome for Android  | 135             | April 2025    |
    \| Firefox             | 144             | October 2025  |
    \| Firefox for Android | 144             | October 2025  |
    \| Safari              | 26.2            | December 2025 |
    \| Safari on iOS       | 26.2            | December 2025 |
  </div>
</details>

***

## Alternatives

Explore Skeleton's framework components for more advanced features and control:

* [Dialog](/docs/\[framework]/framework-components/dialog)
* [Popover](/docs/\[framework]/framework-components/popover)
* [Portal](/docs/\[framework]/framework-components/portal)

# Disclosures

Toggle the visibility of collapsible content using the native HTML details element.

```astro
<details class="disclosure">
	<summary>How long does shipping take?</summary>
	<div class="disclosure-content">
		<p>
			Standard orders ship within 1-2 business days and arrive in 3-5 business days. Expedited shipping is available at checkout for
			next-day delivery in most regions.
		</p>
	</div>
</details>

```

## Group

Wrap with `disclosure-group` and share a [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details#name) attribute so only one item stays open at a time.

```astro
<div class="disclosure-group">
	<details class="disclosure" name="faq">
		<summary>How long does shipping take?</summary>
		<div class="disclosure-content">
			<p>
				Standard orders ship within 1-2 business days and arrive in 3-5 business days. Expedited shipping is available at checkout for
				next-day delivery in most regions.
			</p>
		</div>
	</details>
	<hr class="hr" />
	<details class="disclosure" name="faq">
		<summary>What is your return policy?</summary>
		<div class="disclosure-content">
			<p>
				Returns are accepted within 30 days of delivery. Items must be unused and in their original packaging. We provide a prepaid return
				label for orders over $50.
			</p>
		</div>
	</details>
	<hr class="hr" />
	<details class="disclosure" name="faq">
		<summary><span>Do you ship internationally?</span></summary>
		<div class="disclosure-content">
			<p>
				Yes, we ship to over 60 countries. International orders typically arrive within 7-14 business days, and any applicable customs fees
				are calculated at checkout.
			</p>
		</div>
	</details>
</div>

```

## Open

Add the `open` attribute to render a disclosure expanded by default.

```astro
<details class="disclosure" open>
	<summary>How long does shipping take?</summary>
	<div class="disclosure-content">
		<p>
			Standard orders ship within 1-2 business days and arrive in 3-5 business days. Expedited shipping is available at checkout for
			next-day delivery in most regions.
		</p>
	</div>
</details>

```

## Animation

The slide animation is a progressive enhancement via [::details-content](https://developer.mozilla.org/en-US/docs/Web/CSS/::details-content) and [interpolate-size: allow-keywords](https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size). For unsupported browsers this will fall back to the native instant toggle.

# Dividers

Horizontal and vertical rule styling.

```astro
<div class="card preset-filled-surface-100-900 w-full max-w-md p-4 space-y-4 text-center">
	<p class="opacity-60">Above the divider.</p>
	<!-- - -->
	<hr class="hr" />
	<!-- - -->
	<p class="opacity-60">Below the divider.</p>
</div>

```

## Vertical

Apply `vr` to a `<span>` for a vertical variant.

```astro
<div class="card preset-filled-surface-100-900 grid grid-cols-[1fr_auto_1fr] gap-4 w-full max-w-md p-4 text-center">
	<p class="opacity-60">Left Side</p>
	<!-- - -->
	<span class="vr"></span>
	<!-- - -->
	<p class="opacity-60">Right Side</p>
</div>

```

## Size

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

* Use `border-t` (top) for horizontal
* Use `border-l` (left) for vertical

```astro
<div class="w-full grid grid-cols-1 gap-4">
	<p>Default</p>
	<hr class="hr" />

	<p>border-t-2</p>
	<hr class="hr border-t-2" />

	<p>border-t-4</p>
	<hr class="hr border-t-4" />

	<p>border-t-8</p>
	<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 grid grid-cols-1 gap-4">
	<p>border-solid</p>
	<hr class="hr border-solid" />

	<p>border-dashed</p>
	<hr class="hr border-dashed" />

	<p>border-dotted</p>
	<hr class="hr border-dotted" />

	<p>border-double</p>
	<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 grid grid-cols-1 gap-4">
	<p>border-brand</p>
	<hr class="hr border-brand" />

	<p>border-primary-500</p>
	<hr class="hr border-primary-500" />

	<p>border-secondary-500</p>
	<hr class="hr border-secondary-500" />

	<p>border-tertiary-500</p>
	<hr class="hr border-tertiary-500" />

	<p>border-success-500</p>
	<hr class="hr border-success-500" />

	<p>border-warning-500</p>
	<hr class="hr border-warning-500" />

	<p>border-error-500</p>
	<hr class="hr border-error-500" />

	<p>border-surface-950-50</p>
	<hr class="hr border-surface-950-50" />
</div>

```

# Forms and Inputs

Various form and input styles.

```astro
<form class="card bg-surface-100-900 p-4 w-full max-w-md mx-auto space-y-4">
	<header>
		<h3 class="h3">Account</h3>
	</header>
	<fieldset class="fieldset space-y-2">
		<legend class="legend">Account Details</legend>
		<label class="label">
			<span class="label-text">Email</span>
			<input class="input" type="email" placeholder="you@example.com" />
		</label>
	</fieldset>
	<fieldset class="fieldset space-y-2">
		<legend class="legend">Shipping Address</legend>
		<label class="label">
			<span class="label-text">Street</span>
			<input class="input" type="text" placeholder="123 Main St" />
		</label>
		<label class="label">
			<span class="label-text">City</span>
			<select class="select">
				<option disabled selected>Select a city</option>
				<option value="nyc">New York</option>
				<option value="la">Los Angeles</option>
				<option value="chi">Chicago</option>
			</select>
		</label>
	</fieldset>
	<fieldset class="fieldset space-y-2">
		<legend class="legend">Notes</legend>
		<label class="label">
			<span class="label-text">Delivery Instructions</span>
			<textarea class="textarea" rows="3" placeholder="Delivery instructions..."></textarea>
		</label>
	</fieldset>
	<footer class="flex justify-end">
		<button type="submit" class="btn preset-filled">Submit</button>
	</footer>
</form>

```

## Requirements

Skeleton relies on the official [Tailwind Forms](https://github.com/tailwindlabs/tailwindcss-forms) plugin to normalize form styling, also known as a reset. This plugin is <u>required</u> if you wish to use any form utility classes provided on this page.

<figure class="card-filled-enhanced flex justify-center gap-4 p-8">
  <a class="btn preset-filled" href="https://github.com/tailwindlabs/tailwindcss-forms" target="_blank">
    View on Github
  </a>
</figure>

Install the `@tailwindcss/forms` package, then implement the `@plugin` directive in your global stylesheet.

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

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

***

## Fieldsets

Use the optional `.fieldset` and `.legend` classes to group related form controls with an accessible title.

```astro
<form class="w-full max-w-md mx-auto space-y-4">
	<fieldset class="fieldset space-y-2">
		<legend class="legend">Account Details</legend>
		<label class="label">
			<span class="label-text">Email</span>
			<input class="input" type="email" placeholder="you@example.com" />
		</label>
		<label class="label">
			<span class="label-text">Password</span>
			<input class="input" type="password" placeholder="••••••••" />
		</label>
	</fieldset>
</form>

```

## Labels

Use `.label` and `.label-text` for styling the visible label text.

```astro
<form class="mx-auto w-full max-w-md space-y-4">
	<!-- Wrapped -->
	<label class="label">
		<span class="label-text">First Name</span>
		<input class="input" type="text" placeholder="Jane" />
	</label>
	<!-- Siblings -->
	<div class="space-y-1">
		<label class="label label-text" for="lastname">Last Name</label>
		<input class="input" type="text" id="lastname" name="lastname" placeholder="Doe" />
	</div>
</form>

```

## Input

Apply the `.input` class to all standard box-shaped [input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).

```astro
<div class="mx-auto w-full max-w-md space-y-4">
	<!-- Standard Inputs -->
	<form class="w-full grid grid-cols-1 md:grid-cols-2 gap-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>

	<hr class="hr col-span-2" />

	<!-- File Input -->
	<form class="col-span-2">
		<label class="label">
			<span class="label-text">File Input</span>
			<input class="input" type="file" />
		</label>
	</form>

	<hr class="hr col-span-2" />

	<!-- Date/Time Inputs -->
	<form class="w-full grid grid-cols-1 md:grid-cols-2 gap-4">
		<!-- date -->
		<label class="label">
			<span class="label-text">Input: date</span>
			<input class="input" type="date" placeholder="Input" />
		</label>
		<!-- datetime-local -->
		<label class="label">
			<span class="label-text">Input: datetime-local</span>
			<input class="input" type="datetime-local" placeholder="Input" />
		</label>
		<!-- month -->
		<label class="label">
			<span class="label-text">Input: month</span>
			<input class="input" type="month" placeholder="Input" />
		</label>
		<!-- time -->
		<label class="label">
			<span class="label-text">Input: time</span>
			<input class="input" type="time" placeholder="Input" />
		</label>
		<!-- week -->
		<label class="label">
			<span class="label-text">Input: week</span>
			<input class="input" type="week" placeholder="Input" />
		</label>
	</form>
</div>

```

## Select

Apply the `.select` class to `<select>` elements for single or multiple option menus.

```astro
<form class="mx-auto w-full max-w-md space-y-4">
	<!-- Basic Placeholder -->
	<label class="label">
		<span class="label-text">Basic Placeholder</span>
		<select class="select">
			<option disabled selected>Preferred Flavor</option>
			<option value="1">Strawberry</option>
			<option value="2">Grape</option>
			<option value="3">Watermelon</option>
			<option value="4">Apple</option>
			<option value="5">Mango</option>
		</select>
	</label>
	<!-- Optgroup -->
	<label class="label">
		<span class="label-text">Optgroup</span>
		<select class="select">
			<optgroup label="Berries">
				<option value="strawberry">Strawberry</option>
				<option value="blueberry">Blueberry</option>
				<option value="raspberry">Raspberry</option>
			</optgroup>
			<optgroup label="Citrus">
				<option value="orange">Orange</option>
				<option value="lemon">Lemon</option>
				<option value="lime">Lime</option>
			</optgroup>
			<optgroup label="Tropical">
				<option value="mango">Mango</option>
				<option value="pineapple">Pineapple</option>
				<option value="coconut">Coconut</option>
			</optgroup>
		</select>
	</label>
	<!-- Using Divider -->
	<label class="label">
		<span class="label-text">Using Divider</span>
		<select class="select">
			<option value="strawberry">Strawberry</option>
			<option value="grape">Grape</option>
			<option value="watermelon">Watermelon</option>
			<hr />
			<option value="dragonfruit">Dragonfruit</option>
			<option value="lychee">Lychee</option>
			<option value="passionfruit">Passionfruit</option>
		</select>
	</label>
</form>

```

## Textarea

Apply the `.textarea` class to `<textarea>` elements for multi-line text input.

```astro
<form class="mx-auto w-full max-w-md space-y-4">
	<textarea class="textarea" rows="4" placeholder="Tell us more..."></textarea>
</form>

```

## Checkboxes

Use `type="checkbox"` for inputs that allow one or more independent options to be toggled on or off.

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

Use `type="radio"` to present a set of mutually exclusive options where only one can be selected.

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

```

## Range

Use `type="range"` to allow selection of a numeric value from a continuous or stepped range via a slider.

```astro
<form class="mx-auto w-full max-w-md">
	<label class="label">
		<span class="label-text">Range</span>
		<input class="input" type="range" value="75" max="100" />
	</label>
</form>

```

## Progress

Use `<progress>` to indicate the completion status of a task, such as a file upload or loading operation.

```astro
<form class="mx-auto w-full max-w-md">
	<label class="label">
		<span class="label-text">Progress</span>
		<progress class="progress" value="50" max="100"></progress>
	</label>
</form>

```

## Meter

Use `<meter>` to represent a scalar value within a known range, such as disk usage, battery level, or a score.

```astro
<form class="mx-auto flex w-full max-w-md flex-col gap-4">
	<label class="label">
		<span class="label-text">Optimum</span>
		<meter class="meter" value="80" min="0" max="100" low="33" high="66" optimum="80"></meter>
	</label>
	<label class="label">
		<span class="label-text">Suboptimum</span>
		<meter class="meter" value="50" min="0" max="100" low="33" high="66" optimum="80"></meter>
	</label>
	<label class="label">
		<span class="label-text">Even Less Good</span>
		<meter class="meter" value="20" min="0" max="100" low="33" high="66" optimum="80"></meter>
	</label>
</form>

```

## Color

Use `type="color"` to provide a native color picker for selecting a single color value.

```astro
<form class="mx-auto w-full max-w-md">
	<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>

```

***

## Field Sizes

Use `field-{size}` paired with: `xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl`

```astro
<form class="mx-auto w-full max-w-md grid grid-cols-[auto_1fr_auto] items-center gap-4">
	<!-- xs -->
	<span class="label-text text-right">xs</span>
	<input class="input field-xs" type="text" placeholder="Input" />
	<button class="btn btn-xs preset-filled">Button</button>

	<!-- sm -->
	<span class="label-text text-right">sm</span>
	<input class="input field-sm" type="text" placeholder="Input" />
	<button class="btn btn-sm preset-filled">Button</button>

	<!-- base -->
	<span class="label-text text-right">base</span>
	<input class="input field-base" type="text" placeholder="Input" />
	<button class="btn btn-base preset-filled">Button</button>

	<!-- lg -->
	<span class="label-text text-right">lg</span>
	<input class="input field-lg" type="text" placeholder="Input" />
	<button class="btn btn-lg preset-filled">Button</button>

	<!-- xl -->
	<span class="label-text text-right">xl</span>
	<input class="input field-xl" type="text" placeholder="Input" />
	<button class="btn btn-xl preset-filled">Button</button>

	<!-- NOTE: 2x|3xl|4xl|5xl|6xl|7xl|8xl|9xl tructated for space -->
</form>

```

## Field Groups

Apply `field-group` to create a grouping of related box-shaped fields or buttons. This acts as a [grid](https://tailwindcss.com/docs/display#grid) container, allowing for column configuration. Make use of [Presets](/docs/\[framework]/tailwind-utilities/presets) to style label columns.

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

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

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

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

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

```

# 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 [animation-duration:4s]"></div>
			<div class="placeholder-circle size-14 animate-pulse [animation-duration:4s]"></div>
			<div class="placeholder-circle size-10 animate-pulse [animation-duration:4s]"></div>
		</div>
	</div>
	<div class="space-y-4">
		<div class="placeholder animate-pulse [animation-duration:4s]"></div>
		<div class="grid grid-cols-4 gap-4">
			<div class="placeholder animate-pulse [animation-duration:4s]"></div>
			<div class="placeholder animate-pulse [animation-duration:4s]"></div>
			<div class="placeholder animate-pulse [animation-duration:4s]"></div>
			<div class="placeholder animate-pulse [animation-duration:4s]"></div>
		</div>
		<div class="placeholder animate-pulse [animation-duration:4s]"></div>
		<div class="placeholder animate-pulse [animation-duration:4s]"></div>
	</div>
</div>

```

## Animation

Use Tailwind's [animate-pulse](https://tailwindcss.com/docs/animation) animation paired with any arbitrary duration.

```html
<div class="placeholder animate-pulse [animation-duration:4s]">...</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="card bg-surface-100-900 p-4 table-wrap">
	<!-- - -->
	<table class="table caption-bottom">
		<tbody class="[&>tr]:hover:preset-tonal-brand">
			{
				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>

```

## Zebra Striping

Apply the `table-zebra` class to add alternating row background colors.

```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 table-zebra caption-bottom">
		<tbody class="[&>tr]:hover:preset-tonal-brand">
			{
				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-brand">
			{
				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

Note that table rows and cells are [not interactive](https://www.w3.org/WAI/ARIA/apg/patterns/table/). Instead, 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-xs preset-tonal" 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.

\| Class         | Styles               |
\| ------------- | -------------------- |
\| `table-auto`  | table-layout: auto;  |
\| `table-fixed` | table-layout: fixed; |

## 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>
	);
}

```

## Anatomy

Here's an overview of how the Accordion component is structured in code:

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

export default function Anatomy() {
	return (
		<Accordion>
			<Accordion.Item>
				<Accordion.ItemTrigger />
				<Accordion.ItemIndicator />
				<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

Modify the layout based on responsive breakpoints.

```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 (
		<>
			<AppBar>
				{/* 1. 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>

					{/* 2. 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>

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

```

## Anatomy

Here's an overview of how the AppBar component is structured in code:

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

export default function Anatomy() {
	return (
		<AppBar>
			<AppBar.Toolbar>
				<AppBar.Lead />
				<AppBar.Headline />
				<AppBar.Trail />
			</AppBar.Toolbar>
		</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 (
		<div className="flex items-center gap-8">
			{/* Small */}
			<Avatar className="size-10">
				<Avatar.Image src="https://i.pravatar.cc/40?img=48" alt="small" />
				<Avatar.Fallback>SK</Avatar.Fallback>
			</Avatar>
			{/* Base */}
			<Avatar>
				<Avatar.Image src="https://i.pravatar.cc/60?img=48" alt="base" />
				<Avatar.Fallback>SK</Avatar.Fallback>
			</Avatar>
			{/* Large */}
			<Avatar className="size-20">
				<Avatar.Image src="https://i.pravatar.cc/80?img=48" alt="large" />
				<Avatar.Fallback>SK</Avatar.Fallback>
			</Avatar>
		</div>
	);
}

```

## 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)]" alt="filtered" />
				<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>
		</>
	);
}

```

## Anatomy

Here's an overview of how the Avatar component is structured in code:

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

export default function Anatomy() {
	return (
		<Avatar>
			<Avatar.Image />
			<Avatar.Fallback />
		</Avatar>
	);
}
```

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

# Carousel

Navigate through a collection of slides with controls and indicators.

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

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

export default function Default() {
	return (
		<Carousel slideCount={slides.length} slidesPerPage={3} spacing="16px" loop>
			<Carousel.Control className="flex justify-between mb-4">
				<Carousel.PrevTrigger className="btn preset-filled">
					<span>&larr;</span>
					<span>Back</span>
				</Carousel.PrevTrigger>
				<Carousel.AutoplayTrigger className="btn preset-tonal">Toggle Autoplay</Carousel.AutoplayTrigger>
				<Carousel.NextTrigger className="btn preset-filled">
					<span>Next</span>
					<span>&rarr;</span>
				</Carousel.NextTrigger>
			</Carousel.Control>
			<Carousel.ItemGroup>
				{slides.map((slide, i) => (
					<Carousel.Item index={i} key={i} className="card bg-surface-100-900 h-50 p-4 flex justify-center items-center">
						{slide.title}
					</Carousel.Item>
				))}
			</Carousel.ItemGroup>
			<Carousel.IndicatorGroup>
				<Carousel.Context>{(carousel) => carousel.pageSnapPoints.map((_, i) => <Carousel.Indicator key={i} index={i} />)}</Carousel.Context>
			</Carousel.IndicatorGroup>
		</Carousel>
	);
}

```

Breaking convention in Skeleton, some portions of this component are provided “headless”. Meaning no default styles are applied out of the box. This ensures you retain full control of styling for maximum flexibility.

## Overlapping Controls

Introduce supporting elements and styles to implement this variation.

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

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

export default function Overlap() {
	return (
		<Carousel slideCount={slides.length} slidesPerPage={4} spacing="16px" padding="48px" autoSize loop>
			<div className="relative">
				<Carousel.Control>
					<Carousel.PrevTrigger className="btn-icon preset-filled rounded-full absolute top-[50%] left-0 translate-y-[-50%]">
						<span>&larr;</span>
					</Carousel.PrevTrigger>
					<Carousel.NextTrigger className="btn-icon preset-filled rounded-full absolute top-[50%] right-0 translate-y-[-50%]">
						<span>&rarr;</span>
					</Carousel.NextTrigger>
				</Carousel.Control>
				<Carousel.ItemGroup>
					{slides.map((slide, i) => (
						<Carousel.Item index={i} key={i} className="card bg-surface-100-900 h-50 aspect-square p-4 flex justify-center items-center">
							{slide.title}
						</Carousel.Item>
					))}
				</Carousel.ItemGroup>
			</div>
			<Carousel.IndicatorGroup>
				<Carousel.Context>{(carousel) => carousel.pageSnapPoints.map((_, i) => <Carousel.Indicator key={i} index={i} />)}</Carousel.Context>
			</Carousel.IndicatorGroup>
		</Carousel>
	);
}

```

## Orientation

Apply `orientation="vertical"` on the root, and apply a set height on the `<Carousel.ItemGroup>`.

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

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

export default function Orientation() {
	return (
		<Carousel slideCount={slides.length} slidesPerPage={3} spacing="16px" loop orientation="vertical" autoSize>
			<Carousel.Control className="flex justify-between mb-4">
				<Carousel.PrevTrigger className="btn preset-filled">
					<span>&larr;</span>
					<span>Back</span>
				</Carousel.PrevTrigger>
				<Carousel.AutoplayTrigger className="btn preset-tonal">Toggle Autoplay</Carousel.AutoplayTrigger>
				<Carousel.NextTrigger className="btn preset-filled">
					<span>Next</span>
					<span>&rarr;</span>
				</Carousel.NextTrigger>
			</Carousel.Control>
			<Carousel.ItemGroup className="h-80">
				{slides.map((slide, i) => (
					<Carousel.Item index={i} key={i} className="card bg-surface-100-900 h-32 p-4 flex justify-center items-center">
						{slide.title}
					</Carousel.Item>
				))}
			</Carousel.ItemGroup>
			<Carousel.IndicatorGroup>
				<Carousel.Context>{(carousel) => carousel.pageSnapPoints.map((_, i) => <Carousel.Indicator key={i} index={i} />)}</Carousel.Context>
			</Carousel.IndicatorGroup>
		</Carousel>
	);
}

```

## Text

Display a text display of the carousel state.

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

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

export default function Text() {
	return (
		<Carousel slideCount={slides.length} slidesPerPage={3} spacing="16px" loop>
			<Carousel.Control className="flex justify-between mb-4">
				<Carousel.PrevTrigger className="btn preset-filled">
					<span>&larr;</span>
					<span>Back</span>
				</Carousel.PrevTrigger>
				<Carousel.AutoplayTrigger className="btn preset-filled">Toggle Autoplay</Carousel.AutoplayTrigger>
				<Carousel.NextTrigger className="btn preset-filled">
					<span>Next</span>
					<span>&rarr;</span>
				</Carousel.NextTrigger>
			</Carousel.Control>
			<Carousel.ItemGroup>
				{slides.map((slide, i) => (
					<Carousel.Item index={i} key={i} className="card bg-surface-100-900 h-50 p-4 flex justify-center items-center">
						{slide.title}
					</Carousel.Item>
				))}
			</Carousel.ItemGroup>
			<Carousel.IndicatorGroup>
				<Carousel.Context>
					{(carousel) => (
						<p>
							Showing {carousel.page + 1} of {carousel.pageSnapPoints.length}
						</p>
					)}
				</Carousel.Context>
			</Carousel.IndicatorGroup>
		</Carousel>
	);
}

```

## Anatomy

Here's an overview of how the Carousel component is structured in code:

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

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

## API Reference

### Root

| Prop                   | Description                                                                                                                                                  | Type                                                                                                                                                                                                  | Default      |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| ids                    | The ids of the elements in the carousel. Useful for composition.                                                                                             | Partial\<\{ root: string; item: (index: number) => string; itemGroup: string; nextTrigger: string; prevTrigger: string; indicatorGroup: string; indicator: (index: number) => string; }> \| undefined | -            |
| translations           | The localized messages to use.                                                                                                                               | IntlTranslations \| undefined                                                                                                                                                                         | -            |
| slidesPerPage          | The number of slides to show at a time.                                                                                                                      | number \| undefined                                                                                                                                                                                   | 1            |
| autoSize               | Whether to enable variable width slides.                                                                                                                     | boolean \| undefined                                                                                                                                                                                  | false        |
| slidesPerMove          | The number of slides to scroll at a time.&#xA;&#xA;When set to \`auto\`, the number of slides to scroll is determined by the&#xA;\`slidesPerPage\` property. | number \| "auto" \| undefined                                                                                                                                                                         | "auto"       |
| autoplay               | Whether to scroll automatically. The default delay is 4000ms.                                                                                                | boolean \| \{ delay: number; } \| undefined                                                                                                                                                           | false        |
| allowMouseDrag         | Whether to allow scrolling via dragging with mouse                                                                                                           | boolean \| undefined                                                                                                                                                                                  | false        |
| loop                   | Whether the carousel should loop around.                                                                                                                     | boolean \| undefined                                                                                                                                                                                  | false        |
| page                   | The controlled page of the carousel.                                                                                                                         | number \| undefined                                                                                                                                                                                   | -            |
| defaultPage            | The initial page to scroll to when rendered.&#xA;Use when you don't need to control the page of the carousel.                                                | number \| undefined                                                                                                                                                                                   | 0            |
| spacing                | The amount of space between items.                                                                                                                           | string \| undefined                                                                                                                                                                                   | "0px"        |
| padding                | Defines the extra space added around the scrollable area,&#xA;enabling nearby items to remain partially in view.                                             | string \| undefined                                                                                                                                                                                   | -            |
| onPageChange           | Function called when the page changes.                                                                                                                       | ((details: PageChangeDetails) => void) \| undefined                                                                                                                                                   | -            |
| inViewThreshold        | The threshold for determining if an item is in view.                                                                                                         | number \| number\[] \| undefined                                                                                                                                                                      | 0.6          |
| snapType               | The snap type of the item.                                                                                                                                   | "proximity" \| "mandatory" \| undefined                                                                                                                                                               | "mandatory"  |
| slideCount             | The total number of slides.&#xA;Useful for SSR to render the initial ating the snap points.                                                                  | number                                                                                                                                                                                                | -            |
| onDragStatusChange     | Function called when the drag status changes.                                                                                                                | ((details: DragStatusDetails) => void) \| undefined                                                                                                                                                   | -            |
| onAutoplayStatusChange | Function called when the autoplay status changes.                                                                                                            | ((details: AutoplayStatusDetails) => 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                                                                                                                                                   | -            |
| 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   | -                           | CarouselApi\<PropTypes>                                        | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

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

### Control

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

### ItemGroup

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

### Item

| Prop      | Description                     | Type                                                           | Default |
| --------- | ------------------------------- | -------------------------------------------------------------- | ------- |
| index     | The index of the item.          | number                                                         | -       |
| snapAlign | The snap alignment of the item. | "start" \| "end" \| "center" \| undefined                      | "start" |
| 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 | -       |

### NextTrigger

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

### AutoplayTrigger

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

### IndicatorGroup

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

### Indicator

| Prop     | Description                         | Type                                                              | Default |
| -------- | ----------------------------------- | ----------------------------------------------------------------- | ------- |
| index    | The index of the indicator.         | number                                                            | -       |
| readOnly | Whether the indicator is read only. | boolean \| undefined                                              | false   |
| element  | Render the element yourself         | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### ProgressText

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

# Collapsible

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

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

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

```

## Controlled

Control the active state of the component.

```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.Content>
				The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the
				skeleton which support the body can become the bars of the cage which imprison the spirit.
			</Collapsible.Content>
			<Collapsible.Trigger className="btn preset-filled">Show {open ? 'Less' : 'More'}</Collapsible.Trigger>
		</Collapsible>
	);
}

```

## Indicator

Add a visual indicator to the toggle button.

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

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

```

## Disabled

Set the disabled state for the component.

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

export default function Disabled() {
	return (
		<Collapsible disabled>
			<Collapsible.Content>Hidden!</Collapsible.Content>
			<Collapsible.Trigger className="btn preset-filled">Toggle</Collapsible.Trigger>
		</Collapsible>
	);
}

```

## Alignment

Control the position and alignment of the trigger and content using flexbox `items-*`.

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

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

```

## Direction

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

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

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

```

## Anatomy

Here's an overview of how the Collapsible component is structured in code:

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

export default function Anatomy() {
	return (
		<Collapsible>
			<Collapsible.Trigger />
			<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="max-w-md"
			placeholder="Search..."
			collection={collection}
			onOpenChange={onOpenChange}
			onInputValueChange={onInputValueChange}
		>
			<Combobox.Label>Label</Combobox.Label>
			<Combobox.Control>
				<Combobox.Input />
				<Combobox.Trigger />
			</Combobox.Control>
			<Combobox.ClearTrigger>Clear All</Combobox.ClearTrigger>
			<Portal>
				<Combobox.Positioner>
					<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

Organize items into categorized groups.

```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="max-w-md"
			placeholder="Search..."
			collection={collection}
			onOpenChange={onOpenChange}
			onInputValueChange={onInputValueChange}
		>
			<Combobox.Control>
				<Combobox.Input />
				<Combobox.Trigger />
			</Combobox.Control>
			<Portal>
				<Combobox.Positioner>
					<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="max-w-md"
			placeholder="Search..."
			collection={collection}
			onOpenChange={onOpenChange}
			onInputValueChange={onInputValueChange}
			inputBehavior="autohighlight"
		>
			<Combobox.Control>
				<Combobox.Input />
				<Combobox.Trigger />
			</Combobox.Control>
			<Portal>
				<Combobox.Positioner>
					<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>
						<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="max-w-md"
			placeholder="Search..."
			collection={collection}
			onOpenChange={onOpenChange}
			onInputValueChange={onInputValueChange}
		>
			<Combobox.Control>
				<Combobox.Input />
				<Combobox.Trigger />
			</Combobox.Control>
			<Portal>
				<Combobox.Positioner>
					<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="max-w-md"
			placeholder="Search..."
			collection={collection}
			onOpenChange={onOpenChange}
			onInputValueChange={onInputValueChange}
		>
			<Combobox.Control>
				<Combobox.Input />
				<Combobox.Trigger />
			</Combobox.Control>
			<Portal>
				<Combobox.Positioner>
					<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

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

```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="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>
					<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 Content component part.

```tsx
<Combobox.Content className="z-50" />
```

### Max Items

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

## Anatomy

Here's an overview of how the Combobox component is structured in code:

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

export default function Anatomy() {
	return (
		<Combobox>
			<Combobox.Label />
			<Combobox.Control>
				<Combobox.Input />
				<Combobox.Trigger />
			</Combobox.Control>
			<Combobox.ClearTrigger />
			<Portal>
				<Combobox.Positioner>
					<Combobox.Content>
						<Combobox.ItemGroup>
							<Combobox.ItemGroupLabel />
							<Combobox.Item>
								<Combobox.ItemText />
								<Combobox.ItemIndicator />
							</Combobox.Item>
						</Combobox.ItemGroup>
					</Combobox.Content>
				</Combobox.Positioner>
			</Portal>
		</Combobox>
	);
}
```

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

### ClearTrigger

| 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>Choose Date</DatePicker.Label>
			<DatePicker.Control>
				<DatePicker.Input placeholder="mm/dd/yyyy" />
				<DatePicker.Trigger />
			</DatePicker.Control>
			<Portal>
				<DatePicker.Positioner>
					<DatePicker.Content>
						<DatePicker.View view="day">
							<DatePicker.Context>
								{(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>
	);
}

```

## Usage

Given the scale and scope of the Date Picker component, consider implementing within a local component to add a layer of abstraction. Then utlize the props and event handlers to pass data to and from the component respectively.

## 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>Choose Date</DatePicker.Label>
			<DatePicker.Control>
				<DatePicker.Input placeholder="mm/dd/yyyy" />
				<DatePicker.Trigger />
			</DatePicker.Control>
			<Portal>
				<DatePicker.Positioner>
					<DatePicker.Content>
						<DatePicker.View view="day">
							<DatePicker.Context>
								{(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() {
	const currentDate = new Date();
	const currentYear = currentDate.getFullYear();

	return (
		<DatePicker min={parseDate(`${currentYear}-01-01`)} max={parseDate(`${currentYear}-12-31`)}>
			<DatePicker.Label>Choose Date</DatePicker.Label>
			<DatePicker.Control>
				<DatePicker.Input placeholder="mm/dd/yyyy" />
				<DatePicker.Trigger />
			</DatePicker.Control>
			<Portal>
				<DatePicker.Positioner>
					<DatePicker.Content>
						<DatePicker.View view="day">
							<DatePicker.Context>
								{(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>
	);
}

```

### Presets

Use the `PresetTrigger` component to allow users to quickly select predefined date ranges.

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

export default function Presets() {
	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>
										<div className="flex gap-2">
											<DatePicker.PresetTrigger value="last3Days">Last 3 Days</DatePicker.PresetTrigger>
											<DatePicker.PresetTrigger value="last7Days">Last 7 Days</DatePicker.PresetTrigger>
											<DatePicker.PresetTrigger value="last30Days">Last 30 Days</DatePicker.PresetTrigger>
										</div>
										<DatePicker.Table>
											<DatePicker.TableHead>
												<DatePicker.TableRow>
													{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>Choose Date</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>Choose Date</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>
	);
}

```

## Anatomy

Here's an overview of how the DatePicker component is structured in code:

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

export default function Anatomy() {
	return (
		<DatePicker>
			<DatePicker.Label />
			<DatePicker.Control>
				<DatePicker.Input />
				<DatePicker.Trigger />
			</DatePicker.Control>
			<Portal>
				<DatePicker.Positioner>
					<DatePicker.Content>
						<DatePicker.YearSelect />
						<DatePicker.MonthSelect />
						<DatePicker.View>
							<DatePicker.ViewControl>
								<DatePicker.PrevTrigger />
								<DatePicker.ViewTrigger>
									<DatePicker.RangeText />
								</DatePicker.ViewTrigger>
								<DatePicker.NextTrigger />
							</DatePicker.ViewControl>
							<DatePicker.Table>
								<DatePicker.TableHead>
									<DatePicker.TableRow>
										<DatePicker.TableHeader />
									</DatePicker.TableRow>
								</DatePicker.TableHead>
								<DatePicker.TableBody>
									<DatePicker.TableRow>
										<DatePicker.TableCell>
											<DatePicker.TableCellTrigger />
										</DatePicker.TableCell>
									</DatePicker.TableRow>
								</DatePicker.TableBody>
							</DatePicker.Table>
						</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"  |
| createCalendar       | A function that creates a Calendar object for a given calendar identifier.&#xA;Enables non-Gregorian calendar support (Persian, Buddhist, Islamic, etc.)&#xA;without bundling all calendars by default. | ((identifier: CalendarIdentifier) => Calendar) \| undefined                                                                                                                                                                                               | -        |
| 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                                                                                                                                                                                                                                      | -        |
| required             | Whether the date picker is required                                                                                                                                                                     | boolean \| undefined                                                                                                                                                                                                                                      | -        |
| invalid              | Whether the date picker is invalid                                                                                                                                                                      | 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     |
| openOnClick          | Whether to open the calendar when the input is clicked.                                                                                                                                                 | boolean \| undefined                                                                                                                                                                                                                                      | false    |
| 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                                                                                                                                                                                                                                      | -        |
| showWeekNumbers      | Whether to show the week number column in the day view.                                                                                                                                                 | 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                                                                                                                                                                                                       | -        |
| onVisibleRangeChange | Function called when the visible range changes.                                                                                                                                                         | ((details: VisibleRangeChangeDetails) => 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" |
| maxSelectedDates     | The maximum number of dates that can be selected.&#xA;This is only applicable when \`selectionMode\` is \`multiple\`.                                                                                   | number \| undefined                                                                                                                                                                                                                                       | -        |
| 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';
import { XIcon } from 'lucide-react';

export default function Default() {
	// The following animation is optional.
	// This may also be included inline.
	const animation =
		'transition transition-discrete opacity-0 translate-y-[100px] starting:data-[state=open]:opacity-0 starting:data-[state=open]:translate-y-[100px] data-[state=open]:opacity-100 data-[state=open]:translate-y-0';

	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 p-4">
					<Dialog.Content className={`card bg-surface-100-900 w-full max-w-xl p-4 space-y-4 shadow-xl ${animation}`}>
						<header className="flex justify-between items-center">
							<Dialog.Title className="text-lg font-bold">Hello Skeleton</Dialog.Title>
							<Dialog.CloseTrigger className="btn-icon hover:preset-tonal">
								<XIcon className="size-4" />
							</Dialog.CloseTrigger>
						</header>
						<Dialog.Description>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
						</Dialog.Description>
						<footer className="flex justify-end gap-2">
							<Dialog.CloseTrigger className="btn preset-tonal">Cancel</Dialog.CloseTrigger>
							<button type="button" className="btn preset-filled">
								Save
							</button>
						</footer>
					</Dialog.Content>
				</Dialog.Positioner>
			</Portal>
		</Dialog>
	);
}

```

Breaking convention in Skeleton, this component is provided "headless". Meaning no default styles are applied out of the box. This ensures you retain full control of all styling for maximum flexibility.

## 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.

> TIP: use this sparingly, as this can trap users in this experience without a dedicated close action.

```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. This pairs well with the [Navigation Sidebar](/docs/svelte/framework-components/navigation#sidebar).

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

export default function Drawer() {
	// The following animations are optional.
	// These may also be included inline.
	const animBackdrop = 'transition transition-discrete opacity-0 starting:data-[state=open]:opacity-0 data-[state=open]:opacity-100';
	const animModal =
		'transition transition-discrete opacity-0 -translate-x-full starting:data-[state=open]:opacity-0 starting:data-[state=open]:-translate-x-full data-[state=open]:opacity-100 data-[state=open]:translate-x-0';

	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 ${animBackdrop}`} />
				<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 ${animModal}`}>
						<header className="flex justify-between items-center">
							<Dialog.Title className="text-2xl font-bold">Drawer</Dialog.Title>
							<Dialog.CloseTrigger className="btn-icon preset-tonal">
								<XIcon />
							</Dialog.CloseTrigger>
						</header>
						<p>A slide out drawer panel.</p>
					</Dialog.Content>
				</Dialog.Positioner>
			</Portal>
		</Dialog>
	);
}

```

## Z-Index

By default Skeleton does 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.

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

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

```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>
	);
}

```

## Anatomy

Here's an overview of how the Dialog component is structured in code:

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

export default function Anatomy() {
	return (
		<Dialog>
			<Dialog.Trigger />
			<Portal>
				<Dialog.Backdrop />
				<Dialog.Positioner>
					<Dialog.Content>
						<Dialog.Title />
						<Dialog.Description />
						<Dialog.CloseTrigger />
					</Dialog.Content>
				</Dialog.Positioner>
			</Portal>
		</Dialog>
	);
}
```

## API Reference

### Root

| Prop                   | Description                                                                                                                    | Type                                                                                                                                                                                                       | Default  |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| children               | -                                                                                                                              | ReactNode                                                                                                                                                                                                  | -        |
| ids                    | The ids of the elements in the dialog. Useful for composition.                                                                 | Partial\<\{ trigger: string \| ((value?: string \| undefined) => 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     |
| aria-label             | Human readable label for the dialog, in event the dialog title is not rendered                                                 | string \| undefined                                                                                                                                                                                        | -        |
| role                   | The dialog's role                                                                                                              | "dialog" \| "alertdialog" \| undefined                                                                                                                                                                     | "dialog" |
| 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                                                                                                                                                        | -        |
| triggerValue           | The controlled active trigger value                                                                                            | string \| null \| undefined                                                                                                                                                                                | -        |
| defaultTriggerValue    | The initial active trigger value when rendered.&#xA;Use when you don't need to control the active trigger value.               | string \| null \| undefined                                                                                                                                                                                | -        |
| onTriggerValueChange   | Function to call when the active trigger changes                                                                               | ((details: TriggerValueChangeDetails) => 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                                                                                                                                                        | -        |
| 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';
import { FileIcon } from 'lucide-react';

export default function Default() {
	return (
		<FileUpload>
			<FileUpload.Label>Upload your files</FileUpload.Label>
			<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.ClearTrigger>Clear Files</FileUpload.ClearTrigger>
		</FileUpload>
	);
}

```

## Disabled

Set the `disabled` prop to enable the disabled state.

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

export default function Disabled() {
	return (
		<FileUpload disabled>
			<FileUpload.Label>Upload your files</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>
	);
}

```

## Button Only

Replace the interface with a simple "browse" button.

```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>
	);
}

```

## Direction

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

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

export default function Dir() {
	return (
		<FileUpload dir="rtl">
			<FileUpload.Label>Upload your files</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>
	);
}

```

## Anatomy

Here's an overview of how the FileUpload component is structured in code:

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

export default function Anatomy() {
	return (
		<FileUpload>
			<FileUpload.Dropzone>
				<FileUpload.Trigger />
				<FileUpload.HiddenInput />
			</FileUpload.Dropzone>
			<FileUpload.ItemGroup>
				<FileUpload.Item>
					<FileUpload.ItemName />
					<FileUpload.ItemSizeText />
					<FileUpload.ItemDeleteTrigger />
				</FileUpload.Item>
			</FileUpload.ItemGroup>
			<FileUpload.ClearTrigger />
		</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; itemDeleteTrigger: (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                                                                                                                                                                                                                                                                                   | -        |
| readOnly             | Whether the file input is read-only                                                                               | 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 | -       |

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

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

# Floating Panel

A draggable, resizable floating panel with minimize/maximize controls.

```tsx
import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';
import { GripVerticalIcon, MinimizeIcon, XIcon, MinusIcon, MaximizeIcon } from 'lucide-react';

export default function Default() {
	return (
		<FloatingPanel>
			<FloatingPanel.Trigger className="btn preset-filled">Open Panel</FloatingPanel.Trigger>
			<Portal>
				<FloatingPanel.Positioner className="z-50">
					<FloatingPanel.Content>
						<FloatingPanel.DragTrigger>
							<FloatingPanel.Header>
								<FloatingPanel.Title>
									<GripVerticalIcon className="size-4" />
									Floating Panel
								</FloatingPanel.Title>
								<FloatingPanel.Control>
									<FloatingPanel.StageTrigger stage="minimized">
										<MinusIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="maximized">
										<MaximizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="default">
										<MinimizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.CloseTrigger>
										<XIcon className="size-4" />
									</FloatingPanel.CloseTrigger>
								</FloatingPanel.Control>
							</FloatingPanel.Header>
						</FloatingPanel.DragTrigger>
						<FloatingPanel.Body>
							<p>
								This is a floating panel that can be dragged, resized, minimized, and maximized. Try dragging from the header or resizing
								from the bottom-right corner.
							</p>
						</FloatingPanel.Body>
						<FloatingPanel.ResizeTrigger axis="se" />
					</FloatingPanel.Content>
				</FloatingPanel.Positioner>
			</Portal>
		</FloatingPanel>
	);
}

```

## Size Constraints

Use the `minSize` and `maxSize` props to set size constraints on the Floating Panel.

```tsx
import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';
import { GripVerticalIcon, MinimizeIcon, XIcon, MinusIcon, MaximizeIcon } from 'lucide-react';

export default function SizeConstraints() {
	return (
		<FloatingPanel maxSize={{ width: 900, height: 600 }} minSize={{ width: 300, height: 200 }}>
			<FloatingPanel.Trigger className="btn preset-filled">Open Panel</FloatingPanel.Trigger>
			<Portal>
				<FloatingPanel.Positioner className="z-50">
					<FloatingPanel.Content>
						<FloatingPanel.DragTrigger>
							<FloatingPanel.Header>
								<FloatingPanel.Title>
									<GripVerticalIcon className="size-4" />
									Floating Panel
								</FloatingPanel.Title>
								<FloatingPanel.Control>
									<FloatingPanel.StageTrigger stage="minimized">
										<MinusIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="maximized">
										<MaximizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="default">
										<MinimizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.CloseTrigger>
										<XIcon className="size-4" />
									</FloatingPanel.CloseTrigger>
								</FloatingPanel.Control>
							</FloatingPanel.Header>
						</FloatingPanel.DragTrigger>
						<FloatingPanel.Body>
							<p>This panel has size constraints applied: minimum 300x200 pixels and maximum 900x600 pixels.</p>
							<p>Try resizing from the bottom-right corner - the panel will respect these boundaries.</p>
						</FloatingPanel.Body>
						<FloatingPanel.ResizeTrigger axis="se" />
					</FloatingPanel.Content>
				</FloatingPanel.Positioner>
			</Portal>
		</FloatingPanel>
	);
}

```

## Controlled

Control the open state and size of the Floating Panel with your own state.

```tsx
import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';
import { GripVerticalIcon, XIcon, MinusIcon, MaximizeIcon, MinimizeIcon } from 'lucide-react';
import { useState } from 'react';

export default function Controlled() {
	const [open, setOpen] = useState(false);
	const [size, setSize] = useState({
		width: 400,
		height: 300,
	});

	return (
		<>
			<div className="flex flex-col gap-4">
				<label className="label flex items-center gap-2">
					<input type="checkbox" className="checkbox" checked={open} onChange={(e) => setOpen(e.currentTarget.checked)} />
					<span className="label-text">Open Panel</span>
				</label>
				<label className="label">
					<span className="label-text">Width:</span>
					<input type="number" className="input" value={size.width} onChange={(e) => setSize({ ...size, width: Number(e.target.value) })} />
				</label>
				<label className="label">
					<span className="label-text">Height:</span>
					<input
						type="number"
						className="input"
						value={size.height}
						onChange={(e) => setSize({ ...size, height: Number(e.target.value) })}
					/>
				</label>
			</div>

			<FloatingPanel
				open={open}
				onOpenChange={(details) => setOpen(details.open)}
				size={size}
				onSizeChange={(details) => setSize(details.size)}
			>
				<Portal>
					<FloatingPanel.Positioner className="z-50">
						<FloatingPanel.Content>
							<FloatingPanel.DragTrigger>
								<FloatingPanel.Header>
									<FloatingPanel.Title>
										<GripVerticalIcon className="size-4" />
										Controlled Panel
									</FloatingPanel.Title>
									<FloatingPanel.Control>
										<FloatingPanel.StageTrigger stage="minimized">
											<MinusIcon className="size-4" />
										</FloatingPanel.StageTrigger>
										<FloatingPanel.StageTrigger stage="maximized">
											<MaximizeIcon className="size-4" />
										</FloatingPanel.StageTrigger>
										<FloatingPanel.StageTrigger stage="default">
											<MinimizeIcon className="size-4" />
										</FloatingPanel.StageTrigger>
										<FloatingPanel.CloseTrigger>
											<XIcon className="size-4" />
										</FloatingPanel.CloseTrigger>
									</FloatingPanel.Control>
								</FloatingPanel.Header>
							</FloatingPanel.DragTrigger>
							<FloatingPanel.Body>
								<p>This panel's open state and size are controlled via the inputs above.</p>
								<p>Try changing the values or resizing/closing the panel to see the inputs update.</p>
							</FloatingPanel.Body>
							<FloatingPanel.ResizeTrigger axis="se" />
						</FloatingPanel.Content>
					</FloatingPanel.Positioner>
				</Portal>
			</FloatingPanel>
		</>
	);
}

```

## Anchor Position

Position the panel relative to another element using the `defaultPosition` prop.

```tsx
import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';
import { GripVerticalIcon, XIcon, MinusIcon, MaximizeIcon, MinimizeIcon } from 'lucide-react';

export default function AnchorPosition() {
	return (
		<div className="space-y-4">
			<FloatingPanel
				getAnchorPosition={(ctx) => {
					if (!ctx.triggerRect) return { x: 0, y: 0 };
					return {
						x: ctx.triggerRect.x + ctx.triggerRect.width / 2,
						y: ctx.triggerRect.y + ctx.triggerRect.height / 2,
					};
				}}
			>
				<FloatingPanel.Trigger className="btn preset-filled">Open Panel</FloatingPanel.Trigger>
				<Portal>
					<FloatingPanel.Positioner className="z-50">
						<FloatingPanel.Content>
							<FloatingPanel.DragTrigger>
								<FloatingPanel.Header>
									<FloatingPanel.Title>
										<GripVerticalIcon className="size-4" />
										Anchored Panel
									</FloatingPanel.Title>
									<FloatingPanel.Control>
										<FloatingPanel.StageTrigger stage="minimized">
											<MinusIcon className="size-4" />
										</FloatingPanel.StageTrigger>
										<FloatingPanel.StageTrigger stage="maximized">
											<MaximizeIcon className="size-4" />
										</FloatingPanel.StageTrigger>
										<FloatingPanel.StageTrigger stage="default">
											<MinimizeIcon className="size-4" />
										</FloatingPanel.StageTrigger>
										<FloatingPanel.CloseTrigger>
											<XIcon className="size-4" />
										</FloatingPanel.CloseTrigger>
									</FloatingPanel.Control>
								</FloatingPanel.Header>
							</FloatingPanel.DragTrigger>
							<FloatingPanel.Body>
								<p>This panel is centered in the viewport using getAnchorPosition.</p>
								<p>The position is calculated based on the boundary rectangle.</p>
							</FloatingPanel.Body>
							<FloatingPanel.ResizeTrigger axis="se" />
						</FloatingPanel.Content>
					</FloatingPanel.Positioner>
				</Portal>
			</FloatingPanel>
		</div>
	);
}

```

## Resize Triggers

Add resize triggers on all sides and corners of the Floating Panel using the `axis` prop.

```tsx
import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';
import { GripVerticalIcon, MinimizeIcon, XIcon, MinusIcon, MaximizeIcon } from 'lucide-react';

export default function Default() {
	return (
		<FloatingPanel>
			<FloatingPanel.Trigger className="btn preset-filled">Open Panel</FloatingPanel.Trigger>
			<Portal>
				<FloatingPanel.Positioner className="z-50">
					<FloatingPanel.Content>
						<FloatingPanel.DragTrigger>
							<FloatingPanel.Header>
								<FloatingPanel.Title>
									<GripVerticalIcon className="size-4" />
									Floating Panel
								</FloatingPanel.Title>
								<FloatingPanel.Control>
									<FloatingPanel.StageTrigger stage="minimized">
										<MinusIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="maximized">
										<MaximizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="default">
										<MinimizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.CloseTrigger>
										<XIcon className="size-4" />
									</FloatingPanel.CloseTrigger>
								</FloatingPanel.Control>
							</FloatingPanel.Header>
						</FloatingPanel.DragTrigger>
						<FloatingPanel.Body>
							<p>
								This is a floating panel that can be dragged, resized, minimized, and maximized. Try dragging from the header or resizing
								from the bottom-right corner.
							</p>
						</FloatingPanel.Body>
						<FloatingPanel.ResizeTrigger className="bg-primary-500/50" axis="n" />
						<FloatingPanel.ResizeTrigger className="bg-primary-500/50" axis="e" />
						<FloatingPanel.ResizeTrigger className="bg-primary-500/50" axis="w" />
						<FloatingPanel.ResizeTrigger className="bg-primary-500/50" axis="s" />
						<FloatingPanel.ResizeTrigger className="bg-primary-500/50" axis="ne" />
						<FloatingPanel.ResizeTrigger className="bg-primary-500/50" axis="se" />
						<FloatingPanel.ResizeTrigger className="bg-primary-500/50" axis="sw" />
						<FloatingPanel.ResizeTrigger className="bg-primary-500/50" axis="nw" />
					</FloatingPanel.Content>
				</FloatingPanel.Positioner>
			</Portal>
		</FloatingPanel>
	);
}

```

## Disable Dragging

Disable dragging by setting the `draggable` prop to `false`. The panel will remain in a fixed position but can still be resized.

```tsx
import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';
import { GripVerticalIcon, XIcon, MinusIcon, MaximizeIcon, MinimizeIcon } from 'lucide-react';

export default function DisableDragging() {
	return (
		<FloatingPanel draggable={false}>
			<FloatingPanel.Trigger className="btn preset-filled">Open Panel</FloatingPanel.Trigger>
			<Portal>
				<FloatingPanel.Positioner className="z-50">
					<FloatingPanel.Content>
						<FloatingPanel.DragTrigger>
							<FloatingPanel.Header>
								<FloatingPanel.Title>
									<GripVerticalIcon className="size-4" />
									Fixed Position Panel
								</FloatingPanel.Title>
								<FloatingPanel.Control>
									<FloatingPanel.StageTrigger stage="minimized">
										<MinusIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="maximized">
										<MaximizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="default">
										<MinimizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.CloseTrigger>
										<XIcon className="size-4" />
									</FloatingPanel.CloseTrigger>
								</FloatingPanel.Control>
							</FloatingPanel.Header>
						</FloatingPanel.DragTrigger>
						<FloatingPanel.Body>
							<p>This panel cannot be dragged - the position is fixed.</p>
							<p>However, it can still be resized from the bottom-right corner.</p>
						</FloatingPanel.Body>
						<FloatingPanel.ResizeTrigger axis="se" />
					</FloatingPanel.Content>
				</FloatingPanel.Positioner>
			</Portal>
		</FloatingPanel>
	);
}

```

## Disable Resizing

Disable resizing by setting the `resizable` prop to `false`. The panel will have a fixed size but can still be dragged.

```tsx
import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';
import { GripVerticalIcon, XIcon, MinusIcon, MaximizeIcon, MinimizeIcon } from 'lucide-react';

export default function DisableResizing() {
	return (
		<FloatingPanel resizable={false}>
			<FloatingPanel.Trigger className="btn preset-filled">Open Panel</FloatingPanel.Trigger>
			<Portal>
				<FloatingPanel.Positioner className="z-50">
					<FloatingPanel.Content>
						<FloatingPanel.DragTrigger>
							<FloatingPanel.Header>
								<FloatingPanel.Title>
									<GripVerticalIcon className="size-4" />
									Fixed Size Panel
								</FloatingPanel.Title>
								<FloatingPanel.Control>
									<FloatingPanel.StageTrigger stage="minimized">
										<MinusIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="maximized">
										<MaximizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="default">
										<MinimizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.CloseTrigger>
										<XIcon className="size-4" />
									</FloatingPanel.CloseTrigger>
								</FloatingPanel.Control>
							</FloatingPanel.Header>
						</FloatingPanel.DragTrigger>
						<FloatingPanel.Body>
							<p>This panel cannot be resized.</p>
							<p>Try dragging the edges - they won't respond.</p>
						</FloatingPanel.Body>
						<FloatingPanel.ResizeTrigger axis="se" />
					</FloatingPanel.Content>
				</FloatingPanel.Positioner>
			</Portal>
		</FloatingPanel>
	);
}

```

## Direction

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

```tsx
import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';
import { GripVerticalIcon, XIcon, MinusIcon, MaximizeIcon, MinimizeIcon } from 'lucide-react';

export default function Dir() {
	return (
		<FloatingPanel dir="rtl">
			<FloatingPanel.Trigger className="btn preset-filled">Open Panel</FloatingPanel.Trigger>
			<Portal>
				<FloatingPanel.Positioner className="z-50">
					<FloatingPanel.Content>
						<FloatingPanel.DragTrigger>
							<FloatingPanel.Header>
								<FloatingPanel.Title>
									<GripVerticalIcon className="size-4" />
									Floating Panel
								</FloatingPanel.Title>
								<FloatingPanel.Control>
									<FloatingPanel.StageTrigger stage="minimized">
										<MinusIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="maximized">
										<MaximizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="default">
										<MinimizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.CloseTrigger>
										<XIcon className="size-4" />
									</FloatingPanel.CloseTrigger>
								</FloatingPanel.Control>
							</FloatingPanel.Header>
						</FloatingPanel.DragTrigger>
						<FloatingPanel.Body>
							<p>This is a floating panel with right-to-left (RTL) direction.</p>
							<p>You can drag it from the header or resize it from the bottom-right corner.</p>
						</FloatingPanel.Body>
						<FloatingPanel.ResizeTrigger axis="se" />
					</FloatingPanel.Content>
				</FloatingPanel.Positioner>
			</Portal>
		</FloatingPanel>
	);
}

```

## Anatomy

Here's an overview of how the Floating Panel component is structured in code:

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

export default function Anatomy() {
	return (
		<FloatingPanel>
			<FloatingPanel.Trigger />
			<Portal>
				<FloatingPanel.Positioner>
					<FloatingPanel.Content>
						<FloatingPanel.DragTrigger>
							<FloatingPanel.Header>
								<FloatingPanel.Title />
								<FloatingPanel.Control>
									<FloatingPanel.StageTrigger />
									<FloatingPanel.CloseTrigger />
								</FloatingPanel.Control>
							</FloatingPanel.Header>
						</FloatingPanel.DragTrigger>
						<FloatingPanel.Body />
						<FloatingPanel.ResizeTrigger />
					</FloatingPanel.Content>
				</FloatingPanel.Positioner>
			</Portal>
		</FloatingPanel>
	);
}
```

## API Reference

### Root

| Prop                | Description                                                                                                                               | Type                                                                                                             | Default |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------- |
| children            | -                                                                                                                                         | ReactNode                                                                                                        | -       |
| ids                 | The ids of the elements in the floating panel. Useful for composition.                                                                    | Partial\<\{ trigger: string; positioner: string; content: string; title: string; header: string; }> \| undefined | -       |
| translations        | The translations for the floating panel.                                                                                                  | IntlTranslations \| undefined                                                                                    | -       |
| strategy            | The strategy to use for positioning                                                                                                       | "absolute" \| "fixed" \| undefined                                                                               | "fixed" |
| allowOverflow       | Whether the panel should be strictly contained within the boundary when dragging                                                          | boolean \| undefined                                                                                             | true    |
| open                | The controlled open state of the panel                                                                                                    | boolean \| undefined                                                                                             | -       |
| defaultOpen         | The initial open state of the panel when rendered.&#xA;Use when you don't need to control the open state of the panel.                    | boolean \| undefined                                                                                             | false   |
| draggable           | Whether the panel is draggable                                                                                                            | boolean \| undefined                                                                                             | true    |
| resizable           | Whether the panel is resizable                                                                                                            | boolean \| undefined                                                                                             | true    |
| size                | The size of the panel                                                                                                                     | Size \| undefined                                                                                                | -       |
| defaultSize         | The default size of the panel                                                                                                             | Size \| undefined                                                                                                | -       |
| minSize             | The minimum size of the panel                                                                                                             | Size \| undefined                                                                                                | -       |
| maxSize             | The maximum size of the panel                                                                                                             | Size \| undefined                                                                                                | -       |
| position            | The controlled position of the panel                                                                                                      | Point \| undefined                                                                                               | -       |
| defaultPosition     | The initial position of the panel when rendered.&#xA;Use when you don't need to control the position of the panel.                        | Point \| undefined                                                                                               | -       |
| getAnchorPosition   | Function that returns the initial position of the panel when it is opened.&#xA;If provided, will be used instead of the default position. | ((details: AnchorPositionDetails) => Point) \| undefined                                                         | -       |
| lockAspectRatio     | Whether the panel is locked to its aspect ratio                                                                                           | boolean \| undefined                                                                                             | -       |
| closeOnEscape       | Whether the panel should close when the escape key is pressed                                                                             | boolean \| undefined                                                                                             | -       |
| getBoundaryEl       | The boundary of the panel. Useful for recalculating the boundary rect when&#xA;the it is resized.                                         | (() => HTMLElement \| null) \| undefined                                                                         | -       |
| initialFocusEl      | Element to receive focus when the panel is opened.&#xA;By default, the first focusable element in the content is focused.                 | (() => HTMLElement \| null) \| undefined                                                                         | -       |
| finalFocusEl        | Element to receive focus when the panel is closed.&#xA;By default, the trigger element is focused.                                        | (() => HTMLElement \| null) \| undefined                                                                         | -       |
| restoreFocus        | Whether to restore focus to the trigger when the panel is closed.                                                                         | boolean \| undefined                                                                                             | true    |
| disabled            | Whether the panel is disabled                                                                                                             | boolean \| undefined                                                                                             | -       |
| onPositionChange    | Function called when the position of the panel changes via dragging                                                                       | ((details: PositionChangeDetails) => void) \| undefined                                                          | -       |
| onPositionChangeEnd | Function called when the position of the panel changes via dragging ends                                                                  | ((details: PositionChangeDetails) => void) \| undefined                                                          | -       |
| onOpenChange        | Function called when the panel is opened or closed                                                                                        | ((details: OpenChangeDetails) => void) \| undefined                                                              | -       |
| onSizeChange        | Function called when the size of the panel changes via resizing                                                                           | ((details: SizeChangeDetails) => void) \| undefined                                                              | -       |
| onSizeChangeEnd     | Function called when the size of the panel changes via resizing ends                                                                      | ((details: SizeChangeDetails) => void) \| undefined                                                              | -       |
| persistRect         | Whether the panel size and position should be preserved when it is closed                                                                 | boolean \| undefined                                                                                             | -       |
| gridSize            | The snap grid for the panel                                                                                                               | number \| undefined                                                                                              | 1       |
| onStageChange       | Function called when the stage of the panel changes                                                                                       | ((details: StageChangeDetails) => 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                                                              | -       |

### Provider

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

### Context

| Prop     | Description | Type                                                       | Default |
| -------- | ----------- | ---------------------------------------------------------- | ------- |
| children | -           | (floatingPanel: FloatingPanelApi\<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 | -       |

### DragTrigger

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

### Header

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

### Control

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

### StageTrigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| stage   | The stage of the panel      | Stage                                                             | -       |
| 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 | -       |

### Body

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

### ResizeTrigger

| Prop    | Description                   | Type                                                           | Default |
| ------- | ----------------------------- | -------------------------------------------------------------- | ------- |
| axis    | The axis of the resize handle | ResizeTriggerAxis                                              | -       |
| element | Render the element yourself   | ((attributes: HTMLAttributes\<"div">) => 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>Select a food</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

Organize items into categorized 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.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

Set the `multiple` proper to allow selecting more than one 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 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.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

Set the `disabled` prop to enable the disabled state.

```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.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>
	);
}

```

Which can also be enabled per 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.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

Utilize the `Input` component to implement simple 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>Search for Food</Listbox.Label>
			<Listbox.Input placeholder="Type to search..." value={query} onInput={(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

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

```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>Select a food</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>
	);
}

```

## Anatomy

Here's an overview of how the Listbox component is structured in code:

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

export default function Anatomy() {
	return (
		<Listbox>
			<Listbox.Label />
			<Listbox.Content>
				<Listbox.Item>
					<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 | -       |

# Locale Provider

Provides locale context to components for controlling reading direction.

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

export default function App() {
	return <LocaleProvider locale="en-US">{/* your app */}</LocaleProvider>;
}
```

## Anatomy

Here's an overview of how the LocaleProvider component is structured in code:

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

export default function Anatomy() {
	return <LocaleProvider></LocaleProvider>;
}
```

## API Reference

### Root

| Prop     | Description                            | Type      | Default |
| -------- | -------------------------------------- | --------- | ------- |
| locale   | The locale to use for the application. | string    | 'en-US' |
| children | -                                      | ReactNode | -       |

### Context

| Prop     | Description | Type                          | Default |
| -------- | ----------- | ----------------------------- | ------- |
| children | -           | (locale: Locale) => ReactNode | -       |

# Marquee

Auto-scrolls content like logos, announcements, or featured items.

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

const items = [
	{ emoji: '🐉', label: 'Dragon' },
	{ emoji: '🧙', label: 'Wizard' },
	{ emoji: '⚔️', label: 'Knight' },
	{ emoji: '💀', label: 'Skeleton' },
	{ emoji: '🏰', label: 'Castle' },
	{ emoji: '🧝', label: 'Elf' },
	{ emoji: '🗡️', label: 'Rogue' },
	{ emoji: '🛡️', label: 'Paladin' },
];

export default function MarqueeDefault() {
	return (
		<Marquee autoFill pauseOnInteraction>
			<Marquee.Edge side="start" />
			<Marquee.Viewport>
				<Marquee.Context>
					{(marquee) =>
						Array.from({ length: marquee.contentCount }).map((_, index) => (
							<Marquee.Content key={index} index={index}>
								{items.map((item) => (
									<div key={item.label} className="card bg-surface-100-900 flex items-center gap-3 px-6 py-4 whitespace-nowrap">
										<span className="text-3xl">{item.emoji}</span>
										<span className="font-medium">{item.label}</span>
									</div>
								))}
							</Marquee.Content>
						))
					}
				</Marquee.Context>
			</Marquee.Viewport>
			<Marquee.Edge side="end" />
		</Marquee>
	);
}

```

## Usage

Access `contentCount` via `Marquee.Context` to render the correct number of content blocks. Zag handles duplication for seamless looping — your items only need to be written once inside `Marquee.Content`.

```svelte
<Marquee autoFill pauseOnInteraction>
	<Marquee.Edge side="start" />
	<Marquee.Viewport>
		<Marquee.Context>
			{#snippet children(marquee)}
				{#each Array.from({ length: marquee().contentCount }) as _, index}
					<Marquee.Content {index}>
						<!-- items here -->
					</Marquee.Content>
				{/each}
			{/snippet}
		</Marquee.Context>
	</Marquee.Viewport>
	<Marquee.Edge side="end" />
</Marquee>
```

## Controlled

Use `useMarquee` to control pause state from outside the component.

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

	const marquee = useMarquee(() => ({ autoFill: true, pauseOnInteraction: true }));
</script>

<button onclick={() => marquee().togglePause()}>Toggle Pause</button>
<Marquee.Provider value={marquee}>...</Marquee.Provider>
```

## Anatomy

Here's an overview of how the Marquee component is structured in code:

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

export default function Anatomy() {
	return (
		<Marquee>
			<Marquee.Edge side="start" />
			<Marquee.Viewport>
				<Marquee.Context>
					{(marquee) =>
						Array.from({ length: marquee.contentCount }).map((_, index) => (
							<Marquee.Content key={index} index={index}>
								{/* items */}
							</Marquee.Content>
						))
					}
				</Marquee.Context>
			</Marquee.Viewport>
			<Marquee.Edge side="end" />
		</Marquee>
	);
}
```

## API Reference

### Root

| Prop               | Description                                                                                                      | Type                                                                                            | Default |
| ------------------ | ---------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ------- |
| children           | -                                                                                                                | ReactNode                                                                                       | -       |
| ids                | The ids of the elements in the marquee. Useful for composition.                                                  | Partial\<\{ root: string; viewport: string; content: (index: number) => string; }> \| undefined | -       |
| translations       | The localized messages to use.                                                                                   | IntlTranslations \| undefined                                                                   | -       |
| side               | The side/direction the marquee scrolls towards.                                                                  | Side \| undefined                                                                               | "start" |
| speed              | The speed of the marquee animation in pixels per second.                                                         | number \| undefined                                                                             | 50      |
| delay              | The delay before the animation starts (in seconds).                                                              | number \| undefined                                                                             | 0       |
| loopCount          | The number of times to loop the animation (0 = infinite).                                                        | number \| undefined                                                                             | 0       |
| spacing            | The spacing between marquee items.                                                                               | string \| undefined                                                                             | "1rem"  |
| autoFill           | Whether to automatically duplicate content to fill the container.                                                | boolean \| undefined                                                                            | false   |
| pauseOnInteraction | Whether to pause the marquee on user interaction (hover, focus).                                                 | boolean \| undefined                                                                            | false   |
| reverse            | Whether to reverse the animation direction.                                                                      | boolean \| undefined                                                                            | false   |
| paused             | Whether the marquee is paused.                                                                                   | boolean \| undefined                                                                            | -       |
| defaultPaused      | Whether the marquee is paused by default.                                                                        | boolean \| undefined                                                                            | false   |
| onPauseChange      | Function called when the pause status changes.                                                                   | ((details: PauseStatusDetails) => void) \| undefined                                            | -       |
| onLoopComplete     | Function called when the marquee completes one loop iteration.                                                   | (() => void) \| undefined                                                                       | -       |
| onComplete         | Function called when the marquee completes all loops and stops.&#xA;Only fires for finite loops (loopCount > 0). | (() => 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    | -                           | MarqueeApi\<PropTypes>                                         | -       |
| children | -                           | ReactNode                                                      | -       |
| element  | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

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

### Viewport

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

### Content

| Prop     | Description                                                            | Type                                                           | Default |
| -------- | ---------------------------------------------------------------------- | -------------------------------------------------------------- | ------- |
| index    | The index of the content instance (0 for original, 1+ for duplicates). | number                                                         | -       |
| children | -                                                                      | ReactNode                                                      | -       |
| element  | Render the element yourself                                            | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Edge

| Prop     | Description                                     | Type                                                           | Default |
| -------- | ----------------------------------------------- | -------------------------------------------------------------- | ------- |
| side     | The side where the edge gradient should appear. | Side                                                           | -       |
| children | -                                               | ReactNode                                                      | -       |
| element  | Render the element yourself                     | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

# Menu

Accessible dropdown and context menus for actions and navigation.

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

export default function Default() {
	return (
		<Menu>
			<Menu.Trigger className="btn preset-filled">Open Menu</Menu.Trigger>
			<Portal>
				<Menu.Positioner>
					<Menu.Content>
						<Menu.Item value="new">
							<Menu.ItemText>New File</Menu.ItemText>
						</Menu.Item>
						<Menu.Item value="open">
							<Menu.ItemText>Open File</Menu.ItemText>
						</Menu.Item>
						<Menu.Separator />
						<Menu.Item value="save">
							<Menu.ItemText>Save</Menu.ItemText>
						</Menu.Item>
						<Menu.Item value="export">
							<Menu.ItemText>Export</Menu.ItemText>
						</Menu.Item>
					</Menu.Content>
				</Menu.Positioner>
			</Portal>
		</Menu>
	);
}

```

## Grouped Items

Use `ItemGroup` and `ItemGroupLabel` to organize menu items into logical sections.

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

export default function Group() {
	return (
		<Menu>
			<Menu.Trigger className="btn preset-filled">View Options</Menu.Trigger>
			<Portal>
				<Menu.Positioner>
					<Menu.Content>
						<Menu.ItemGroup>
							<Menu.ItemGroupLabel>View</Menu.ItemGroupLabel>
							<Menu.Separator />
							<Menu.Item value="split">
								<Menu.ItemText>Split View</Menu.ItemText>
							</Menu.Item>
							<Menu.Item value="fullscreen">
								<Menu.ItemText>Fullscreen</Menu.ItemText>
							</Menu.Item>
						</Menu.ItemGroup>
						<Menu.Separator />
						<Menu.ItemGroup>
							<Menu.ItemGroupLabel>Appearance</Menu.ItemGroupLabel>
							<Menu.Separator />

							<Menu.Item value="theme">
								<Menu.ItemText>Change Theme</Menu.ItemText>
							</Menu.Item>
							<Menu.Item value="zoom">
								<Menu.ItemText>Zoom</Menu.ItemText>
							</Menu.Item>
						</Menu.ItemGroup>
					</Menu.Content>
				</Menu.Positioner>
			</Portal>
		</Menu>
	);
}

```

## Context Menu

Use `ContextTrigger` instead of `Trigger` to open the menu on right-click.

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

export default function Context() {
	return (
		<Menu>
			<Menu.ContextTrigger className="card border border-dashed border-surface-200-800 p-8">Right-click here</Menu.ContextTrigger>
			<Portal>
				<Menu.Positioner>
					<Menu.Content>
						<Menu.Item value="cut">
							<Menu.ItemText>Cut</Menu.ItemText>
						</Menu.Item>
						<Menu.Item value="copy">
							<Menu.ItemText>Copy</Menu.ItemText>
						</Menu.Item>
						<Menu.Item value="paste">
							<Menu.ItemText>Paste</Menu.ItemText>
						</Menu.Item>
						<Menu.Separator />
						<Menu.Item value="delete">
							<Menu.ItemText>Delete</Menu.ItemText>
						</Menu.Item>
					</Menu.Content>
				</Menu.Positioner>
			</Portal>
		</Menu>
	);
}

```

## Nested Menu

Use the `TriggerItem` component to create nested menus within a parent menu.

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

export default function Nested() {
	return (
		<Menu>
			<Menu.Trigger className="btn preset-filled">Open Menu</Menu.Trigger>
			<Portal>
				<Menu.Positioner>
					<Menu.Content>
						<Menu>
							<Menu.TriggerItem value="new">
								<Menu.ItemText>New</Menu.ItemText>
								<Menu.ItemIndicator>
									<ChevronRightIcon className="size-4" />
								</Menu.ItemIndicator>
							</Menu.TriggerItem>
							<Portal>
								<Menu.Positioner>
									<Menu.Content>
										<Menu.Item value="project">
											<Menu.ItemText>New Project</Menu.ItemText>
										</Menu.Item>
										<Menu.Item value="file">
											<Menu.ItemText>New File</Menu.ItemText>
										</Menu.Item>
										<Menu.Item value="folder">
											<Menu.ItemText>New Folder</Menu.ItemText>
										</Menu.Item>
									</Menu.Content>
								</Menu.Positioner>
							</Portal>
						</Menu>
						<Menu.Item value="open">
							<Menu.ItemText>Open File</Menu.ItemText>
						</Menu.Item>
						<Menu.Separator />
						<Menu.Item value="save">
							<Menu.ItemText>Save</Menu.ItemText>
						</Menu.Item>
						<Menu.Item value="export">
							<Menu.ItemText>Export</Menu.ItemText>
						</Menu.Item>
					</Menu.Content>
				</Menu.Positioner>
			</Portal>
		</Menu>
	);
}

```

## Option Items

Use `OptionItem` to create menu items that can be toggled on or off with checkbox or radio group like behavior.

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

export default function Option() {
	const sortOptions = [
		{ value: 'newest', label: 'Newest' },
		{ value: 'popular', label: 'Most Popular' },
		{ value: 'rating', label: 'Highest Rated' },
	];

	const filterOptions = [
		{ value: 'free-shipping', label: 'Free Shipping' },
		{ value: 'in-stock', label: 'In Stock' },
		{ value: 'on-sale', label: 'On Sale' },
	];

	const [sort, setSort] = useState('newest');
	const [filters, setFilters] = useState<string[]>(['free-shipping', 'in-stock']);

	return (
		<Menu closeOnSelect={false}>
			<Menu.Trigger className="btn preset-filled">Open Menu</Menu.Trigger>
			<Portal>
				<Menu.Positioner>
					<Menu.Content>
						{sortOptions.map((item) => (
							<Menu.OptionItem
								key={item.value}
								type="radio"
								checked={sort === item.value}
								onCheckedChange={(checked) => setSort(checked ? item.value : '')}
								value={item.value}
							>
								<Menu.ItemText>{item.label}</Menu.ItemText>
								<Menu.ItemIndicator className="hidden data-[state=checked]:block">
									<CheckIcon className="size-4" />
								</Menu.ItemIndicator>
							</Menu.OptionItem>
						))}
						<Menu.Separator />
						{filterOptions.map((item) => (
							<Menu.OptionItem
								key={item.value}
								type="checkbox"
								checked={filters.includes(item.value)}
								onCheckedChange={(checked) =>
									setFilters((prev) => (checked ? [...prev, item.value] : prev.filter((x) => x !== item.value)))
								}
								value={item.value}
							>
								<Menu.ItemText>{item.label}</Menu.ItemText>
								<Menu.ItemIndicator className="hidden data-[state=checked]:block">
									<CheckIcon className="size-4" />
								</Menu.ItemIndicator>
							</Menu.OptionItem>
						))}
					</Menu.Content>
				</Menu.Positioner>
			</Portal>
		</Menu>
	);
}

```

## Disabled Item

Set the disabled prop to enable the disabled state.

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

export default function Disabled() {
	return (
		<Menu>
			<Menu.Trigger className="btn preset-filled">Open Menu</Menu.Trigger>
			<Portal>
				<Menu.Positioner>
					<Menu.Content>
						<Menu.Item value="new">
							<Menu.ItemText>New File</Menu.ItemText>
						</Menu.Item>
						<Menu.Item value="open">
							<Menu.ItemText>Open File</Menu.ItemText>
						</Menu.Item>
						<Menu.Separator />
						<Menu.Item value="save">
							<Menu.ItemText>Save</Menu.ItemText>
						</Menu.Item>
						<Menu.Item value="disabled" disabled={true}>
							<Menu.ItemText>Disabled</Menu.ItemText>
						</Menu.Item>
					</Menu.Content>
				</Menu.Positioner>
			</Portal>
		</Menu>
	);
}

```

## Anatomy

Here's an overview of how the Menu component is structured in code:

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

export default function Anatomy() {
	return (
		<Menu>
			<Menu.Trigger>
				<Menu.Indicator />
			</Menu.Trigger>
			<Menu.ContextTrigger>
				<Menu.Indicator />
			</Menu.ContextTrigger>
			<Menu.Positioner>
				<Menu.Content>
					<Menu.ItemGroup>
						<Menu.ItemGroupLabel />
						<Menu.Item>
							<Menu.ItemIndicator />
							<Menu.ItemText />
						</Menu.Item>
						<Menu.OptionItem>
							<Menu.ItemIndicator />
							<Menu.ItemText />
						</Menu.OptionItem>
						<Menu.TriggerItem>
							<Menu.ItemIndicator />
							<Menu.ItemText />
						</Menu.TriggerItem>
					</Menu.ItemGroup>
					<Menu.Separator />
					<Menu.Arrow>
						<Menu.ArrowTip />
					</Menu.Arrow>
				</Menu.Content>
			</Menu.Positioner>
		</Menu>
	);
}
```

## API Reference

### Root

| Prop                    | Description                                                                                                                                  | Type                                                                                                                                                                                                                                                                                  | Default |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| ids                     | The ids of the elements in the menu. Useful for composition.                                                                                 | Partial\<\{ trigger: string \| ((value?: string \| undefined) => string); contextTrigger: string \| ((value?: string \| undefined) => string); content: string; groupLabel: (id: string) => string; group: (id: string) => string; positioner: string; arrow: string; }> \| undefined | -       |
| defaultHighlightedValue | The initial highlighted value of the menu item when rendered.&#xA;Use when you don't need to control the highlighted value of the menu item. | string \| null \| undefined                                                                                                                                                                                                                                                           | -       |
| highlightedValue        | The controlled highlighted value of the menu item.                                                                                           | string \| null \| undefined                                                                                                                                                                                                                                                           | -       |
| onHighlightChange       | Function called when the highlighted menu item changes.                                                                                      | ((details: HighlightChangeDetails) => void) \| undefined                                                                                                                                                                                                                              | -       |
| onSelect                | Function called when a menu item is selected.                                                                                                | ((details: SelectionDetails) => void) \| undefined                                                                                                                                                                                                                                    | -       |
| anchorPoint             | The positioning point for the menu. Can be set by the context menu trigger or the button trigger.                                            | Point \| null \| undefined                                                                                                                                                                                                                                                            | -       |
| loopFocus               | Whether to loop the keyboard navigation.                                                                                                     | boolean \| undefined                                                                                                                                                                                                                                                                  | false   |
| positioning             | The options used to dynamically position the menu                                                                                            | PositioningOptions \| undefined                                                                                                                                                                                                                                                       | -       |
| closeOnSelect           | Whether to close the menu when an option is selected                                                                                         | boolean \| undefined                                                                                                                                                                                                                                                                  | true    |
| aria-label              | The accessibility label for the menu                                                                                                         | string \| undefined                                                                                                                                                                                                                                                                   | -       |
| open                    | The controlled open state of the menu                                                                                                        | boolean \| undefined                                                                                                                                                                                                                                                                  | -       |
| onOpenChange            | Function called when the menu opens or closes                                                                                                | ((details: OpenChangeDetails) => void) \| undefined                                                                                                                                                                                                                                   | -       |
| defaultOpen             | The initial open state of the menu when rendered.&#xA;Use when you don't need to control the open state of the menu.                         | boolean \| undefined                                                                                                                                                                                                                                                                  | -       |
| typeahead               | Whether the pressing printable characters should trigger typeahead navigation                                                                | boolean \| undefined                                                                                                                                                                                                                                                                  | true    |
| composite               | Whether the menu is a composed with other composite widgets like a combobox or tabs                                                          | boolean \| undefined                                                                                                                                                                                                                                                                  | true    |
| navigate                | Function to navigate to the selected item if it's an anchor element                                                                          | ((details: NavigateDetails) => void) \| null \| undefined                                                                                                                                                                                                                             | -       |
| triggerValue            | The controlled trigger value                                                                                                                 | string \| null \| undefined                                                                                                                                                                                                                                                           | -       |
| defaultTriggerValue     | The initial trigger value when rendered.&#xA;Use when you don't need to control the trigger value.                                           | string \| null \| undefined                                                                                                                                                                                                                                                           | -       |
| onTriggerValueChange    | Function called when the trigger value changes.                                                                                              | ((details: TriggerValueChangeDetails) => 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                                                                                                                                                                                                                                   | -       |
| 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                                                                                                                                                                                                                                  | -       |
| element                 | Render the element yourself                                                                                                                  | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                                                                                                                                                        | -       |

### Provider

| Prop     | Description | Type                                             | Default |
| -------- | ----------- | ------------------------------------------------ | ------- |
| value    | -           | MenuApi\<PropTypes> & \{ service: MenuService; } | -       |
| children | -           | ReactNode                                        | -       |

### Context

| Prop     | Description | Type                                                                  | Default |
| -------- | ----------- | --------------------------------------------------------------------- | ------- |
| children | -           | (menu: MenuApi\<PropTypes> & \{ service: MenuService; }) => ReactNode | -       |

### Trigger

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

### ContextTrigger

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

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

### 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 |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------- |
| value         | The unique value of the menu item option.                                                                                                       | string                                                         | -       |
| disabled      | Whether the menu item is disabled                                                                                                               | boolean \| undefined                                           | -       |
| valueText     | The textual value of the option. Used in typeahead navigation of the menu.&#xA;If not provided, the text content of the menu item will be used. | string \| undefined                                            | -       |
| closeOnSelect | Whether the menu should be closed when the option is selected.                                                                                  | boolean \| undefined                                           | -       |
| element       | Render the element yourself                                                                                                                     | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### OptionItem

| Prop            | Description                                                                                                                                     | Type                                                           | Default |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------- |
| checked         | Whether the option is checked                                                                                                                   | boolean                                                        | -       |
| type            | Whether the option is a radio or a checkbox                                                                                                     | "radio" \| "checkbox"                                          | -       |
| value           | The value of the option                                                                                                                         | string                                                         | -       |
| onCheckedChange | Function called when the option state is changed                                                                                                | ((checked: boolean) => void) \| undefined                      | -       |
| disabled        | Whether the menu item is disabled                                                                                                               | boolean \| undefined                                           | -       |
| valueText       | The textual value of the option. Used in typeahead navigation of the menu.&#xA;If not provided, the text content of the menu item will be used. | string \| undefined                                            | -       |
| closeOnSelect   | Whether the menu should be closed when the option is selected.                                                                                  | boolean \| undefined                                           | -       |
| element         | Render the element yourself                                                                                                                     | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### TriggerItem

| Prop          | Description                                                                                                                                     | Type                                                           | Default |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------- |
| value         | The unique value of the menu item option.                                                                                                       | string                                                         | -       |
| disabled      | Whether the menu item is disabled                                                                                                               | boolean \| undefined                                           | -       |
| valueText     | The textual value of the option. Used in typeahead navigation of the menu.&#xA;If not provided, the text content of the menu item will be used. | string \| undefined                                            | -       |
| closeOnSelect | Whether the menu should be closed when the option is selected.                                                                                  | boolean \| undefined                                           | -       |
| element       | Render the element yourself                                                                                                                     | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### ItemText

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

### ItemIndicator

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

### Separator

| Prop    | Description                 | Type                                                          | Default |
| ------- | --------------------------- | ------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"hr">) => 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 | -       |

# Navigation

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

## Bar

```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 },
	];

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

```

* 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).

## Rail

```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 },
	];

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

```

* 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.

## Sidebar

```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 },
		],
	};

	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>
					<Navigation.TriggerAnchor href="https://www.skeleton.dev">
						<SkullIcon className="size-6" />
					</Navigation.TriggerAnchor>
				</Navigation.Header>
				<Navigation.Content>
					<Navigation.Group>
						<Navigation.Menu>
							<Navigation.TriggerAnchor href="/">
								<HouseIcon className="size-4" />
								<Navigation.TriggerText>Home</Navigation.TriggerText>
							</Navigation.TriggerAnchor>
						</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 (
										<Navigation.TriggerAnchor key={link.label} title={link.label} aria-label={link.label}>
											<Icon className="size-4" />
											<Navigation.TriggerText>{link.label}</Navigation.TriggerText>
										</Navigation.TriggerAnchor>
									);
								})}
							</Navigation.Menu>
						</Navigation.Group>
					))}
				</Navigation.Content>
				<Navigation.Footer>
					<Navigation.TriggerAnchor href="/" title="Settings" aria-label="Settings">
						<SettingsIcon className="size-4" />
						<Navigation.TriggerText>Settings</Navigation.TriggerText>
					</Navigation.TriggerAnchor>
				</Navigation.Footer>
			</Navigation>
			<div className="flex justify-center items-center">
				<p className="opacity-50">Contents</p>
			</div>
		</div>
	);
}

```

* 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.

## 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 },
	];

	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.Header>
						<Navigation.Trigger onClick={toggleLayout}>
							<ArrowLeftRightIcon className={layoutRail ? 'size-5' : 'size-4'} />
							{!layoutRail ? <span>Resize</span> : ''}
						</Navigation.Trigger>
					</Navigation.Header>
					<Navigation.Menu>
						{links.map((link) => {
							const Icon = link.icon;
							return (
								<Navigation.TriggerAnchor key={link.label}>
									<Icon className={layoutRail ? 'size-5' : 'size-4'} />
									<Navigation.TriggerText>{link.label}</Navigation.TriggerText>
								</Navigation.TriggerAnchor>
							);
						})}
					</Navigation.Menu>
				</Navigation.Content>
			</Navigation>
			<div className="flex justify-center items-center">
				<p className="opacity-50">Contents</p>
			</div>
		</div>
	);
}

```

## Anatomy

Here's an overview of how the Navigation component is structured in code:

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

export default function Anatomy() {
	return (
		<Navigation>
			<Navigation.Header />
			<Navigation.Content>
				<Navigation.Group>
					<Navigation.Label />
					<Navigation.Menu>
						<Navigation.Trigger>
							<Navigation.TriggerText />
						</Navigation.Trigger>
						<Navigation.TriggerAnchor>
							<Navigation.TriggerText />
						</Navigation.TriggerAnchor>
					</Navigation.Menu>
				</Navigation.Group>
			</Navigation.Content>
			<Navigation.Footer />
		</Navigation>
	);
}
```

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

### Trigger

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

### TriggerAnchor

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

### TriggerText

| Prop    | Description                 | Type                                                            | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => 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 { users } from './data';
import { Pagination } from '@skeletonlabs/skeleton-react';
import { ArrowRightIcon, ArrowLeftIcon } from 'lucide-react';
import { useState } from 'react';

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 paginatedUsers = 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>
					{paginatedUsers.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>
	);
}

```

```ts
import { faker } from '@faker-js/faker';

faker.seed(0);

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

```

## Page Size

Implement a custom page `pageSize` amount using a select element.

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

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

	const start = (page - 1) * pageSize;
	const end = start + pageSize;
	const paginatedUsers = 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>
					{paginatedUsers.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>
	);
}

```

```ts
import { faker } from '@faker-js/faker';

faker.seed(0);

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

```

## Direction

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

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

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 paginatedUsers = 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>
					{paginatedUsers.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>
	);
}

```

```ts
import { faker } from '@faker-js/faker';

faker.seed(0);

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

```

## 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,
	}
}
```

{/* prettier-ignore */}

```html
<Pagination
	page={res.pagination.page}
	count={res.pagination.count}
	pageSize={res.pagination.limit}
>
	<!-- ... -->
</Pagination>
```

## Anatomy

Here's an overview of how the Pagination component is structured in code:

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

export default function Anatomy() {
	return (
		<Pagination>
			<Pagination.FirstTrigger />
			<Pagination.PrevTrigger />
			<Pagination.Item />
			<Pagination.Ellipsis />
			<Pagination.NextTrigger />
			<Pagination.LastTrigger />
		</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; firstTrigger: string; prevTrigger: string; nextTrigger: string; lastTrigger: 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        |
| boundaryCount    | Number of pages to show at the beginning and end                                                                                 | 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 { Avatar, Popover, Portal } from '@skeletonlabs/skeleton-react';
import { XIcon } from 'lucide-react';

export default function Default() {
	return (
		<Popover>
			<Popover.Trigger className="btn preset-filled">Trigger</Popover.Trigger>
			<Portal>
				<Popover.Positioner>
					<Popover.Content className="card w-96 p-4 bg-surface-100-900 shadow-xl">
						<div className="space-y-4">
							<header className="grid grid-cols-[auto_1fr_auto] gap-4 items-center">
								<Avatar>
									<Avatar.Image
										src="https://cdn.bsky.app/img/avatar/plain/did:plc:whtgi5zx7ylmdw2i76vq7vq4/bafkreibgoxuqahwcpiah22yfovqszh33x2u4sysmqoyuk5j54aoakt7364@jpeg"
										alt="Skeleton Labs"
									/>
								</Avatar>
								<div>
									<Popover.Title className="text-lg font-bold">Skeleton Labs</Popover.Title>
									<a href="https://bsky.app/profile/skeleton.dev" target="_blank" rel="noopener noreferrer" className="anchor">
										@skeletonlabs.dev
									</a>
								</div>
								<Popover.CloseTrigger className="btn-icon hover:preset-tonal self-start">
									<XIcon className="size-4" />
								</Popover.CloseTrigger>
							</header>
							<Popover.Description>Your friendly neighborhood open source maintainers. Creators of Skeleton.</Popover.Description>
							<div className="flex gap-4">
								<p className="text-sm">
									800 <span className="opacity-60">Followers</span>
								</p>
								<p className="text-sm">
									120 <span className="opacity-60">Following</span>
								</p>
								<p className="text-sm">
									100 <span className="opacity-60">Posts</span>
								</p>
							</div>
						</div>
						<Popover.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
							<Popover.ArrowTip />
						</Popover.Arrow>
					</Popover.Content>
				</Popover.Positioner>
			</Portal>
		</Popover>
	);
}

```

Breaking convention in Skeleton, this component is provided "headless". Meaning no default styles are applied out of the box. This ensures you retain full control of all styling for maximum flexibility.

## Anchor

Use the `Anchor` component to position the popover contents relative to an element other than the trigger.

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

export default function Anchor() {
	return (
		<Popover>
			<div className="flex items-center gap-4">
				<Popover.Anchor>
					<Avatar>
						<Avatar.Image
							src="https://cdn.bsky.app/img/avatar/plain/did:plc:whtgi5zx7ylmdw2i76vq7vq4/bafkreibgoxuqahwcpiah22yfovqszh33x2u4sysmqoyuk5j54aoakt7364@jpeg"
							alt="Skeleton Labs"
						/>
					</Avatar>
				</Popover.Anchor>
				<Popover.Trigger className="btn preset-filled">Show Profile</Popover.Trigger>
			</div>
			<Portal>
				<Popover.Positioner>
					<Popover.Content className="card w-96 p-4 bg-surface-100-900 shadow-xl">
						<div className="space-y-4">
							<header className="grid grid-cols-[auto_1fr_auto] gap-4 items-center">
								<Avatar>
									<Avatar.Image
										src="https://cdn.bsky.app/img/avatar/plain/did:plc:whtgi5zx7ylmdw2i76vq7vq4/bafkreibgoxuqahwcpiah22yfovqszh33x2u4sysmqoyuk5j54aoakt7364@jpeg"
										alt="Skeleton Labs"
									/>
								</Avatar>
								<div>
									<Popover.Title className="text-lg font-bold">Skeleton Labs</Popover.Title>
									<a href="https://bsky.app/profile/skeleton.dev" target="_blank" rel="noopener noreferrer" className="anchor">
										@skeletonlabs.dev
									</a>
								</div>
								<Popover.CloseTrigger className="btn-icon hover:preset-tonal self-start">
									<XIcon className="size-4" />
								</Popover.CloseTrigger>
							</header>
							<Popover.Description>Your friendly neighborhood open source maintainers. Creators of Skeleton.</Popover.Description>
							<div className="flex gap-4">
								<p className="text-sm">
									800 <span className="opacity-60">Followers</span>
								</p>
								<p className="text-sm">
									120 <span className="opacity-60">Following</span>
								</p>
								<p className="text-sm">
									100 <span className="opacity-60">Posts</span>
								</p>
							</div>
						</div>
						<Popover.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
							<Popover.ArrowTip />
						</Popover.Arrow>
					</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">
						<Popover.Description>This example will have a small arrow.</Popover.Description>
						<Popover.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
							<Popover.ArrowTip />
						</Popover.Arrow>
					</Popover.Content>
				</Popover.Positioner>
			</Portal>
		</Popover>
	);
}

```

## Z-Index

By default Skeleton does 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.

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

Use the [Provider Pattern](/docs/\[framework]/get-started/fundamentals#provider-pattern) to gain access to the inner component APIs.

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

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

```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>
	);
}

```

## Anatomy

Here's an overview of how the Popover component is structured in code:

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

export default function Anatomy() {
	return (
		<Popover>
			<Popover.Anchor />
			<Popover.Trigger />
			<Portal>
				<Popover.Positioner>
					<Popover.Content>
						<Popover.Title />
						<Popover.Description />
						<Popover.CloseTrigger />
						<Popover.Arrow>
							<Popover.ArrowTip />
						</Popover.Arrow>
					</Popover.Content>
				</Popover.Positioner>
			</Portal>
		</Popover>
	);
}
```

## API Reference

### Root

| Prop                   | Description                                                                                                                                                                                                                                           | Type                                                                                                                                                                                                                    | Default |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| children               | -                                                                                                                                                                                                                                                     | ReactNode                                                                                                                                                                                                               | -       |
| translations           | Specifies the localized strings that identifies the accessibility elements and their states                                                                                                                                                           | IntlTranslations \| undefined                                                                                                                                                                                           | -       |
| ids                    | The ids of the elements in the popover. Useful for composition.                                                                                                                                                                                       | Partial\<\{ anchor: string; trigger: string \| ((value?: string \| undefined) => 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    |
| autoFocus              | Whether to automatically set focus on the first focusable&#xA;content within the popover when opened.                                                                                                                                                 | boolean \| undefined                                                                                                                                                                                                    | true    |
| initialFocusEl         | The element to focus on when the popover is opened.                                                                                                                                                                                                   | (() => HTMLElement \| null) \| undefined                                                                                                                                                                                | -       |
| finalFocusEl           | Element to receive focus when the popover is closed.                                                                                                                                                                                                  | (() => MaybeElement) \| undefined                                                                                                                                                                                       | -       |
| restoreFocus           | Whether to restore focus to the element that had focus before the popover was opened.                                                                                                                                                                 | boolean \| undefined                                                                                                                                                                                                    | true    |
| 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                                                                                                                                                                                                    | -       |
| triggerValue           | The controlled trigger value                                                                                                                                                                                                                          | string \| null \| undefined                                                                                                                                                                                             | -       |
| defaultTriggerValue    | The initial trigger value when rendered.&#xA;Use when you don't need to control the trigger value.                                                                                                                                                    | string \| null \| undefined                                                                                                                                                                                             | -       |
| onTriggerValueChange   | Function called when the trigger value changes.                                                                                                                                                                                                       | ((details: TriggerValueChangeDetails) => void) \| 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"   |
| 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 | -       |

### Anchor

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

### 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.

## Anatomy

Here's an overview of how the Portal component is structured in code:

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

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

## 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 */}
			<Progress value={value} className="items-center w-fit">
				<Progress.Label>Progress</Progress.Label>
				<Progress.Circle>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
				<Progress.ValueText />
			</Progress>

			{/* Control */}
			<Slider className="w-full" value={[value]} onValueChange={(e) => setValue(e.value[0])} step={10}>
				<Slider.Control>
					<Slider.Track>
						<Slider.Range className="bg-transparent" />
					</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';

export default function Size() {
	return (
		<div className="flex gap-4 justify-evenly items-center w-full">
			<Progress value={75} className="w-fit">
				<Progress.Circle className="[--size:--spacing(16)]">
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
			</Progress>
			<Progress value={75}>
				<Progress.Circle>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
			</Progress>
			<Progress value={75} className="w-fit">
				<Progress.Circle className="[--size:--spacing(32)]">
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
			</Progress>
		</div>
	);
}

```

## Color

Change the track and indicator color 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-50-950" />
					<Progress.CircleRange className="stroke-primary-500" />
				</Progress.Circle>
			</Progress>
			<Progress value={40} className="w-fit">
				<Progress.Circle>
					<Progress.CircleTrack className="stroke-secondary-50-950" />
					<Progress.CircleRange className="stroke-secondary-500" />
				</Progress.Circle>
			</Progress>
			<Progress value={40} className="w-fit">
				<Progress.Circle>
					<Progress.CircleTrack className="stroke-tertiary-50-950" />
					<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

Set 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>
	);
}

```

## Anatomy

Here's an overview of how the Progress (Circular) component is structured in code:

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

export default function Anatomy() {
	return (
		<Progress>
			<Progress.Label />
			<Progress.Circle>
				<Progress.CircleTrack />
				<Progress.CircleRange />
			</Progress.Circle>
			<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, Slider } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

export default function Default() {
	const [value, setValue] = useState(50);

	return (
		<div className="w-full space-y-8">
			{/* Progress */}
			<Progress value={value} className="grid grid-cols-[auto_1fr] items-center gap-4">
				<Progress.Label className="text-sm">{value}%</Progress.Label>
				<Progress.Track>
					<Progress.Range />
				</Progress.Track>
			</Progress>

			{/* Control */}
			<Slider className="w-32 mx-auto" value={[value]} onValueChange={(e) => setValue(e.value[0])} step={10}>
				<Slider.Control>
					<Slider.Track>
						<Slider.Range className="bg-transparent" />
					</Slider.Track>
					<Slider.Thumb index={0}>
						<Slider.HiddenInput />
					</Slider.Thumb>
				</Slider.Control>
			</Slider>
		</div>
	);
}

```

## Color

Change the track and range color 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 w-full flex-col gap-8">
			<Progress>
				<Progress.Track className="bg-primary-50-950">
					<Progress.Range className="bg-primary-500" />
				</Progress.Track>
			</Progress>
			<Progress>
				<Progress.Track className="bg-secondary-50-950">
					<Progress.Range className="bg-secondary-500" />
				</Progress.Track>
			</Progress>
			<Progress>
				<Progress.Track className="bg-tertiary-50-950">
					<Progress.Range className="bg-tertiary-500" />
				</Progress.Track>
			</Progress>
		</div>
	);
}

```

## Height

Create variations using different heights.

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

Using the `orientation` prop to control the layout.

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

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

```

## Indeterminate

Set a `null` value to enable indeterminate mode.

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

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

```

Use CSS to enable custom animations.

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

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

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

Skeleton also provides styles for the native [Progress](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress) element.

```tsx
export default function Native() {
	return <progress className="progress" value="50" max="100" />;
}

```

## Anatomy

Here's an overview of how the Progress (Linear) component is structured in code:

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

export default function Anatomy() {
	return (
		<Progress>
			<Progress.Label />
			<Progress.Track>
				<Progress.Range />
			</Progress.Track>
			<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 | -       |

# QR Code

Render scannable QR codes with a frame, overlay, pattern, and download trigger.

```tsx
import { QrCode } from '@skeletonlabs/skeleton-react';
import favicon from '@/assets/favicon.png';

export default function Default() {
	return (
		<QrCode value="https://skeleton.dev">
			<QrCode.Frame className="size-full max-size-36">
				<QrCode.Pattern />
			</QrCode.Frame>
			<QrCode.Overlay className="bg-white rounded-full p-1">
				<img src={favicon.src} alt="Skeleton Logo" className="size-12" />
			</QrCode.Overlay>
			<QrCode.DownloadTrigger fileName="skeleton-dev" mimeType="image/png">
				Download
			</QrCode.DownloadTrigger>
		</QrCode>
	);
}

```

## Frame Colors

Use brand color for the frame and a contrasting fill for the QR pattern.

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

export default function FrameColors() {
	return (
		<QrCode value="https://skeleton.dev">
			<QrCode.Frame className="size-full max-size-36 bg-brand-dark">
				<QrCode.Pattern className="fill-brand-contrast-dark" />
			</QrCode.Frame>
			<QrCode.Overlay />
		</QrCode>
	);
}

```

## Overlay

Demonstrates an overlay with an icon and a contrasting square background to separate it visually from the pattern.

```tsx
import { QrCode } from '@skeletonlabs/skeleton-react';
import favicon from '@/assets/favicon.png';

export default function OverlayDemo() {
	return (
		<QrCode value="https://skeleton.dev">
			<QrCode.Frame className="size-full max-size-36">
				<QrCode.Pattern />
			</QrCode.Frame>
			<QrCode.Overlay className="bg-white rounded-full p-1">
				<img src={favicon.src} alt="Skeleton Logo" className="size-12" />
			</QrCode.Overlay>
		</QrCode>
	);
}

```

## Clickable Download

Wrap the visual frame/pattern in the download trigger so clicking the code initiates a download.

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

export default function ClickableDownload() {
	return (
		<QrCode value="https://skeleton.dev">
			<QrCode.DownloadTrigger fileName="skeleton-dev" mimeType="image/png">
				<QrCode.Frame className="size-full max-size-36">
					<QrCode.Pattern />
				</QrCode.Frame>
			</QrCode.DownloadTrigger>
			<QrCode.Overlay />
		</QrCode>
	);
}

```

## Anatomy

Here's an overview of how the QrCode component is structured in code:

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

export default function Anatomy() {
	return (
		<QrCode value="https://skeleton.dev">
			<QrCode.Frame>
				<QrCode.Pattern />
			</QrCode.Frame>
			<QrCode.Overlay />
			<QrCode.DownloadTrigger />
		</QrCode>
	);
}
```

## API Reference

### Root

| Prop          | Description                                                                                                 | Type                                                           | Default |
| ------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------- |
| value         | The controlled value to encode.                                                                             | string \| undefined                                            | -       |
| defaultValue  | The initial value to encode when rendered.&#xA;Use when you don't need to control the value of the qr code. | string \| undefined                                            | -       |
| ids           | The element ids.                                                                                            | Partial\<\{ root: string; frame: string; }> \| undefined       | -       |
| encoding      | The qr code encoding options.                                                                               | QrCodeGenerateOptions \| undefined                             | -       |
| onValueChange | Callback fired when the value changes.                                                                      | ((details: ValueChangeDetails) => void) \| undefined           | -       |
| pixelSize     | The pixel size of the qr code.                                                                              | 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   | -                           | QrCodeApi\<PropTypes>                                          | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

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

### DownloadTrigger

| Prop     | Description                 | Type                                                              | Default |
| -------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| mimeType | The mime type of the image. | DataUrlType                                                       | -       |
| quality  | The quality of the image.   | number \| undefined                                               | -       |
| fileName | The name of the file.       | string                                                            | -       |
| element  | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### Frame

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

### Pattern

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

### Overlay

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => 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} defaultValue={3}>
			<RatingGroup.Control>
				<RatingGroup.Context>
					{(ratingGroup) => ratingGroup.items.map((index) => <RatingGroup.Item key={index} index={index} />)}
				</RatingGroup.Context>
			</RatingGroup.Control>
			<RatingGroup.HiddenInput />
		</RatingGroup>
	);
}

```

## Half Step

Set the `allowHalf` prop to enable half steps.

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

Insert your own custom images or icons for the `empty` and `full` states.

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

Use the `Label` component to describe the intended usage.

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

Set the `disabled` prop to enable the disabled state.

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

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

```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>
	);
}

```

## Anatomy

Here's an overview of how the RatingGroup component is structured in code:

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

export default function Anatomy() {
	return (
		<RatingGroup>
			<RatingGroup.Label />
			<RatingGroup.Control>
				<RatingGroup.Item />
			</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';
import { useState } from 'react';

export default function Default() {
	const [value, setValue] = useState<string | null>('music');

	return (
		<div className="flex flex-col items-center gap-4">
			<SegmentedControl value={value} onValueChange={(details) => setValue(details.value)}>
				<SegmentedControl.Label>Label</SegmentedControl.Label>
				<SegmentedControl.Control>
					<SegmentedControl.Indicator />
					<SegmentedControl.Item value="music">
						<SegmentedControl.ItemText>Music</SegmentedControl.ItemText>
						<SegmentedControl.ItemHiddenInput />
					</SegmentedControl.Item>
					<SegmentedControl.Item value="images">
						<SegmentedControl.ItemText>Images</SegmentedControl.ItemText>
						<SegmentedControl.ItemHiddenInput />
					</SegmentedControl.Item>
					<SegmentedControl.Item value="videos">
						<SegmentedControl.ItemText>Videos</SegmentedControl.ItemText>
						<SegmentedControl.ItemHiddenInput />
					</SegmentedControl.Item>
				</SegmentedControl.Control>
			</SegmentedControl>

			{/* Message */}
			<p>
				<span className="opacity-60">You selected</span> <code className="code">{value}</code>
			</p>
		</div>
	);
}

```

## Icons

To adhere to accessibility best practices, include `title` and `aria-label` when using icon labels.

```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" title="start" aria-label="start">
					<SegmentedControl.ItemText>
						<AlignStartVerticalIcon className="size-4" />
					</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
				<SegmentedControl.Item value="center" title="left" aria-label="left">
					<SegmentedControl.ItemText>
						<AlignCenterVerticalIcon className="size-4" />
					</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
				<SegmentedControl.Item value="end" title="end" aria-label="end">
					<SegmentedControl.ItemText>
						<AlignEndVerticalIcon className="size-4" />
					</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
			</SegmentedControl.Control>
		</SegmentedControl>
	);
}

```

## Orientation

Using the `orientation` prop to control the layout.

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

export default function Orientation() {
	return (
		<SegmentedControl defaultValue="music" orientation="vertical">
			<SegmentedControl.Control>
				<SegmentedControl.Indicator />
				<SegmentedControl.Item value="music">
					<SegmentedControl.ItemText>Music</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
				<SegmentedControl.Item value="images">
					<SegmentedControl.ItemText>Images</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
				<SegmentedControl.Item value="videos">
					<SegmentedControl.ItemText>Videos</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
			</SegmentedControl.Control>
		</SegmentedControl>
	);
}

```

## Anatomy

Here's an overview of how the SegmentedControl component is structured in code:

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

export default function Anatomy() {
	return (
		<SegmentedControl>
			<SegmentedControl.Label />
			<SegmentedControl.Control>
				<SegmentedControl.Indicator />
				<SegmentedControl.Item>
					<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                                                                                                                                                                                                                   | -       |
| invalid       | If \`true\`, the radio group is marked as invalid.                                                                         | boolean \| undefined                                                                                                                                                                                                                   | -       |
| required      | If \`true\`, the radio group is marked as required.                                                                        | boolean \| undefined                                                                                                                                                                                                                   | -       |
| readOnly      | Whether the radio group 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

Change the track, range, and thumb color using utility classes or custom CSS variables to match your design system.

```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 className="bg-primary-50-950">
						<Slider.Range className="bg-primary-500" />
					</Slider.Track>
					<Slider.Thumb index={0} className="ring-primary-500">
						<Slider.HiddenInput />
					</Slider.Thumb>
				</Slider.Control>
			</Slider>
			<Slider defaultValue={[50]}>
				<Slider.Control>
					<Slider.Track className="bg-secondary-50-950">
						<Slider.Range className="bg-secondary-500" />
					</Slider.Track>
					<Slider.Thumb index={0} className="ring-secondary-500">
						<Slider.HiddenInput />
					</Slider.Thumb>
				</Slider.Control>
			</Slider>
			<Slider defaultValue={[50]}>
				<Slider.Control>
					<Slider.Track className="bg-tertiary-50-950">
						<Slider.Range className="bg-tertiary-500" />
					</Slider.Track>
					<Slider.Thumb index={0} className="ring-tertiary-500">
						<Slider.HiddenInput />
					</Slider.Thumb>
				</Slider.Control>
			</Slider>
		</div>
	);
}

```

## Disabled

Set the `disabled` prop to enable the disabled state.

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

Set the `readOnly` prop to enable the disabled state.

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

Set a `value` array of two values to enable start and end 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

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

```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>
	);
}

```

## Anatomy

Here's an overview of how the Slider component is structured in code:

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

export default function Anatomy() {
	return (
		<Slider>
			<Slider.Label />
			<Slider.Control>
				<Slider.Track>
					<Slider.Range />
				</Slider.Track>
				<Slider.Thumb>
					<Slider.HiddenInput />
				</Slider.Thumb>
			</Slider.Control>
			<Slider.MarkerGroup>
				<Slider.Marker />
			</Slider.MarkerGroup>
			<Slider.ValueText />
		</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                                                                                                                                                                                        | -            |
| thumbCollisionBehavior | Controls how thumbs behave when they collide during pointer interactions.&#xA;- \`none\` (default): Thumbs cannot move past each other; excess movement is ignored.&#xA;- \`push\`: Thumbs push each other without restoring their previous positions when dragged back.&#xA;- \`swap\`: Thumbs swap places when dragged past each other. | "none" \| "push" \| "swap" \| undefined                                                                                                                                                                                                 | "none"       |
| 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 | -       |

# Steps

Use steps to guide users through a multi-step process.

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

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

export default function Default() {
	return (
		<Steps count={steps.length} className="w-full">
			<Steps.List>
				{steps.map((item, index) => (
					<Steps.Item key={index} index={index}>
						<Steps.Trigger>
							<Steps.Indicator>{index + 1}</Steps.Indicator> {item.title}
						</Steps.Trigger>
						{index < steps.length - 1 && <Steps.Separator />}
					</Steps.Item>
				))}
			</Steps.List>
			{steps.map((item, index) => (
				<Steps.Content key={index} index={index} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
					{item.content}
				</Steps.Content>
			))}
			<Steps.Content index={steps.length} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
				All done!
			</Steps.Content>
			<div className="flex justify-between items-center gap-2">
				<Steps.PrevTrigger className="btn preset-filled">Back</Steps.PrevTrigger>
				<Steps.NextTrigger className="btn preset-filled">Next</Steps.NextTrigger>
			</div>
		</Steps>
	);
}

```

## Controlled

Use the `step` and `onStepChange` props to control state programmatically.

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

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

export default function Default() {
	const [step, setStep] = useState(0);
	return (
		<Steps step={step} onStepChange={(details) => setStep(details.step)} count={steps.length} className="w-full">
			<Steps.List>
				{steps.map((item, index) => (
					<Steps.Item key={index} index={index}>
						<Steps.Trigger>
							<Steps.Indicator>{index + 1}</Steps.Indicator> {item.title}
						</Steps.Trigger>
						{index < steps.length - 1 && <Steps.Separator />}
					</Steps.Item>
				))}
			</Steps.List>
			{steps.map((item, index) => (
				<Steps.Content key={index} index={index} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
					{item.content}
				</Steps.Content>
			))}
			<Steps.Content index={steps.length} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
				All done!
			</Steps.Content>
			<div className="flex justify-between items-center gap-2">
				<Steps.PrevTrigger className="btn preset-filled">Back</Steps.PrevTrigger>
				<Steps.NextTrigger className="btn preset-filled">Next</Steps.NextTrigger>
			</div>
		</Steps>
	);
}

```

## Orientation

Using the `orientation` prop to control the layout.

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

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

export default function Default() {
	return (
		<Steps orientation="vertical" count={steps.length} className="w-full h-48">
			<Steps.List>
				{steps.map((item, index) => (
					<Steps.Item key={index} index={index}>
						<Steps.Trigger>
							<Steps.Indicator>{index + 1}</Steps.Indicator> {item.title}
						</Steps.Trigger>
						{index < steps.length - 1 && <Steps.Separator />}
					</Steps.Item>
				))}
			</Steps.List>
			<div className="flex flex-col grow gap-4">
				{steps.map((item, index) => (
					<Steps.Content key={index} index={index} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center grow">
						{item.content}
					</Steps.Content>
				))}
				<Steps.Content index={steps.length} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center grow">
					All done!
				</Steps.Content>
				<div className="flex justify-between items-center gap-2">
					<Steps.PrevTrigger className="btn preset-filled">Back</Steps.PrevTrigger>
					<Steps.NextTrigger className="btn preset-filled">Next</Steps.NextTrigger>
				</div>
			</div>
		</Steps>
	);
}

```

## Direction

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

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

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

export default function Default() {
	return (
		<Steps dir="rtl" count={steps.length} className="w-full">
			<Steps.List>
				{steps.map((item, index) => (
					<Steps.Item key={index} index={index}>
						<Steps.Trigger>
							<Steps.Indicator>{index + 1}</Steps.Indicator> {item.title}
						</Steps.Trigger>
						{index < steps.length - 1 && <Steps.Separator />}
					</Steps.Item>
				))}
			</Steps.List>
			{steps.map((item, index) => (
				<Steps.Content key={index} index={index} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
					{item.content}
				</Steps.Content>
			))}
			<Steps.Content index={steps.length} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
				All done!
			</Steps.Content>
			<div className="flex justify-between items-center gap-2">
				<Steps.PrevTrigger className="btn preset-filled">Back</Steps.PrevTrigger>
				<Steps.NextTrigger className="btn preset-filled">Next</Steps.NextTrigger>
			</div>
		</Steps>
	);
}

```

## Anatomy

Here's an overview of how the Steps component is structured in code:

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

export default function Anatomy() {
	return (
		<Steps>
			<Steps.List>
				<Steps.Item>
					<Steps.Trigger>
						<Steps.Indicator />
					</Steps.Trigger>
					<Steps.Separator />
				</Steps.Item>
			</Steps.List>
			<Steps.Content />
			<Steps.PrevTrigger />
			<Steps.NextTrigger />
		</Steps>
	);
}
```

## API Reference

### Root

| Prop            | Description                                                                                                      | Type                                                           | Default      |
| --------------- | ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------------ |
| ids             | The custom ids for the stepper elements                                                                          | ElementIds \| undefined                                        | -            |
| step            | The controlled value of the stepper                                                                              | number \| undefined                                            | -            |
| defaultStep     | The initial value of the stepper when rendered.&#xA;Use when you don't need to control the value of the stepper. | number \| undefined                                            | -            |
| onStepChange    | Callback to be called when the value changes                                                                     | ((details: StepChangeDetails) => void) \| undefined            | -            |
| onStepComplete  | Callback to be called when a step is completed                                                                   | VoidFunction \| undefined                                      | -            |
| linear          | If \`true\`, the stepper requires the user to complete the steps in order                                        | boolean \| undefined                                           | -            |
| orientation     | The orientation of the stepper                                                                                   | "horizontal" \| "vertical" \| undefined                        | "horizontal" |
| count           | The total number of steps                                                                                        | number \| undefined                                            | -            |
| isStepValid     | Whether a step is valid. Invalid steps block forward navigation in linear mode.                                  | ((index: number) => boolean) \| undefined                      | () => true   |
| isStepSkippable | Whether a step can be skipped during navigation.&#xA;Skippable steps are bypassed when using next/prev.          | ((index: number) => boolean) \| undefined                      | () => false  |
| onStepInvalid   | Called when navigation is blocked due to an invalid step.                                                        | ((details: StepInvalidDetails) => 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   | -                           | StepsApi\<PropTypes>                                           | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

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

### List

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

### Item

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| index   | -                           | number                                                         | -       |
| 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 | -       |

### Indicator

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

### Separator

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

### Content

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| index   | -                           | number                                                         | -       |
| 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 | -       |

### NextTrigger

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

# Switch

Toggle between two states, such as on/off.

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

export default function Default() {
	const [checked, setChecked] = useState(false);

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

```

## Color

Use the [Tailwind data attribute syntax](https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes) to target the state using `data-[state=checked]`

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

export default function Colors() {
	return (
		<Switch>
			<Switch.Control className="preset-filled-secondary-50-950 data-[state=checked]:preset-filled-secondary-500">
				<Switch.Thumb />
			</Switch.Control>
			<Switch.Label>Label</Switch.Label>
			<Switch.HiddenInput />
		</Switch>
	);
}

```

## List

Use the `Label` component to create a list layout.

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

Add icons to act as state indicators.

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

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

```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>
	);
}

```

## Anatomy

Here's an overview of how the Switch component is structured in code:

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

export default function Anatomy() {
	return (
		<Switch>
			<Switch.Control>
				<Switch.Thumb />
			</Switch.Control>
			<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 state 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
/**
 * Because demonstrating navigation inside a code snippet is not feasible, this example uses local state to simulate URL path changes.
 *
 * In a real application, you would:
 * - Replace the `url` variable with the `url` of the current page.
 * - Replace `onValueChange={(details) => setUrl(details.value)}` with `navigate((details) => navigate(details.value))` using your framework's navigation method.
 */

import { Tabs } from '@skeletonlabs/skeleton-react';
import { useState, type ComponentProps } from 'react';

export default function Navigation() {
	const [url, setUrl] = useState('#overview');

	return (
		<Tabs value={url} onValueChange={(details) => setUrl(details.value)}>
			<Tabs.List>
				<Tabs.Trigger
					value="#overview"
					element={(attributes) => (
						<a {...(attributes as ComponentProps<'a'>)} href="#overview">
							Overview
						</a>
					)}
				/>
				<Tabs.Trigger
					value="#key-features"
					element={(attributes) => (
						<a {...(attributes as ComponentProps<'a'>)} href="#key-features">
							Key Features
						</a>
					)}
				/>
				<Tabs.Trigger
					value="#activity"
					element={(attributes) => (
						<a {...(attributes as ComponentProps<'a'>)} href="#activity">
							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="#key-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>
	);
}

```

## Orientation

Using the `orientation` prop to control the layout.

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

export default function Vertical() {
	return (
		<Tabs defaultValue="overview" orientation="vertical">
			<Tabs.List>
				<Tabs.Trigger value="overview" className="justify-start">
					Overview
				</Tabs.Trigger>
				<Tabs.Trigger value="features" className="justify-start">
					Key features
				</Tabs.Trigger>
				<Tabs.Trigger value="activity" className="justify-start">
					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

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

```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>
	);
}

```

## Anatomy

Here's an overview of how the Tabs component is structured in code:

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

export default function Anatomy() {
	return (
		<Tabs>
			<Tabs.List>
				<Tabs.Trigger />
				<Tabs.Indicator />
			</Tabs.List>
			<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>
	);
}

```

> TIP: Double tap each tag to quickly and easily edit in place.

## Custom Icon

Implement any icon of your choosing for the remove action.

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

Change the tag color using utility classes or custom CSS variables to match your design system.

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

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

```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.HiddenInput />
		</TagsInput>
	);
}

```

## Anatomy

Here's an overview of how the TagsInput component is structured in code:

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

export default function Anatomy() {
	return (
		<TagsInput>
			<TagsInput.Label />
			<TagsInput.Control>
				<TagsInput.Item>
					<TagsInput.ItemPreview>
						<TagsInput.ItemText />
						<TagsInput.ItemDeleteTrigger />
					</TagsInput.ItemPreview>
					<TagsInput.ItemInput />
				</TagsInput.Item>
				<TagsInput.Input />
			</TagsInput.Control>
			<TagsInput.HiddenInput />
			<TagsInput.ClearTrigger />
		</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                                                                                                                                                                                                          | -                       |
| allowDuplicates      | Whether to allow duplicate tags.                                                                                                                    | boolean \| undefined                                                                                                                                                                                                                                       | false                   |
| 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                                                                                                                                                                                                                                       | -                       |
| sanitizeValue        | Function to sanitize the tag value before adding.&#xA;Useful for trimming whitespace, normalizing case, or stripping special characters.            | ((value: string) => string) \| undefined                                                                                                                                                                                                                   | (value) => value.trim() |
| name                 | The name attribute for the input. Useful for form submissions                                                                                       | string \| undefined                                                                                                                                                                                                                                        | -                       |
| form                 | The associate form of the underlying input element.                                                                                                 | string \| undefined                                                                                                                                                                                                                                        | -                       |
| placeholder          | The placeholder text for the input                                                                                                                  | 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. Implement a single instance of `<Toast.Group>` in the root scope your application.

```tsx
import { toaster } from '/some/path/toaster.ts';
import { Toast } from '@skeletonlabs/skeleton-react';
import type { PropsWithChildren } from 'react';

export default function Layout(props: PropsWithChildren) {
	return (
		<>
			{props.children}
			<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>
		</>
	);
}
```

Create a shared reference to the `createToaster()` instance. We'll call it `toaster` here.

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

	export const toaster = createToaster();
</script>
```

Use this shared reference to trigger messages on demand throughout your application.

```tsx
import { toaster } from '/some/path/toaster.ts';

export default function Page() {
	function onClickHandler() {
		toaster.info({ title: 'Example', description: 'This is a toast message.' });
	}
	return ();
}
```

```tsx
import { toaster } from '/some/path/toaster.ts';

export default function Page() {
	function onClickHandler() {
		toaster.info({ title: 'Example', description: 'This is a toast message.' });
	}
	return ();
}
```

## Triggers

Shorthand methods are available for toast triggers, including: `info()`, `success()`, `warning()`, and `error()`.

```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>
		</>
	);
}

```

Or use the generic `create()` method to trigger toasts of any type: `info|success|warning|error`.

```ts
toaster.create({
	type: 'info',
	title: 'This is a toast',
	description: 'This is a toast description.',
	duration: 4000, // Duration in milliseconds (default: 4000), use Infinity to prevent auto-close
	action: {
		label: 'Action',
		onClick: () => {
			// Handle action click
		},
	},
});
```

## Placement

Set the `placement` value in your `createToaster` instance to define the global screen position.

```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>
		</>
	);
}

```

## Overlap

Use the `overlap` option in your `createToaster` instance to enable overlapping toasts.

```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Default() {
	const toaster = createToaster({
		overlap: true,
	});

	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>
		</>
	);
}

```

> Note: Hovering over the toast group will expand all the toasts.

## Closable

Use the `closable` prop to toggle display of the close button.

```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>
		</>
	);
}

```

## Action

Use the `action` key to add an interactive button to your toast. This is useful for actions like "Undo", "Retry", or other contextual operations.

```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>
		</>
	);
}

```

## Meta

Use the `meta` key to pass arbitrary data along with the toast instance. This can be used to display an icon for example.

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

Toasts support asynchronous updates using promises.

```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>
		</>
	);
}

```

## Anatomy

Here's an overview of how the Toast component is structured in code:

```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';

export default function Anatomy() {
	return (
		<Toast.Group>
			<Toast>
				<Toast.Message>
					<Toast.Title />
					<Toast.Description />
				</Toast.Message>
				<Toast.CloseTrigger />
			</Toast>
		</Toast.Group>
	);
}
```

## API Reference

### Root

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| toast   | -                           | Omit\<ToastOptions\<any>, "id" \| "parent">                    | -       |
| index   | -                           | number \| undefined                                            | -       |
| 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

Use the `value` and `onValueChange` props to control state programmatically.

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

			{/* Message */}
			<p>
				<span className="opacity-60">You selected</span> <code className="code">{value.length > 0 ? value.join(', ') : 'none'}</code>
			</p>
		</div>
	);
}

```

## Orientation

Using the `orientation` prop to control the layout.

```tsx
import { ToggleGroup } from '@skeletonlabs/skeleton-react';
import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react';

export default function Orientation() {
	return (
		<div className="flex flex-col items-center gap-4">
			<p>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>

			<p>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>
	);
}

```

## Direction

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

```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>
	);
}

```

## Anatomy

Here's an overview of how the ToggleGroup component is structured in code:

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

export default function Anatomy() {
	return (
		<ToggleGroup>
			<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 p-2 preset-filled-surface-950-50">
						<span>Hello Skeleton</span>
						<Tooltip.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-950-50)]">
							<Tooltip.ArrowTip />
						</Tooltip.Arrow>
					</Tooltip.Content>
				</Tooltip.Positioner>
			</Portal>
		</Tooltip>
	);
}

```

Breaking convention in Skeleton, this component is provided "headless". Meaning no default styles are applied out of the box. This ensures you retain full control of all styling for maximum flexibility.

## Arrow

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

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

export default function Arrow() {
	return (
		<Tooltip>
			<Tooltip.Trigger>Hover</Tooltip.Trigger>
			<Portal>
				<Tooltip.Positioner>
					<Tooltip.Content className="card bg-surface-100-900 p-2 shadow-xl">
						<span>Hello Skeleton</span>
						<Tooltip.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
							<Tooltip.ArrowTip />
						</Tooltip.Arrow>
					</Tooltip.Content>
				</Tooltip.Positioner>
			</Portal>
		</Tooltip>
	);
}

```

## Z-Index

By default Skeleton does 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.

```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 bg-surface-100-900 p-2  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 bg-surface-100-900 p-2  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>
	);
}

```

## Provider Pattern

Use the [Provider Pattern](/docs/\[framework]/get-started/fundamentals#provider-pattern) to gain access to the inner component APIs.

```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 bg-surface-100-900 p-2  shadow-xl">Hello Skeleton</Tooltip.Content>
					</Tooltip.Positioner>
				</Portal>
			</Tooltip.Provider>
		</div>
	);
}

```

## Direction

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

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

export default function Dir() {
	return (
		<Tooltip dir="rtl">
			<Tooltip.Trigger>Hover</Tooltip.Trigger>
			<Portal>
				<Tooltip.Positioner>
					<Tooltip.Content className="card bg-surface-100-900 p-2  shadow-xl">Hello Skeleton</Tooltip.Content>
				</Tooltip.Positioner>
			</Portal>
		</Tooltip>
	);
}

```

## Anatomy

Here's an overview of how the Tooltip component is structured in code:

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

export default function Anatomy() {
	return (
		<Tooltip>
			<Tooltip.Trigger />
			<Portal>
				<Tooltip.Positioner>
					<Tooltip.Content>
						<Tooltip.Arrow>
							<Tooltip.ArrowTip />
						</Tooltip.Arrow>
					</Tooltip.Content>
				</Tooltip.Positioner>
			</Portal>
		</Tooltip>
	);
}
```

## API Reference

### Root

| Prop                 | Description                                                                                                                     | Type                                                                                                                                          | Default |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| children             | -                                                                                                                               | ReactNode                                                                                                                                     | -       |
| ids                  | The ids of the elements in the tooltip. Useful for composition.                                                                 | Partial\<\{ trigger: string \| ((value?: string \| undefined) => 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                                                                                           | -       |
| aria-label           | Custom label for the tooltip.                                                                                                   | string \| 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                                                                                                                          | -       |
| triggerValue         | The controlled trigger value                                                                                                    | string \| null \| undefined                                                                                                                   | -       |
| defaultTriggerValue  | The initial trigger value when rendered.&#xA;Use when you don't need to control the trigger value.                              | string \| null \| undefined                                                                                                                   | -       |
| onTriggerValueChange | Function called when the trigger value changes.                                                                                 | ((details: TriggerValueChangeDetails) => 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                                                                                           | -       |

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

Reactively set and control the state values.

```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 <kbd class="kbd">Ctrl</kbd> + left click with mouse.
* MacOS: Hold <kbd class="kbd">⌘</kbd> + 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>
	);
}

```

## Provider Pattern

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

Utilize promises to asynchronously load large node lists.

```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>
	);
}

```

## Anatomy

Here's an overview of how the TreeView component is structured in code:

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

export default function Anatomy() {
	return (
		<TreeView>
			<TreeView.Label />
			<TreeView.Tree>
				<TreeView.Branch>
					<TreeView.BranchControl>
						<TreeView.BranchTrigger />
						<TreeView.BranchIndicator />
						<TreeView.BranchText />
					</TreeView.BranchControl>
					<TreeView.BranchContent>
						<TreeView.Item>
							<TreeView.ItemText />
						</TreeView.Item>
					</TreeView.BranchContent>
				</TreeView.Branch>
			</TreeView.Tree>
		</TreeView>
	);
}
```

## API Reference

### NodeContext

| Prop     | Description | Type                               | Default |
| -------- | ----------- | ---------------------------------- | ------- |
| children | -           | (treeView: NodeProps) => ReactNode | -       |

### Root

| Prop                   | Description                                                                                                                                 | Type                                                                                                    | Default  |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -------- |
| translations           | Specifies the localized strings that identifies the accessibility elements and their states                                                 | IntlTranslations \| undefined                                                                           | -        |
| 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                                     | -        |
| scrollToIndexFn        | Function to scroll to a specific index.&#xA;Useful for virtualized tree views.                                                              | ((details: ScrollToIndexDetails\<T>) => 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   | -                           | 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.

<figure class="card-filled-enhanced flex justify-center gap-4 p-8">
  <a href="https://shiki.style/" target="_blank" class="btn preset-filled">
    Shiki Documentation →
  </a>
</figure>

## 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 = '',
	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

<Alert type="warning">
  <p>This use case falls outside the scope of Skeleton. The following is provided merely as guidance.</p>
</Alert>

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.

<Image src={banner} alt="Bits UI Banner" class="rounded-container shadow-xl" />

<figure class="linker bg-noise bg-[#cae2f7]!">
  <a class="btn preset-filled" href="https://www.bits-ui.com/" target="_blank">
    View Bits UI Docs
  </a>
</figure>

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.

<Image src={datePicker} alt="Bits UI Date Picker Component" class="rounded-container shadow-xl" />

<figure class="linker bg-noise bg-[#cae2f7]!">
  <a class="btn preset-filled" href="https://www.bits-ui.com/docs/components/calendar" target="_blank">
    Calendar Documentation
  </a>
</figure>

## Get Started

<Process>
  <ProcessStep step="1">
    ### Create a SvelteKit Project

    To begin, we'll setup a new SvelteKit project, including Skeleton v3 and Tailwind v4.

    <a class="btn preset-filled mt-4" href={resolvePath(props.Astro, '/docs/[framework]/get-started/installation/sveltekit')} target="_blank">Setup SvelteKit App</a>
  </ProcessStep>

  <ProcessStep step="2">
    ### Install Bits UI

    Install the Bits UI package via your package manager of choice.

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

    We'll also include the [Adobe International Date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to assist with date/time formatting.

    ```bash
    npm i -D @internationalized/date
    ```
  </ProcessStep>

  <ProcessStep step="3">
    ### Component Boilerplate

    Create a new component in `/lib/components/Calendar/Calendar.svelte` and insert the following markup. This will generate an unstyled version of the component.

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

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

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

    <Calendar.Root {isDateUnavailable} weekdayFormat="short" fixedWeeks={true} type="single" bind:value>
    	{#snippet children({ months, weekdays })}
    		<Calendar.Header>
    			<Calendar.PrevButton>
    				<span>&larr;</span>
    			</Calendar.PrevButton>
    			<Calendar.Heading />
    			<Calendar.NextButton>
    				<span>&rarr;</span>
    			</Calendar.NextButton>
    		</Calendar.Header>

    		{#each months as month}
    			<Calendar.Grid>
    				<Calendar.GridHead>
    					<Calendar.GridRow>
    						{#each weekdays as day}
    							<Calendar.HeadCell>
    								{day}
    							</Calendar.HeadCell>
    						{/each}
    					</Calendar.GridRow>
    				</Calendar.GridHead>
    				<Calendar.GridBody>
    					{#each month.weeks as weekDates}
    						<Calendar.GridRow>
    							{#each weekDates as date}
    								<Calendar.Cell {date} month={month.value}>
    									<Calendar.Day />
    								</Calendar.Cell>
    							{/each}
    						</Calendar.GridRow>
    					{/each}
    				</Calendar.GridBody>
    			</Calendar.Grid>
    		{/each}
    	{/snippet}
    </Calendar.Root>
    ```
  </ProcessStep>

  <ProcessStep step="check">
    ### Add the Component

    Finally, let's add our new component to the root `+page.svelte` so that we may preview it.

    ```svelte
    <script lang="ts">
    	import Calendar from '$lib/components/Calendar/Calendar.svelte';
    </script>

    <main class="p-10">
    	<Calendar />
    </main>
    ```
  </ProcessStep>
</Process>

## 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.

<Image src={banner} alt="Melt UI Banner" class="rounded-container shadow-xl" />

<figure class="linker bg-noise bg-[#d59f6a]!">
  <a class="btn preset-filled" href="https://next.melt-ui.com/" target="_blank">
    View Melt UI Docs
  </a>
</figure>

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.

<Image src={accordion} alt="Melt UI Accordion Component" class="rounded-container shadow-xl" />

<figure class="linker bg-noise bg-[#d59f6a]!">
  <a class="btn preset-filled" href="https://next.melt-ui.com/components/accordion/" target="_blank">
    Accordion Documentation
  </a>
</figure>

## Get Started

<Process>
  <ProcessStep step="1">
    ### Create a SvelteKit Project

    To begin, we'll setup a new SvelteKit project, including Skeleton v3 and Tailwind v4.

    <a class="btn preset-filled mt-4" href={resolvePath(props.Astro, '/docs/[framework]/get-started/installation/sveltekit')} target="_blank">Setup SvelteKit App</a>
  </ProcessStep>

  <ProcessStep step="2">
    ### Install Melt UI

    Install the Melt UI package via your package manager of choice.

    ```bash
    npm install melt
    ```
  </ProcessStep>

  <ProcessStep step="3">
    ### Component Boilerplate

    Create a new component in `/lib/components/Accordion/Accordion.svelte` and insert the following markup. This will generate an unstyled version of the component.

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

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

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

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

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

  <ProcessStep step="check">
    ### Add the Component

    Finally, let's add our new component to the root `+page.svelte` so that we may preview it.

    ```svelte
    <script lang="ts">
    	import Accordion from '$lib/components/Accordion/Accordion.svelte';
    </script>

    <main class="p-10">
    	<Accordion />
    </main>
    ```
  </ProcessStep>
</Process>

## 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.

<Image src={banner} alt="Radix UI Banner" class="rounded-container shadow-xl" />

<figure class="linker bg-noise bg-[#3a2036]!">
  <a class="btn preset-filled" href="https://www.radix-ui.com/" target="_blank">
    View Radix UI Docs
  </a>
</figure>

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.

<Image src={toggleGroup} alt="Radix UI Toggle Group Component" class="rounded-container shadow-xl" />

<figure class="linker bg-noise bg-[#3a2036]!">
  <a class="btn preset-filled" href="https://www.radix-ui.com/primitives/docs/components/toggle-group" target="_blank">
    Toggle Group Documentation
  </a>
</figure>

## Get Started

<Process>
  <ProcessStep step="1">
    ### Create a Project

    To begin, we'll setup a new Vite project with React v19, Skeleton v3, and Tailwind v4.

    <a class="btn preset-filled mt-4" href={resolvePath(props.Astro, '/docs/[framework]/get-started/installation/vite-react')} target="_blank">Setup Vite/React App</a>
  </ProcessStep>

  <ProcessStep step="2">
    ### Install Radix Component

    Install the Radix UI component package via your package manager of choice.

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

  <ProcessStep step="3">
    ### Component Boilerplate

    Create a new component in `/src/components/ToggleGroup/ToggleGroup.tsx` and insert the following markup. This will generate an unstyled version of the component. Note that we have renamed the Radix component to `RadixToggleGroup` to remain semantic and avoid conflict with our own component name.

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

    interface ToggleGroupProps { /* ... */ }

    export const ToggleGroup: FC<ToggleGroupProps> = () => {
    	return (
    		<RadixToggleGroup.Root
    			className="ToggleGroup"
    			type="single"
    			defaultValue="center"
    			aria-label="Text alignment"
    		>
    			<RadixToggleGroup.Item
    				className="ToggleGroupItem"
    				value="left"
    				aria-label="Left aligned"
    			>
    				Left
    			</RadixToggleGroup.Item>
    			<RadixToggleGroup.Item
    				className="ToggleGroupItem"
    				value="center"
    				aria-label="Center aligned"
    			>
    				Center
    			</RadixToggleGroup.Item>
    			<RadixToggleGroup.Item
    				className="ToggleGroupItem"
    				value="right"
    				aria-label="Right aligned"
    			>
    				Right
    			</RadixToggleGroup.Item>
    		</RadixToggleGroup.Root>
    	);
    };

    ```
  </ProcessStep>

  <ProcessStep step="check">
    ### Add the Component

    Finally, let's add our new component to the app in `/src/App.tsx`.

    ```tsx
    import "./App.css";
    import { ToggleGroup } from "./components/ToggleGroup/ToggleGroup";

    function App() {
    	return (
    		<main className="p-10">
    			<ToggleGroup />
    		</main>
    	);
    }

    export default App;
    ```
  </ProcessStep>
</Process>

## 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.

<NavigationGrid filter={(doc) => doc.id.includes('resources/contribute/')} />

# 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**.

<figure class="linker bg-noise">
  <a class="btn preset-filled" href="https://llmstxt.org/" target="_blank">
    View LLM Standard →
  </a>
</figure>

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