`, 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.
Preview and Source
## 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
```
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
```
### 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).
---
# Dark Mode
Learn how to use Tailwind's dark mode feature for your Skeleton project.
{
Skeleton makes use of{' '}
Tailwind's Dark Mode
{' '}
to enable multiple strategies to control the overall app or page mode, as well as{' '}
Color Scheme
{' '}
to selectively toggle light or dark interfaces at any scope.
}
## Dark Mode
Tailwind [multiple strategies](https://tailwindcss.com/docs/dark-mode) for configuring Dark Mode.
### Media Strategy
Enable by default. Uses CSS's [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) and sets the active mode based on operating system settings.
### Selector Strategy
Activates dark mode by adding or removing the `.dark` class to your application's `` element.
```css title="app.css"
@custom-variant dark (&:where(.dark, .dark *));
```
```html title="app.html"
...
```
### Data Attribute Strategy
Uses a data attribute instead of a class to activate dark mode.
```css title="app.css"
@custom-variant dark (&:where([data-mode=dark], [data-mode=dark] *));
```
```html title="app.html"
...
```
### Using the Dark Variant
Apply a base style, then with Tailwind's `dark:` variant.
```html title="app.html"
...
```
---
## Color Scheme
Skeleton now supports Tailwind's [Color Scheme](https://tailwindcss.com/docs/color-scheme) feature, which enables toggling light or dark interfaces at any scope. By default, the scheme matches the current Dark Mode setting. This feature is enabled by [Color Pairings](/docs/design/colors#color-pairings), which implement the native CSS property [light-dark](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark).
```html
Light or Dark
```
---
## Light Switch
Legacy versions of Skeleton offer a unique Light Switch component for controlling the Dark Mode `selector` strategy. Unfortunately this is no longer available due to the number of permutations required per framework and required feature capabilities, including:
- Supporting one or more combinations of Dark Mode strategies.
- Supporting the unique APIs of each meta-framework.
- Handling state and persistence; ex: local vs remote vs account-based storage
We now recommend you generate your own component following [Tailwind's best practices](https://tailwindcss.com/docs/dark-mode). To help you get started, we've provided a Cookbook recipe covering the basics.
Light Switch Recipe →
---
## Cookbook
# Alerts
General purpose notifications to attract attention and provide critical actions.
```html
Hey, heads up!
Something of moderate importance has occurred.
Dismiss
```
## Styling
For even more customization, try mixing and matching various [Presets](/docs/design/presets) classes.
```html
---
---
Success
The task has been completed successfully.
Dismiss
Warning
Beware of this important notice.
Dismiss
Error
Something has gone wrong.
Dismiss
```
---
# Breadcrumbs
Displays the current navigation hierarchy.
```html
Blog ›
Category ›
Article
```
## Icons
Feel free to mix in icons for the anchor labels or separators.
```html
---
---
Current
```
---
# Chat
Create a custom chat feed or AI prompt interface.
## Layout Columns
Use Tailwind's [grid column](https://tailwindcss.com/docs/grid-template-columns) utility classes to define horizontal columns for your layout.
```html
```
## Layout Rows
Use Tailwind's [grid row](https://tailwindcss.com/docs/grid-template-rows) utility classes to define vertical layout rows for your layout.
```html
(feed)
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit dolor ullam, qui et itaque quam distinctio dicta nostrum
veritatis harum iure hic sequi aperiam, explicabo earum totam deserunt. Fugiat, temporibus.
(prompt)
```
## Message Feed
The feed simply loops through the available feed data. Each `` tag represents a single _bubble_ element.
```html
---
let messageFeed = [
{
id: 0,
host: true,
avatar: 48,
name: 'Jane',
timestamp: 'Yesterday @ 2:30pm',
message: 'Some message text.',
color: 'variant-soft-primary'
},
{
id: 1,
host: false,
avatar: 14,
name: 'Michael',
timestamp: 'Yesterday @ 2:45pm',
message: 'Some message text.',
color: 'variant-soft-primary'
}
];
---
{
messageFeed.map((bubble) => {
// Determine if host/guest role
const role = bubble.host === true ? 'host' : 'guest';
// Render the bubble template
return {JSON.stringify({ role, ...bubble }, null, 2)} ;
})
}
```
## Message Bubbles
Provide styling to each bubble element.
```html
---
let messageFeed = [
{
id: 0,
host: true,
avatar: 48,
name: 'Jane',
timestamp: 'Yesterday @ 2:30pm',
message: 'Some message text.',
color: 'preset-tonal-primary'
},
{
id: 1,
host: false,
avatar: 14,
name: 'Michael',
timestamp: 'Yesterday @ 2:45pm',
message: 'Some message text.',
color: 'preset-tonal-primary'
}
];
---
{
messageFeed.map((bubble) => {
return (
<>
{bubble.host ? (
// Host Bubble
{bubble.name}
{bubble.timestamp}
{bubble.message}
) : (
// Guest Bubble
{bubble.name}
{bubble.timestamp}
{bubble.message}
)}
);
})
}
```
## Prompt
Use Skeleton's [input group](/docs/tailwind/forms#groups) styles to create a custom text prompt.
---
## Scroll to Bottom
Bind your scrollable feed panel element reference ([Svelte](https://svelte.dev/docs/svelte/bind) | [React](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom)), then use [scrollTo](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo) to scroll the panel to the bottom on demand. Scroll behavior can be set via `behavior: 'smooth'`.
```ts
function scrollChatBottom(behavior?: 'auto' | 'instant' | 'smooth' = 'smooth') {
// `elemChat` represents our scrollable panel element
elemChat.scrollTo({ top: elemChat.scrollHeight, behavior });
}
```
## Add a Message
Below we'll cover how to append the message feed with a new message from the host user. Per our above examples, we'll use the same `messageFeed` data structure.
```ts
let messageFeed = [
/* ...*/
];
```
Then bind to the textarea for your prompt in order to capture any message typed by the user.
```tsx let elemPrompt: HTMLElement = useRef(); ```
```ts let elemPrompt: HTMLElement; ```
```tsx
```
```svelte
```
Here's an example of how we might append a new message to the `messageFeed` array.
```ts
function addMessage(): void {
const newMessage = {
id: messageFeed.length,
host: true,
avatar: 48,
name: 'Jane',
timestamp: new date(),
message: elemPrompt.value,
color: 'preset-tonal-primary'
};
// Append the new message to the message feed
messageFeed = [...messageFeed, newMessage];
// Clear the textarea message
elemPrompt.value = '';
// Smoothly scroll to the bottom of the feed
setTimeout(() => {
scrollChatBottom('smooth');
}, 0);
}
```
This can be triggered when the prompt's SEND button is clicked.
```svelte
Send
```
---
# Clipboard API
Learn how to integrate the native browser clipboard API.
## How It Works
Refer to the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) documentation for details.
## Programmatic
```html
Copy to Clipboard
```
## Using Inputs
```html
Copy
```
---
# Dialog Element
Implement a simple popup dialog using the native HTML element.
```html
Hello world!
This is an example popover created using the native Dialog element.
Open Modal
```
## How It Works
This is enabled by the native [Dialog](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element, which includes a dedicated Javascript API for toggling the display.
## Animations
Animating `display: none` with CSS alone has limited browser support. However, per the video below, we can use progressive enchancement our dialog to ensure animations degrade gracefully for unsupported browsers.
VIDEO
## Alternatives
If you need finer grain control, consider Skeleton's integration guides for [Floating UI](https://floating-ui.com/).
- [React Popovers](/docs/integrations/popover/react) - powered by Floating UI React.
- [Svelte Popovers](/docs/integrations/popover/svelte) - powered by Floating UI Svelte.
---
# Dynamic Theme Loading
Load skeleton themes on demand.
## About Themes
The most common way to load skeleton themes is by importing them in your root stylesheet.
```css title="app/globals.css"
@import 'tailwindcss';
@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton/themes/cerberus';
@import '@skeletonlabs/skeleton/themes/catppuccin';
```
```css title="src/app.css"
@import 'tailwindcss';
@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton/themes/cerberus';
@import '@skeletonlabs/skeleton/themes/catppuccin';
```
This will bundle your themes when you build your application, for that reason you should only import the themes you need because they will increase your CSS bundle size.
While this is sufficient for most applications this might not be flexible enough for your needs, you may want themes to be
user specific, editable, organization specific and so on, since skeleton themes are just CSS variables there are many ways
you can load themes on demand, read further to see how.
## Creating Stylesheets on layout load
This approach assumes the CSS variables of the skeleton theme you want is available during the load function (eg: on your database or in memory).
In this example we will add a default theme that that can be used as a fallback.
```css title="app/globals.css"
@import 'tailwindcss';
@import '@skeletonlabs/skeleton';
@import './default.css';
```
```css title="src/app.css"
@import 'tailwindcss';
@import '@skeletonlabs/skeleton';
@import './default.css';
```
```css title="app/default.css"
[data-theme='default'] {
/* ... */
}
```
```css title="src/default.css"
[data-theme='default'] {
/* ... */
}
```
To load your themes we will utilize the [NextJS `getServerSideProps` function](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props) function in combination with [Head component](https://nextjs.org/docs/pages/api-reference/components/head):
```tsx title="app/layout.tsx"
import Head from 'next/head';
import type { InferGetServerSidePropsType, GetServerSideProps } from 'next';
const getThemes = async () => {
return [
{
name: 'theme-1',
css: `[data-theme='theme-1'] { /* ... */ }`
},
{
name: 'theme-2',
css: `[data-theme='theme-2'] { /* ... */ }`
}
];
};
export const getServerSideProps = (async () => {
const themes = getThemes();
return {
props: {
themes: ['default', ...themes.map((t) => t.name)],
css: themes.map((theme) => theme.css).join('\n\n')
}
};
}) satisfies GetServerSideProps<{ repo: Repo }>;
export default function Page({ repo }: InferGetServerSidePropsType) {
return (
<>
{repo.stargazers_count}
);
}
```
To load your themes we will utilize the [SvelteKit `load` function](https://svelte.dev/docs/kit/load) function in combination with [``](https://svelte.dev/docs/svelte/svelte-head):
```ts title="src/route/+layout.server.ts"
import type { PageLoad } from './$types';
const getThemes = async () => {
return [
{
name: 'theme-1',
css: `[data-theme='theme-1'] { /* ... */ }`
},
{
name: 'theme-2',
css: `[data-theme='theme-2'] { /* ... */ }`
}
];
};
export const load: PageLoad = async (event) => {
const themes = getThemes();
return {
themes: ['default', ...themes.map((t) => t.name)],
css: themes.map((theme) => theme.css).join('\n\n')
};
};
```
{@html ``}
```
> ⚠️ _Important_ make sure you sanitize the CSS before inserting it or you'll be vulernable to CSS injection.
After doing so you should be able to toggle themes on demand by changing the `data-theme` attribute on the `html` tag.
Note that there are multiple ways to go about this problem, another way could be to generate CSS files with
the same content as the one in this example and then load only the css files you want, while this
is more complex than storing and retrieving themes as JSON on a database this approach could benefit
from the browser caching mechanism.
---
# Image Layouts
Layouts for displaying sets of images.
## Grid
```html
```
## Quad
```html
```
## Masonry
```html
```
## Featured
```html
```
## Attribution
Images courtesy of [Lorem Picsum](https://picsum.photos/). Markup and styles inspired by [Flowbite](https://flowbite.com/docs/components/gallery/#masonry-grid).
---
# Light Switch
Learn how to create a Light Switch toggle.
Use [Dark Mode](/docs/guides/mode) to make use of either a base or `dark:` variant for your utility class styles. By default, Tailwind uses the `prefers-color-scheme` media query to determine and match the user's operating system settings. However, if you wish to provide your users manual control, you'll need to adjust the Dark Mode strategy for Tailwind, as well as provide the toggle interface (aka a light switch). This guide will show you how to fulfill both requirements.
## Adjust the Dark Mode Strategy
Open your global stylesheet and set the following variant:
```css
@custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *));
```
Then set the following data attribute on your application's `` element for light mode:
```html
```
Or for dark mode:
```html
```
## Create the Component
We'll create a implement a version of the Switch component that can toggle the mode on demand.
```html
'use client';
const [checked, setChecked] = useState(false);
useEffect(() => {
const mode = localStorage.getItem('mode') || 'light';
setChecked(mode === 'dark');
}, []);
const onCheckedChange = (event: { checked: boolean }) => {
const mode = event.checked ? 'dark' : 'light';
document.documentElement.setAttribute('data-mode', mode);
localStorage.setItem('mode', mode);
setChecked(event.checked);
};
return (
<>
## Import the Component
We'll then add the component to our app. Make sure to set the correct path and file extension.
```ts
import Lightswitch from './path/to/Lightswitch.{tsx|svelte}';
```
```svelte
## User Interface
While we utilize a primitive Switch for the minimal example above, feel free to adjust the logic and interface to your preference. We provide a more detailed Switch example for [React](/docs/components/switch/react#light-switch) and [Svelte](/docs/components/switch/svelte#light-switch) respectively.
## Next.js Users
For Next.js users, you will need to [suppressHydrationWarning](https://nextjs.org/docs/messages/react-hydration-error#solution-3-using-suppresshydrationwarning) to `true` on the root `` element. This will suppress hydration warnings.
---
# Logo Clouds
Provides a grid for presenting a set of logos, brands, or sponsors.
```html
Twitch
YouTube
TicTok
```
## Rows
```html
Optimize
Brand
Mesh
Matrix
Utilize
Syndicate
Incubate
Orchestrate
```
---
# Scroll Containers
Create scrolling containers using the scroll snap features from Tailwind.
## Scroll Snap
Implements Tailwind's [Scroll Snap Alignment](https://tailwindcss.com/docs/scroll-snap-align) utility classes.
```html
```
## Carousels
Using Scroll Containers, we can create a fully functional carousel, complete with thumbnail selection.
```html
---
const generatedArray = Array.from({ length: 6 });
---
{
generatedArray.map((_, i: number) => (
))
}
```
## Multi-Column
Using Scroll Containers, we can scroll sets of items.
```html
---
interface Movie {
name: string;
imageUrl: string;
url: string;
}
// Data and images via: https://www.themoviedb.org/
{
name: 'The Flash',
imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/rktDFPbfHfUbArZ6OOOKsXcv0Bm.jpg',
url: 'https://www.themoviedb.org/movie/298618-the-flash'
},
{
name: 'Guardians of the Galaxy Vol. 3',
imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/r2J02Z2OpNTctfOSN1Ydgii51I3.jpg',
url: 'https://www.themoviedb.org/movie/447365-guardians-of-the-galaxy-vol-3'
},
{
name: 'Black Panther: Wakanda Forever',
imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/sv1xJUazXeYqALzczSZ3O6nkH75.jpg',
url: 'https://www.themoviedb.org/movie/505642-black-panther-wakanda-forever'
},
{
name: 'Avengers: Infinity War',
imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/7WsyChQLEftFiDOVTGkv3hFpyyt.jpg',
url: 'https://www.themoviedb.org/movie/299536-avengers-infinity-war'
},
{
name: 'Spider-Man: No Way Home',
imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/1g0dhYtq4irTY1GPXvft6k4YLjm.jpg',
url: 'https://www.themoviedb.org/movie/634649-spider-man-no-way-home'
},
{
name: 'The Batman',
imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/74xTEgt7R36Fpooo50r9T25onhq.jpg',
url: 'https://www.themoviedb.org/movie/414906-the-batman'
},
{
name: 'Iron Man',
imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/78lPtwv72eTNqFW9COBYI0dWDJa.jpg',
url: 'https://www.themoviedb.org/movie/1726-iron-man'
},
{
name: 'Venom: Let There Be Carnage',
imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/rjkmN1dniUHVYAtwuV3Tji7FsDO.jpg',
url: 'https://www.themoviedb.org/movie/580489-venom-let-there-be-carnage'
},
{
name: 'Deadpool',
imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/3E53WEZJqP6aM84D8CckXx4pIHw.jpg',
url: 'https://www.themoviedb.org/movie/293660-deadpool'
}
];
---
```
> Images courtesy of [The Movie Database](https://www.themoviedb.org/)
## API Reference
Learn more about Tailwind's utility classes for scroll behavior and scroll snap.
| Feature | Description |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- |
| [scroll-behavior](https://tailwindcss.com/docs/scroll-behavior) | Controls the scroll behavior of an element. |
| [scroll-margin](https://tailwindcss.com/docs/scroll-margin) | Controls the scroll offset around items in a snap container. |
| [scroll-padding](https://tailwindcss.com/docs/scroll-padding) | Controls an element's scroll offset within a snap container. |
| [scroll-snap-align](https://tailwindcss.com/docs/scroll-snap-align) | Controls the scroll snap alignment of an element. |
| [scroll-snap-stop](https://tailwindcss.com/docs/scroll-snap-stop) | Controls whether you can skip past possible snap positions. |
| [scroll-snap-type](https://tailwindcss.com/docs/scroll-snap-type) | Controls how strictly snap points are enforced in a snap container. |
---
# Stepper
Divide and present content in sequenced steps.
## Using Components
Optionally, you can substitute primitive data for components and props.
---
# SVG Filters
Apply filter effects to elements and images.
## How It Works
This feature is enabled by [SVG filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter) paired with [feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix) transformations.
## Usage
Apply a filter to any element using the Filter style property and passing the unique SVG Filter ID.
```astro
...
```
## Create a Filter
We recommend [SVG Color Matrix Mixer](https://fecolormatrix.com/) by [Rik Schennink](https://x.com/rikschennink/) to create your own filters.
## Tips
- The SVG must be in the same scope as the elements you wish to filter. Global scope is acceptable.
- Consder storing your SVGs within your local project for quick and reusable imports.
- All Vite-based frameworks support [SVG imports](https://vite.dev/guide/assets.html#importing-asset-as-url).
- Optionally you can embed the SVG within a imported component (ex: `Apollo.svelte`, `Apollo.tsx`).
- Filter SVGs are affected by the flow DOM, including class styles such as `space-{x|y}`.
---
# Table of Contents
Navigate the hierarchy of headings for the current page.
```html
---
interface PageHeadings {
/** The text value within the heading tag; stripped of HTML. */
text: string;
/** A generated slug value based on the text. */
slug: string;
/** Depth indicates headings H1-H6. */
depth: number;
}
/** The generated list of page headings, slugs, and depth. */
const headings: PageHeadings[] = [
{ text: 'Real World Example', slug: 'real-world-example', depth: 1 },
{ text: 'Semantic Markup', slug: 'semantic-markup', depth: 1 },
{ text: 'Utilities', slug: 'utilities', depth: 1 },
{ text: 'Grid', slug: 'grid', depth: 2 },
{ text: 'Alignment', slug: 'alignment', depth: 2 },
{ text: 'Responsive Design', slug: 'responsive-design', depth: 2 },
{ text: 'In Conclusion', slug: 'in-conclusion', depth: 1 }
];
/** Provide a padding-left class based on the depth. */
function setIndentationClass(depth: number) {
// prettier-ignore
switch(depth) {
case(6): return 'pl-12';
case(5): return 'pl-10';
case(4): return 'pl-8';
case(3): return 'pl-6';
case(2): return 'pl-4';
case(1): return 'pl-2';
default: return 'pl-0';
}
}
---
```
## Deep Linking
Browsers allow you to deep link to any element via the ID. This is accomplished with an anchor tag and hashed (`#`) href value. When interacting with these anchors, the viewport will automatically attempt to scroll the `` element and bring the element into view.
```html
Some Example Heading
```
```html
Some Example Heading
```
> TIP: If you abstract scrolling away from the `` element, this will not work.
## Scroll Behavior
You may optionally choose to implement a smooth [scroll behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior) using CSS.
```html
```
```css
body {
scroll-behavior: smooth;
}
```
## Generate a Slug
The following provides a barebones implementation for generating a slug based on a heading text value.
```ts
function generateSlug(text: string, prefix?: string = '', suffix?: string = '') {
// Format the slug from the text value.
const slug = text
.toLowerCase()
.replaceAll(/[^a-zA-Z0-9 ]/g, '')
.replaceAll(' ', '-')
.toLowerCase();
// Note that you can optionally apply a prefix/suffix.
return `${prefix}${slug}${suffix}`;
}
// Usage
generateSlug('An Example Header'); // result: an-example-header
generateSlug('An Example Header', 'skeleton-'); // result: skeleton-an-example-header
generateSlug('An Example Header', '', '-skeleton'); // result: an-example-header-skeleton
```
## Guides
Specific instructions for generating headings will differ based on your meta-framework and your application architecture. Below are a few suggestions, but this is neither a definitive or exhaustive list of all available options.
- [Astro](https://kld.dev/building-table-of-contents/) - enables you to automatically generate headings using built-in MDX features.
- [Svelte](https://www.melt-ui.com/docs/builders/table-of-contents) - Melt UI provides a headless component solution for Svelte.
- [Next.js](https://nextra.site/docs/docs-theme/theme-configuration#toc-sidebar) - Nextra provides a headless component solution for Next.js + MDX.
- [Rehype Plugin](https://github.com/stefanprobst/rehype-extract-toc) - a general purpose Rehype plugin for generating a table of contents.
---
# Design
# Colors
The Skeleton color system.
## Color Palette
all standard Tailwind color utility classes using the following pattern.
```
{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
...
...
...
```
---
## Contrast Colors
Contrast color values are available for every shade. Use these to set accessible text color and icon fill values.
```
{property}-{color}-contrast-{shade}
```
```html
```
See the [Preset system](/docs/design/presets) for additional utility classes that automatically mix each color and contrast tone.
---
## Color Pairings
Provides a condensed syntax of dual-tone color values balanced to swap between light and dark mode. These are supported for all the same properties standard colors support (`bg`, `border`, `fill`, etc).
```
{property}-{color}-{lightModeShade}-{darkModeShade}
```
For example:
- `bg-surface-200-800`
- `text-primary-400-600`
- `border-secondary-50-950`
### How Pairings Work
Color Pairing are enabled through the use of the CSS [light-dark](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) function. For example, the `text-primary-300-700` pairing will be implemnted in your CSS bundle as follows:
```css
.text-primary-300-700 {
color: light-dark(var(--color-primary-300), var(--color-primary-700));
}
```
This roughly equivalent to the following, just more compact, and enabling support for Tailwind's [Color Scheme](https://tailwindcss.com/docs/color-scheme) utilities.
```html
...
```
By default, Skeleton sets the overall app's color scheme to match light or dark mode.
### Pairing Previews
The following is a static representation of each pairing. Only `primary` is shown, but all Skeleton colors are supported.
```html
Foreground
...
...
...
...
Branding
...
...
...
...
Background
```
- We can use shade `950` for light mode and `50` from dark mode to represent our body text color.
- Then use shade `50` from light mode and `950` from dark mode to represent our app background.
- Use the static `500` shade for key branding elements, such as buttons or banners.
- Then reserve multiple layers between for elements such as cards, inputs, and more.
---
## Transparency
Both Skeleton Colors and Color Pairings support Tailwind's color transparency syntax.
```html
Primary Color @ 25% transparency
Surface Pairing 50/950 @ 60% transparency
```
---
# Presets
Canned styles for your interface elements.
{
Presets are pre-defined styles that allow you to quickly and easily style buttons, badges, cards, and more. Create by mixing Skeleton and
Tailwind primitives.
}
```html
```
1. **Filled** - a filled preset of the primary brand color.
2. **Tonal** - a tonal preset of the primary brand color.
3. **Outlined** - an outlined preset of the primary brand color.
4. **Glass** - a custom preset using background transparency and backdrop blur.
5. **Elevated** - mixes a filled preset with a shadow.
6. **Ghost** - has no style by default, but shows a tonal preset on hover.
7. **Ghost Icon** - has no style by default, but shows a branded tonal preset on hover.
8. **Gradient** - a custom preset generated using Tailwind gradient primitives.
## Enabling Presets
Skeleton provides an optional set of presets for `filled`, `tonal`, and `outlined` styles. To enable these, simply add the following import to your global stylesheet. This is recommended for new users to Skeleton.
```css
@import '@skeletonlabs/skeleton/optional/presets';
```
## Skeleton Presets
Skeleton's provides the following opinionated set of styles, including accessible backgrounds and text colors.
### Filled
```
preset-filled-{color}-{lightModeShade}-{darkModeShade}
```
```html
(neutral)
950-50
900-100
800-200
700-300
600-400
500
400-600
300-700
200-800
100-900
50-950
```
### Tonal
```
preset-tonal-{color}
```
```html
(neutral)
primary
secondary
tertiary
success
warning
error
surface
```
### Outlined
```
preset-outlined-{color}-{shade}-{shade}
```
```html
(neutral)
950-50
900-100
800-200
700-300
600-400
500
400-600
300-700
200-800
100-900
50-950
```
## Custom Presets
For advanced users, we recommend disabing the Skeleton presets in favor of custom-generated presets. This ensures you retain full control over the look and feel of each element. Consider these best practices when creating presets.
- Custom presets are only limited by your imagination.
- Use any combination of Skeleton or Tailwind-provided primitive to generate a preset.
- Apply presets to any relevant element, including: buttons, cards, inputs, and more.
- Use a set naming convention, such as `preset-{foo}` to keep things standardized.
- Implement all presets in using Tailwind's [@utility directive](https://tailwindcss.com/docs/functions-and-directives#utility-directive) in your global stylesheet.
- Abstrast presets to a stylesheet or NPM package for shared used between projects.
```html
```
### Gradient Presets
Tailwind provides a number of powerful [Gradient](https://tailwindcss.com/docs/gradient-color-stops) utility classes that can be used to generate presets.
```html
```
### Glass Presets
```html
---
const baseClasses = 'card p-4 text-white text-center flex justify-start items-center';
---
Neutral
Primary
Secondary
Tertiary
Success
Warning
Error
Surface
```
---
# Spacing
Set a dynamic scale for application whitespace.
This is enabled by the [Tailwind spacing system](https://tailwindcss.com/blog/tailwindcss-v4#dynamic-utility-values-and-variants).
Scaling can be adjusted by modifying the [type scale](/docs/get-started/core-api#typography) theme property.
```css
[data-theme='cerberus'] {
--spacing: 0.25rem;
}
```
This affects the following utilities.
- `padding`
- `margin`
- `width`
- `minWidth`
- `maxWidth`
- `height`
- `minHeight`
- `maxHeight`
- `gap`
- `inset`
- `space`
- `translate`
---
# Themes
The Skeleton theme system.
{
Skeleton themes utilize{' '}
CSS custom properties
{' '}
to define core settings for your design system. Provided with a number of presets theme out of the box, as well as a powerful theme
generator to create your own. Enable one or more and quickly switch on-demand.
}
---
## Preset Themes
Skeleton is provided with high quality set of hand curated themes, as shown below.
Theme Generator
1. Open the Theme Generator and customize to your preference.
2. Make sure to set a unique name for your theme.
3. Tap the "code" view from the menu at top-right corner.
4. Tap the "copy" button at the top of copy the theme contents.
5. Paste the contents into a new file at your project root, such as `my-theme-name.css` (any name is fine).
Follow the step below to register any number of custom themes. Take care to match each theme's file name.
## Register Themes
You may register any number of themes by adding addition theme imports to your global stylesheet. Please note that each theme will slightly increase the final CSS bundle size.
```css
/* @import '@skeletonlabs/skeleton'; */
/* @import '@skeletonlabs/skeleton/optional/presets'; */
/* 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 `` element.
```html
...
```
> TIP: If you wish to create a theme switcher, this is the value you should aim to modify.
---
## Customize and Extend
### Modify Properties
You can modify any [theme property](/docs/get-started/core-api) on demand using the following technique. Simply add this to your global stylesheet, following all Tailwind and Skeleton configuration. Use this to override preset theme properties.
```css title="app.css"
[data-theme='cerberus'] {
--spacing: 0.22rem;
--radius-container: 0.375rem;
--heading-font-weight: bolder;
}
```
### Target Themes
If your application supports multiple themes, you may isolate selection using the `data-theme` attribute. Just make sure to account for light and dark mode color values.
```css title="app.css"
/** Target only Cerberus .h1 elements. */
[data-theme='cerberus'] .h1 {
color: red;
@variant dark {
color: green;
}
}
/** Target only Mona .h1 elements. */
[data-theme='mona'] .h1 {
color: blue;
@variant dark {
color: yellow;
}
}
```
### Backgrounds
Your app's light and dark mode background color values can be adjusted using the following [theme properties](/docs/get-started/core-api#colors).
```css title="app.css"
[data-theme='cerberus'] body {
--body-background-color: pink;
--body-background-color-dark: green;
}
```
Background images are supported, including CSS mesh gradients. The following example adheres to theme colors.
```css title="app.css"
[data-theme='cerberus'] body {
background-image:
radial-gradient(at 24% 25%, color-mix(in oklab, var(--color-primary-500) 30%, transparent) 0px, transparent 30%),
radial-gradient(at 35% 13%, color-mix(in oklab, var(--color-success-500) 18%, transparent) 0px, transparent 30%),
radial-gradient(at 100% 64%, color-mix(in oklab, var(--color-error-500) 3%, transparent) 0px, transparent 40%);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
```
We recommend Mesher for generating custom mesh gradients. This will generate colors using RGB, but can be migrated to utilize `var()` for colors and `color-mix()` for transparency, per the example above.
Mesher by CSS Hero
### Custom Fonts
Skeleton recommends the use of [Fontsource](https://fontsource.org/) for installing and managing custom fonts.
Browse Fontsource
Install your font of choice.
```console
npm install @fontsource/open-sans
```
Then import each font at the top of your global stylesheet, but below your Tailwind configuration.
```css title="app.css"
@import '@fontsource/open-sans';
```
Finally, use the following [theme properties](/docs/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 title="app.css"
[data-theme='cerberus'] {
--heading-font-family: 'Open Sans', sans-serif;
--base-font-family: 'Open Sans', sans-serif;
--anchor-font-family: 'inherit';
}
```
## Core API
For more information, please refer to the full [Core API](/docs/get-started/core-api) documentation.
---
# Typography
The Skeleton typography system.
{
Skeleton provides an array of opt-in utility classes for common typographic elements, with a fully functional typography scale based on
your theme settings. As well as a number of primitives for generating a semantic typography set for your project's individual needs.
}
## Typographic Scale
Skeleton introduces customizable [Typographic Scale](https://designcode.io/typographic-scales) to Tailwind's [font-size](https://tailwindcss.com/docs/font-size) properties.
Scaling can be adjusted by modifying the [type scale](/docs/get-started/core-api#typography) theme property.
```css
[data-theme='cerberus'] {
--text-scaling: 1.067;
}
```
This affects the following text sizes.
```html
text-xs
text-sm
text-base
text-lg
text-xl
text-2xl
text-3xl
text-4xl
text-5xl
text-6xl
text-7xl
text-8xl
text-9xl
```
## Utility Classes
Use the following utility classes to quickly style semantic HTML elements. These classes are opt-in by default, providing a simple escape hatch when you need to break from convention.
### Headings
```html
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
```
### Paragraphs
```html
The quick brown fox jumps over the lazy dog
```
### Blockquotes
```html
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, aliquid. Molestias, odio illum voluptatibus natus dignissimos, quidem
est unde aspernatur veniam pariatur fuga distinctio esse in quas, repellendus neque reiciendis!"
```
### Anchor
```html
Anchor
```
### Pre-Formatted
```html
The quick brown fox jumps over the lazy dog.
```
### Code
```html
Insert the .example class here.
```
### Keyboard
```html
Press ⌘ + C to copy.
```
### Insert & Delete
```html
Always Gonna Give You Up Never Gonna Give You Up
```
### Mark
```html
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, aliquid . Molestias, odio illum voluptatibus natus dignissimos , quidem est unde aspernatur veniam pariatur fuga.
```
## Lists
Skeleton defers to Tailwind's built-in utility classes for common list styles.
### Unordered
```html
Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.
```
### Ordered
```html
Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.
```
### Basic
```html
Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.
```
### Description
```html
Item A
Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.
Item B
Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.
Item C
Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.
```
### Navigation
```html
Explore
```
## Semantic Typography
When working with your designers, they may craft a semantic typography set for your project. To handle this, we recommend implementing [custom presets](/docs/design/presets#custom-presets) that mix CSS primitives with semantic HTML elements to replicate all desired styles. Feel free to use the boilerplate below, adding each style to your global stylesheet.
```html
Class
Preview
preset-typo-display-4Aa
preset-typo-display-3Aa
preset-typo-display-2Aa
preset-typo-display-1Aa
preset-typo-headlineHeadline
preset-typo-titleTitle
preset-typo-subtitleSubtitle
preset-typo-body-1
Body 1
preset-typo-body-2
Body 2
preset-typo-captionCaption
preset-typo-menu
preset-typo-buttonButton
```
---
# Tailwind
# Badges
Provides a robust set of non-interactive badge styles.
```html
---
---
Badge
Badge
```
## Presets
Provides full support of [Presets](/docs/design/presets).
```html
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
```
## Overlap
Use `badge-icon` to create overlapping numeric or icon badges.
```html
---
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';
---
2
```
---
# Buttons
Provide a variety of button, including customizable sizes and types.
```html
---
---
Button
Button
```
## Presets
Provides full support of [Presets](/docs/design/presets).
```html
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
```
## Sizes
```html
Small
Base
Large
```
## Disabled
When applied to a `` element, you can use the `disabled` attribute.
```html
Button
```
## Group
```html
January
February
March
```
---
# Cards
Provides container elements that wrap and separate content.
```html
```
```html
---
const imgSrc =
'https://images.unsplash.com/photo-1463171515643-952cee54d42a?q=80&w=450&h=190&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
---
Announcements
Skeleton is Awesome
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.
By Alex
On {new Date().toLocaleDateString()}
```
## Presets
Provides full support of [Presets](/docs/design/presets).
```html
Card
Card
Card
Card
Card
Card
Card
Card
Card
Card
Card
Card
Card
Card
Card
Card
Card
Card
Card
Card
Card
```
---
# Chips
Provides a robust set of interactive chip styles.
```html
---
---
Chip
Chip
```
## Presets
Provides full support of [Presets](/docs/design/presets).
```html
Chip
Chip
Chip
Chip
Chip
Chip
Chip
Chip
Chip
Chip
Chip
Chip
Chip
Chip
Chip
Chip
Chip
Chip
Chip
Chip
Chip
```
## Disabled
When applied to a `` element, you can use the `disabled` attribute.
```html
Chip
```
## Selection
```html
const colors = ['red', 'blue', 'green'];
const [color, setColor] = useState(colors[0]);
return (
{color &&
colors.map((c) => (
// On selection, set the color state, dynamically update classes
setColor(c)} key={c}>
{c}
))}
);
};
```
---
# Dividers
Horizontal and vertical rule styling.
```html
Above the divider.
Below the divider.
```
## Size
Use Tailwind's [border width](https://tailwindcss.com/docs/border-width) utilities to adjust thickness.
```html
Default
border-t-2
border-t-4
border-t-8
border-solid
border-dashed
border-dotted
border-double
border-primary-500
border-secondary-500
border-tertiary-500
border-success-500
border-warning-500
border-error-500
border-surface-950-50
Default →← border-l-8
```
---
# Forms and Inputs
Various form and input styles.
```html
Input
```
## Prerequisites
### Tailwind Forms
Skeleton relies on the official [Tailwind Forms](https://github.com/tailwindlabs/tailwindcss-forms) plugin to normalize form styling. Ths plugin is required if you wish to make use of any utility classes provided on this page.
Plugin Doc
Install the `@tailwindcss/forms` package.
```sh
npm install -D @tailwindcss/forms
```
Implement the plugin using the `@plugin` directive immediately following the `tailwindcss` import.
```css {2}
@import 'tailwindcss';
@plugin '@tailwindcss/forms';
/* ...Skeleton config here... */
```
### Browser Support
The display of native and semantic HTML form elements can vary between both operating systems and browsers. Skeleton does it's best to adhere to progressive enhancement best practices. However, we advise you validate support for each element per your target audience.
## Inputs
```html
```
## Select
```html
```
## Checkboxes
```html
```
## Radio Groups
```html
```
## Kitchen Sink
Display and functionality of these elements may vary greatly between devices and browsers.
```html
```
## Groups
Input groups support a subset of form elements and button styles. These pair well with [Presets](/docs/design/presets).
```html
---
---
```
| Class | Usage |
| ------------- | --------------------------------------- |
| `input-group` | Defines the parent input group set. |
| `ig-cell` | Defines a child cell for text or icons. |
| `ig-input` | Defines a child input of `type="text"`. |
| `ig-select` | Defines a child select element. |
| `ig-btn` | Defines a child button. |
---
# Placeholders
Provides "skeleton" placeholders that can display while content loads.
```html
```
## Animated
```html
...
```
---
# Tables
Provides a set of styles for native HTML table elements.
```html
---
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' }
];
---
{
tableData.map((row) => (
{row.position}
{row.symbol}
{row.name}
{row.atomic_no}
))
}
```
## Extras
Optionally add a header, footer, and caption.
```html
---
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' }
];
---
A list of elements from the periodic table.
Position
Symbol
Name
Weight
{
tableData.map((row) => (
{row.position}
{row.symbol}
{row.name}
{row.atomic_no}
))
}
Total
{tableData.length} Elements
```
## Navigation
Native HTML tables do not support interaction. For accessibility, use anchors or buttons within the last cell.
```html
---
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' }
];
---
First Name
Last Name
Email
{
tableData.map((row) => (
{row.first}
{row.last}
{row.email}
View →
))
}
```
## Layout
See [Tailwind's utility classes](https://tailwindcss.com/docs/table-layout) for adjusting the table layout algorithm. Apply this to the Table element.
## Hover Rows
Add a visual hover effect using the following Tailwind syntax.
```html
...
```
## Pagination
Pair with the Skeleton [Pagination](/docs/components/pagination/react) component for large data sets.
---
# Components
# Accordion
Divide content into collapsible sections.
## Default
```svelte
(value = e.value)}>
{#snippet lead()}
{#snippet lead()}
{#snippet lead()}
{#snippet lead()}
```
## Collapsible
```svelte
(value = e.value)} collapsible>
{#snippet lead()}
{#snippet lead()}
{#snippet lead()}
{#snippet lead()}
```
## Multiple
```svelte
(value = e.value)} multiple>
{#snippet lead()}
{#snippet lead()}
{#snippet lead()}
{#snippet lead()}
```
## Open State
Each Item `id` added to the Accordion `value` array will be open by default.
### State Rune
```ts
const value = $state(['club']);
```
```tsx
...
```
### Hardcoded
```tsx
...
```
## Multiple Items
Use `multiple` to enable multiple items to be opened at once.
```html
...
```
## Custom Icons
```svelte
{#snippet iconOpen()}
{#snippet controlLead()}
```
## Anatomy
## API Reference
### Accordion
| Property | Type | Description |
| --- | --- | --- |
| `animationConfig` | SlideParams | The animation configuration |
| `base` | string | Sets base styles. |
| `padding` | string | Set padding styles. |
| `spaceY` | string | Set vertical spacing styles. |
| `rounded` | string | Set border radius styles. |
| `width` | string | Set the width styles. |
| `classes` | string | Provide arbitrary CSS classes. |
| `children`* | Snippet<[]> | The default child slot. |
| `iconOpen` | Snippet<[]> | Set the open state icon. |
| `iconClosed` | Snippet<[]> | Set the closed state icon. |
| `ids` | Partial<{ root: string; item(value: string): string; itemContent(value: string): string; itemTrigger(value: string): string; }> | The ids of the elements in the accordion. Useful for composition. |
| `multiple` | boolean | Whether multiple accordion items can be expanded at the same time. Default: false |
| `collapsible` | boolean | Whether an accordion item can be closed after it has been expanded. Default: false |
| `value` | string[] | The controlled value of the expanded accordion items. |
| `defaultValue` | string[] | The initial value of the expanded accordion items. Use when you don't need to control the value of the accordion. |
| `disabled` | boolean | Whether the accordion items are disabled |
| `onValueChange` | (details: ValueChangeDetails) => void | The callback fired when the state of expanded/collapsed accordion items changes. |
| `onFocusChange` | (details: FocusChangeDetails) => void | The callback fired when the focused accordion item changes. |
| `dir` | "ltr" | "rtl" | The document's text/writing direction. Default: "ltr" |
| `getRootNode` | () => ShadowRoot | Node | Document | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
### AccordionItem
| Property | Type | Description |
| --- | --- | --- |
| `headingLevel` | number | The heading level. |
| `base` | string | Sets base styles. |
| `spaceY` | string | Set vertical spacing styles. |
| `classes` | string | Provide arbitrary CSS classes. |
| `controlBase` | string | Sets control's base styles. |
| `controlHover` | string | Sets control's the hover styles. |
| `controlPadding` | string | Sets control's the padding styles. |
| `controlRounded` | string | Sets control's the border radius styles. |
| `controlClasses` | string | Provide arbitrary CSS classes to the control. |
| `leadBase` | string | Sets the lead's base styles |
| `leadClasses` | string | Provide arbitrary CSS classes to the lead. |
| `contentBase` | string | Sets the lead's base styles |
| `contentClasses` | string | Provide arbitrary CSS classes to the content. |
| `indicatorBase` | string | Sets the lead's base styles |
| `indicatorClasses` | string | Provide arbitrary CSS classes to the indicator. |
| `panelBase` | string | Set the panel's base styles. |
| `panelPadding` | string | Set the panel's padding styles. |
| `panelRounded` | string | Set the panel's border-radius styles. |
| `panelClasses` | string | Provide arbitrary CSS classes to the panel. |
| `control`* | Snippet<[]> | The control's default slot. |
| `lead` | Snippet<[]> | The control's lead icon slot. |
| `panel` | Snippet<[]> | The panels's default slot. |
| `value`* | string | The value of the accordion item. |
| `disabled` | boolean | Whether the accordion item is disabled. |
---
# App Bar
A header element for the top of your page layout.
```svelte
{#snippet lead()}
Headline
{/snippet}
```
## Toolbar
```svelte
{#snippet lead()}
Title
```
## Responsive
Use Tailwind's [responsive design](https://tailwindcss.com/docs/responsive-design) breakpoints to adjust for various screen sizes.
```svelte
{#snippet lead()}
Title
{/snippet}
Title
```
## Anatomy
## API Reference
### AppBar
| Property | Type | Description |
| --- | --- | --- |
| `base` | string | Set base styles. |
| `background` | string | Set background styles. |
| `spaceY` | string | Set vertical spacing styles. |
| `border` | string | Set border styles. |
| `padding` | string | Set padding styles. |
| `shadow` | string | Set shadow styles. |
| `classes` | string | Provide arbitrary CSS classes. |
| `toolbarBase` | string | Sets toolbar's base styles. |
| `toolbarGridCols` | string | Sets toolbar's grid columns styles. |
| `toolbarGap` | string | Sets toolbar's gap styles. |
| `toolbarClasses` | string | Provide arbitrary CSS classes to the toolbar. |
| `leadBase` | string | Sets the lead snippet element's base styles. |
| `leadSpaceX` | string | Sets the lead snippet element's horizontal spacing styles. |
| `leadPadding` | string | Sets the lead snippet element's padding styles. |
| `leadClasses` | string | Provide arbitrary CSS classes to the lead snippet. |
| `centerBase` | string | Sets the center snippet element's base styles. |
| `centerAlign` | string | Sets the center snippet element's alignment styles. |
| `centerPadding` | string | Sets the center snippet element's padding styles. |
| `centerClasses` | string | Provide arbitrary CSS classes to the center snippet. |
| `trailBase` | string | Sets the trail snippet element's base styles. |
| `trailSpaceX` | string | Sets the trail snippet element's horizontal spacing styles. |
| `trailPadding` | string | Sets the trail snippet element's padding styles. |
| `trailClasses` | string | Provide arbitrary CSS classes to the trail snippet. |
| `headlineBase` | string | Sets the headline snippet element's base styles. |
| `headlineClasses` | string | Provide arbitrary CSS classes to the headline snippet. |
| `children` | Snippet<[]> | The center slot. |
| `lead` | Snippet<[]> | The lead slot. |
| `trail` | Snippet<[]> | The trail slot. |
| `headline` | Snippet<[]> | The headline slot. |
---
# Avatar
An image with a fallback for representing the user.
```svelte
```
## Style Attribute
Use the `style` prop to implement custom styles on the parent `` element.
```svelte
## API Reference
### Avatar
| Property | Type | Description |
| --- | --- | --- |
| `src` | string | Set avatar image source URL. |
| `srcset` | string | The source set of the avatar image. |
| `name`* | string | Provide a name or username for the avatar. |
| `base` | string | Set base styles. |
| `background` | string | Set background styles. |
| `size` | string | Set size styles. |
| `font` | string | Set font styles. |
| `border` | string | Set border styles. |
| `rounded` | string | Set border radius styles. |
| `shadow` | string | Set shadow styles. |
| `classes` | string | Provide arbitrary CSS classes. |
| `imageBase` | string | Set avatar image base styles. |
| `imageClasses` | string | Provide avatar image arbitrary CSS classes. |
| `fallbackBase` | string | Set base classes for the fallback element. |
| `fallbackClasses` | string | Provide arbitrary CSS classes to fallback element. |
| `children` | Snippet<[]> | The default child slot. |
| `ids` | Partial<{ root: string; image: string; fallback: string; }> | The ids of the elements in the avatar. Useful for composition. |
| `dir` | "ltr" | "rtl" | The document's text/writing direction. Default: "ltr" |
| `getRootNode` | () => ShadowRoot | Node | Document | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `onStatusChange` | (details: StatusChangeDetails) => void | Functional called when the image loading status changes. |
| `style` | string | |
---
# File Upload
Allow upload of files with buttons or drag and drop.
```svelte
{#snippet iconInterface()}
```
## Button
Use the default `children` slot to overwrite the default dropzone interface. Allow for a custom interface.
```svelte
Select File
```
## Disabled
```svelte
(api = _api)} />
api?.clearFiles()}>Clear Files
```
## RTL
```svelte
```
### File Validation
```svelte
```
### Custom Validation
```ts
function validateFileSize(file) {
if (file.size > 1024 * 1024 * 10) return ['FILE_TOO_LARGE'];
return null;
}
```
```svelte
```
### Events
```svelte
```
### Image Previews
```ts
function generatePreview(event) {
const reader = new FileReader();
reader.onload = (event) => {
const image = event.target.result;
// set the image as the src of an image element
};
reader.readAsDataURL(event.details.acceptedFiles[0]);
}
```
```svelte
```
### Miscellaneous
```svelte
```
## Anatomy
## API Reference
### FileUpload
| Property | Type | Description |
| --- | --- | --- |
| `label` | string | Set the interface text value. |
| `subtext` | string | Set the interface subtext value. |
| `base` | string | Set root base classes |
| `classes` | string | Set root arbitrary classes |
| `interfaceBase` | string | Set interface base classes |
| `interfaceBg` | string | Set interface background classes |
| `interfaceBorder` | string | Set interface border classes |
| `interfaceBorderColor` | string | Set interface border color classes |
| `interfacePadding` | string | Set interface border classes |
| `interfaceRounded` | string | Set interface border radius classes |
| `interfaceClasses` | string | Set interface arbitrary classes |
| `interfaceIcon` | string | Set interface icon classes |
| `interfaceText` | string | Set interface text classes |
| `interfaceSubtext` | string | Set interface subtext classes |
| `filesListBase` | string | Set file list base classes |
| `filesListClasses` | string | Set file list arbitrary classes |
| `fileBase` | string | Set file base classes |
| `fileBg` | string | Set file background classes |
| `fileGap` | string | Set file gap classes |
| `filePadding` | string | Set file padding classes |
| `fileRounded` | string | Set file border-radius classes |
| `fileClasses` | string | Set file arbitrary classes |
| `fileIcon` | string | Set file icon classes |
| `fileName` | string | Set file name classes |
| `fileSize` | string | Set file size classes |
| `fileButton` | string | Set file button classes |
| `stateDisabled` | string | Set disabled state classes for the root. |
| `stateInvalid` | string | Set invalid state classes for the interface. |
| `stateDragging` | string | Set dragging state classes for the interface. |
| `children` | Snippet<[]> | The default children content. |
| `iconInterface` | Snippet<[]> | Provide an icon for the interface. |
| `iconFile` | Snippet<[]> | Provide an icon proceeding each file. |
| `iconFileRemove` | Snippet<[]> | Provide an icon for the remove file action. |
| `onApiReady` | (api: FileUploadApi) => void | Binds the Zag API for external use. |
| `ids` | 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; }> | The ids of the elements. Useful for composition. |
| `disabled` | boolean | Whether the file input is disabled |
| `dir` | "ltr" | "rtl" | The document's text/writing direction. Default: "ltr" |
| `getRootNode` | () => ShadowRoot | Node | Document | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `name` | string | The name of the underlying file input |
| `invalid` | boolean | Whether the file input is invalid |
| `required` | boolean | Whether the file input is required |
| `translations` | IntlTranslations | The localized messages to use. |
| `accept` | Record | FileMimeType | FileMimeType[] | The accept file types |
| `allowDrop` | boolean | Whether to allow drag and drop in the dropzone element Default: true |
| `maxFileSize` | number | The maximum file size in bytes Default: Infinity |
| `minFileSize` | number | The minimum file size in bytes Default: 0 |
| `maxFiles` | number | The maximum number of files Default: 1 |
| `preventDocumentDrop` | boolean | Whether to prevent the drop event on the document Default: true |
| `validate` | (file: File, details: FileValidateDetails) => FileError[] | Function to validate a file |
| `onFileChange` | (details: FileChangeDetails) => void | Function called when the value changes, whether accepted or rejected |
| `onFileAccept` | (details: FileAcceptDetails) => void | Function called when the file is accepted |
| `onFileReject` | (details: FileRejectDetails) => void | Function called when the file is rejected |
| `capture` | "user" | "environment" | The default camera to use when capturing media |
| `directory` | boolean | Whether to accept directories, only works in webkit browsers |
| `locale` | string | The current locale. Based on the BCP 47 definition. Default: "en-US" |
---
# Navigation
Provides navigation interfaces for large, medium, and small screens.
## Rail
- Recommended for medium to large screens.
- Ideal for horizontal screen layouts.
- Should be fixed to the left or right of the viewport.
- Supports 3-7 tiles based on viewport height.
### Selection
Define a `value` state on the Rail. This is updated to match each Tile `id` when presssed.
```svelte
(value = newValue)}>
{#snippet tiles()}
```
### Routing
Replace Tile `id` with `href` to convert each to a anchor link.
```svelte
{#snippet header()}
```
### Expanded
Apply the `expanded` property to enable an expanded mode. Each tile will resize and used the expanded label.
```svelte
{#snippet header()}
{/snippet}
{#snippet footer()}
```
## Bar
- Recommended for small screens.
- Ideal for vertical screen layouts.
- Should be fixed to the bottom of the viewport.
- Supports 3-5 tiles based on viewport width.
- Consider progressive enhancement with the [Virtual Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API).
### Selection
Define a `value` state on the Bar. This is updated to match each Tile `id` when presssed.
```svelte
```
### Routing
Replace Tile `id` with `href` to convert each to a anchor link.
```svelte
```
## Tiles
Tiles are universal between Rails and Bars. They default to buttons, but will convert to anchors when an `href` is provided. When implementing `value` for selection, each item will update the value when clicked.
```svelte
```
### Anchor Tile Selection
When using anchor Tiles, use the `selected` prop to highlight the active tile. For SvelteKit, this can be achieved using the `page` state and comparing the page pathname and tile URLs.
### Bar
## API Reference
### NavCommon
| Property | Type | Description |
| --- | --- | --- |
| `value` | string | |
| `base` | string | Set base styles. |
| `background` | string | Set background classes. |
| `padding` | string | Set padding classes. |
| `width` | string | Set width classes. |
| `widthExpanded` | string | Set width classes for expanded mode. |
| `height` | string | Set width classes. |
| `classes` | string | Provide arbitrary CSS classes. |
| `tilesBase` | string | Set base classes. |
| `tilesFlexDirection` | string | Set flex direction classes. |
| `tilesJustify` | string | Set flex justify classes. |
| `tilesItems` | string | Set flex align classes. |
| `tilesGap` | string | Set gap classes. |
| `tilesClasses` | string | Provide arbitrary CSS classes. |
| `onValueChange` | (id: string) => void | Triggers when selection occurs. |
### NavBar
| Property | Type | Description |
| --- | --- | --- |
| `children` | Snippet<[]> | The default children snippet. |
| `value` | string | |
| `base` | string | Set base styles. |
| `background` | string | Set background classes. |
| `padding` | string | Set padding classes. |
| `width` | string | Set width classes. |
| `widthExpanded` | string | Set width classes for expanded mode. |
| `height` | string | Set width classes. |
| `classes` | string | Provide arbitrary CSS classes. |
| `tilesBase` | string | Set base classes. |
| `tilesFlexDirection` | string | Set flex direction classes. |
| `tilesJustify` | string | Set flex justify classes. |
| `tilesItems` | string | Set flex align classes. |
| `tilesGap` | string | Set gap classes. |
| `tilesClasses` | string | Provide arbitrary CSS classes. |
| `onValueChange` | (id: string) => void | Triggers when selection occurs. |
### NavRail
| Property | Type | Description |
| --- | --- | --- |
| `expanded` | boolean | Enabled expanded mode. |
| `headerBase` | string | Set base classes. |
| `headerFlexDirection` | string | Set flex direction classes. |
| `headerJustify` | string | Set flex justify classes. |
| `headerItems` | string | Set flex align classes. |
| `headerGap` | string | Set gap classes. |
| `headerClasses` | string | Provide arbitrary CSS classes. |
| `footerBase` | string | Set base classes. |
| `footerFlexDirection` | string | Set flex direction classes. |
| `footerJustify` | string | Set flex justify classes. |
| `footerItems` | string | Set flex align classes. |
| `footerGap` | string | Set gap classes. |
| `footerClasses` | string | Provide arbitrary CSS classes. |
| `header` | Snippet<[]> | The header snippet. |
| `tiles` | Snippet<[]> | The tiles snippet. |
| `footer` | Snippet<[]> | The footer snippet. |
| `value` | string | |
| `base` | string | Set base styles. |
| `background` | string | Set background classes. |
| `padding` | string | Set padding classes. |
| `width` | string | Set width classes. |
| `widthExpanded` | string | Set width classes for expanded mode. |
| `height` | string | Set width classes. |
| `classes` | string | Provide arbitrary CSS classes. |
| `tilesBase` | string | Set base classes. |
| `tilesFlexDirection` | string | Set flex direction classes. |
| `tilesJustify` | string | Set flex justify classes. |
| `tilesItems` | string | Set flex align classes. |
| `tilesGap` | string | Set gap classes. |
| `tilesClasses` | string | Provide arbitrary CSS classes. |
| `onValueChange` | (id: string) => void | Triggers when selection occurs. |
### NavTile
| Property | Type | Description |
| --- | --- | --- |
| `id` | string | Provide a unique ID. |
| `href` | string | Provide an href link; turns Tiles into an anchor |
| `target` | string | Set the href target attribute. |
| `label` | string | Provide the label text. |
| `labelExpanded` | string | Provide a longer label in expanded mode. |
| `title` | string | Provile a title attribute. |
| `selected` | boolean | Enable the active selected state. |
| `type` | "button" | "submit" | "reset" | Set button type. |
| `base` | string | Set base styles. |
| `width` | string | Set width classes. |
| `aspect` | string | Set aspect ratio classes. |
| `background` | string | Set background classes. |
| `hover` | string | Set hover classes. |
| `active` | string | Set active classes. |
| `padding` | string | Set padding classes. |
| `gap` | string | Set gap classes. |
| `rounded` | string | Set rounded classes. |
| `classes` | string | Provide arbitrary CSS classes. |
| `expandedPadding` | string | Set padding classes for expanded mode. |
| `expandedGap` | string | Set gap classes for expanded mode. |
| `expandedClasses` | string | Provide arbitrary CSS classes for expanded mode. |
| `labelBase` | string | Set base classes. |
| `labelClasses` | string | Provide arbitrary CSS classes. |
| `labelExpandedBase` | string | Set base classes. |
| `labelExpandedClasses` | string | Provide arbitrary CSS classes. |
| `onclick` | (id: string) => void | Triggers when the tile is clicked. |
| `children` | Snippet<[]> | The default slot, used for icons. |
---
# Pagination
Navigate between multiple pages of content.
```svelte
Position
Name
Weight
Symbol
{#each slicedSource(sourceData) as row}
{row.position}
{row.name}
{row.weight}
{row.symbol}
{/each}
(size = Number(e.currentTarget.value))}>
{#each [1, 2, 5] as v}
Items {v}
{/each}
Show All
(page = e.page)}
pageSize={size}
onPageSizeChange={(e) => (size = e.pageSize)}
siblingCount={4}
>
{#snippet labelEllipsis()}
```
## Alternative UI
Display an alternative interface using the `alternative` property.
```svelte
## API Reference
### Pagination
| Property | Type | Description |
| --- | --- | --- |
| `data`* | unknown[] | Provide source data as an array. |
| `alternative` | boolean | Enables alternative display with stats and first/last buttons. |
| `textSeparator` | string | Set the separator text or character, such as "of" in "X of Y". |
| `showFirstLastButtons` | boolean | Show first and last page button. |
| `base` | string | Sets base classes for the list. |
| `background` | string | Sets background classes for the list. |
| `border` | string | Sets border classes for the list. |
| `gap` | string | Sets gap classes for the list. |
| `padding` | string | Sets padding classes for the list. |
| `rounded` | string | Sets border radius classes for the list. |
| `classes` | string | Provide arbitrary CSS classes for the root. |
| `titleFirst` | string | Set an optional title for the first button. |
| `titlePrevious` | string | Set an optional title for the previous button. |
| `titleNumeral` | string | Set an optional title for the numeral buttons (ex: Page 1). |
| `titleNext` | string | Set an optional title for the next button. |
| `titleLast` | string | Set an optional title for the last button. |
| `buttonBase` | string | Sets base classes for buttons. |
| `buttonActive` | string | Sets active state classes for buttons. |
| `buttonInactive` | string | Sets inactive state classes for buttons. |
| `buttonHover` | string | Sets hover state classes for buttons. |
| `buttonClasses` | string | Provide arbitrary CSS classes for buttons. |
| `labelFirst` | Snippet<[]> | Set button icon or label for first button. |
| `labelPrevious` | Snippet<[]> | Set button icon or label for previous button. |
| `labelEllipsis` | Snippet<[]> | Set button icon or label for ellipsis. |
| `labelNext` | Snippet<[]> | Set button icon or label for next button. |
| `labelLast` | Snippet<[]> | Set button icon or label for last button. |
| `ids` | Partial<{ root: string; ellipsis(index: number): string; prevTrigger: string; nextTrigger: string; item(page: number): string; }> | The ids of the elements in the accordion. Useful for composition. |
| `dir` | "ltr" | "rtl" | The document's text/writing direction. Default: "ltr" |
| `getRootNode` | () => ShadowRoot | Node | Document | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `translations` | IntlTranslations | Specifies the localized strings that identifies the accessibility elements and their states |
| `count` | number | Total number of data items |
| `pageSize` | number | The controlled number of data items per page |
| `defaultPageSize` | number | The initial number of data items per page when rendered. Use when you don't need to control the page size of the pagination. Default: 10 |
| `siblingCount` | number | Number of pages to show beside active page Default: 1 |
| `page` | number | The controlled active page |
| `defaultPage` | number | The initial active page when rendered. Use when you don't need to control the active page of the pagination. Default: 1 |
| `onPageChange` | (details: PageChangeDetails) => void | Called when the page number is changed |
| `onPageSizeChange` | (details: PageSizeChangeDetails) => void | Called when the page size is changed |
| `type` | "button" | "link" | The type of the trigger element Default: "button" |
---
# Progress
An indicator showing the progress or completion of a task.
```svelte
50%
```
## Colors
Set the color using the `meterBg` prop.
```svelte
```
## Height
Set the height using the `height` prop.
```svelte
```
## Indeterminate
An indeterminate animation will be shown when the value is set to `null`.
```svelte
## API Reference
### Progress
| Property | Type | Description |
| --- | --- | --- |
| `base` | string | Set root base classes |
| `bg` | string | Set root background classes |
| `width` | string | Set root width classes |
| `height` | string | Set root height classes |
| `rounded` | string | Set root rounded classes |
| `classes` | string | Set root arbitrary classes |
| `labelBase` | string | Set label base classes. |
| `labelText` | string | Set label text classes. |
| `labelClasses` | string | Set label classes. |
| `trackBase` | string | Set the track base classes. |
| `trackBg` | string | Set the track background classes. |
| `trackRounded` | string | Set the track border radius classes. |
| `trackClasses` | string | Set arbitrary track classes. |
| `meterBase` | string | Set meter base classes. |
| `meterBg` | string | Set meter bg classes |
| `meterRounded` | string | Set meter rounded classes. |
| `meterTransition` | string | Set meter transition classes. |
| `meterAnimate` | string | Set meter animation classes for indeterminate mode. (value === undefined) |
| `meterClasses` | string | Set meter arbitrary classes. |
| `children` | Snippet<[]> | Set the label |
| `orientation` | "horizontal" | "vertical" | The orientation of the element. Default: "horizontal" |
| `ids` | Partial<{ root: string; track: string; label: string; circle: string; }> | The ids of the elements in the progress bar. Useful for composition. |
| `value` | number | The controlled value of the progress bar. |
| `defaultValue` | number | The initial value of the progress bar when rendered. Use when you don't need to control the value of the progress bar. Default: 50 |
| `onValueChange` | (details: ValueChangeDetails) => void | Callback fired when the value changes. |
| `dir` | "ltr" | "rtl" | The document's text/writing direction. Default: "ltr" |
| `getRootNode` | () => ShadowRoot | Node | Document | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `translations` | IntlTranslations | The localized messages to use. |
| `locale` | string | The locale to use for formatting the value. Default: "en-US" |
| `min` | number | The minimum allowed value of the progress bar. Default: 0 |
| `max` | number | The maximum allowed value of the progress bar. Default: 100 |
| `formatOptions` | NumberFormatOptions | The options to use for formatting the value. Default: { style: "percent" } |
---
# Progress Ring
A radial indicator showing progress or completion of a task.
```svelte
```
## Label
Display an auto-scaled percentage label using the `showLabel` prop.
```svelte
```
## Icons
Provide icons or other content using the `children` snippet.
```svelte
```
## Indeterminate
Uses indeterminate mode when `value` is explicitly set to `null`.
```svelte
## API Reference
The Progress Ring component is an SVG-based element where all internal elements are drawn **relative** to the SVG's size.
For example, the `strokeWidth` property can accept a pixel (px) value, but this value is scaled proportionally to the size of the SVG rather than being an absolute pixel measurement.
### ProgressRing
| Property | Type | Description |
| --- | --- | --- |
| `label` | string | Set the text for the scalable label |
| `showLabel` | boolean | When enabled, show a text label with the percentage amount |
| `strokeWidth` | string | Set the stroke size (ex: 15px) |
| `strokeLinecap` | "inherit" | "butt" | "round" | "square" | Defines the shape of the meter |
| `base` | string | Set the root base classes |
| `size` | string | Set the root size classes |
| `classes` | string | Provide arbitrary classes to the root element |
| `childrenBase` | string | Set the nested children base classes |
| `childrenClasses` | string | Provide arbitrary classes to the nested children. |
| `svgBase` | string | Set the SVG element base classes |
| `svgClasses` | string | Provide arbitrary classes to the SVG element |
| `trackBase` | string | Set the track base classes |
| `trackStroke` | string | Set the track stroke color classes |
| `trackClasses` | string | Provide arbitrary classes to the track element |
| `meterBase` | string | Set the meter base classes |
| `meterStroke` | string | Set the meter stroke color classes |
| `meterTransition` | string | Set the meter transition classes |
| `meterAnimate` | string | Set the meter animation classes |
| `meterDuration` | string | Set the meter transition duration classes |
| `meterClasses` | string | Provide arbitrary classes to the meter element |
| `labelBase` | string | Set the label classes |
| `labelFill` | string | Set the label fill color classes |
| `labelFontSize` | number | Set the label font size |
| `labelFontWeight` | string | Set the label font weight |
| `labelClasses` | string | Provide arbitrary classes to the label element |
| `children` | Snippet<[]> | The default child slot. |
| `orientation` | "horizontal" | "vertical" | The orientation of the element. Default: "horizontal" |
| `ids` | Partial<{ root: string; track: string; label: string; circle: string; }> | The ids of the elements in the progress bar. Useful for composition. |
| `value` | number | The controlled value of the progress bar. |
| `defaultValue` | number | The initial value of the progress bar when rendered. Use when you don't need to control the value of the progress bar. Default: 50 |
| `onValueChange` | (details: ValueChangeDetails) => void | Callback fired when the value changes. |
| `dir` | "ltr" | "rtl" | The document's text/writing direction. Default: "ltr" |
| `getRootNode` | () => ShadowRoot | Node | Document | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `translations` | IntlTranslations | The localized messages to use. |
| `locale` | string | The locale to use for formatting the value. Default: "en-US" |
| `min` | number | The minimum allowed value of the progress bar. Default: 0 |
| `max` | number | The maximum allowed value of the progress bar. Default: 100 |
| `formatOptions` | NumberFormatOptions | The options to use for formatting the value. Default: { style: "percent" } |
---
# Rating
Create an visual representation of a numeric range.
```svelte
(starValue = e.value)} />
```
## Count
```svelte
{#snippet iconEmpty()}
```
## Allow Half
```svelte
## API Reference
### Rating
| Property | Type | Description |
| --- | --- | --- |
| `base` | string | Set root base classes |
| `gap` | string | Set root gap classes |
| `classes` | string | Set root arbitrary classes |
| `controlBase` | string | Set control base classes |
| `controlGap` | string | Set control gap classes |
| `controlClasses` | string | Set control arbitrary classes |
| `labelBase` | string | Set label base classes |
| `labelClasses` | string | Set label arbitrary classes |
| `itemBase` | string | Set item base classes |
| `itemClasses` | string | Set item arbitrary classes |
| `stateReadOnly` | string | Set item read-only state classes |
| `stateDisabled` | string | Set item disabled state classes |
| `iconEmpty` | Snippet<[]> | Set the empty icon snippet |
| `iconHalf` | Snippet<[]> | Set the half icon snippet |
| `iconFull` | Snippet<[]> | Set the full icon snippet |
| `label` | Snippet<[]> | Set the label snippet |
| `ids` | Partial<{ root: string; label: string; hiddenInput: string; control: string; item(id: string): string; }> | The ids of the elements in the rating. Useful for composition. |
| `value` | number | The controlled value of the rating |
| `defaultValue` | number | The initial value of the rating when rendered. Use when you don't need to control the value of the rating. |
| `disabled` | boolean | Whether the rating is disabled. |
| `onValueChange` | (details: ValueChangeDetails) => void | Function to be called when the rating value changes. |
| `dir` | "ltr" | "rtl" | The document's text/writing direction. Default: "ltr" |
| `getRootNode` | () => ShadowRoot | Node | Document | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `name` | string | The name attribute of the rating element (used in forms). |
| `form` | string | The associate form of the underlying input element. |
| `readOnly` | boolean | Whether the rating is readonly. |
| `required` | boolean | Whether the rating is required. |
| `autoFocus` | boolean | Whether to autofocus the rating. |
| `translations` | IntlTranslations | Specifies the localized strings that identifies the accessibility elements and their states |
| `count` | number | The total number of ratings. Default: 5 |
| `allowHalf` | boolean | Whether to allow half stars. |
| `onHoverChange` | (details: HoverChangeDetails) => void | Function to be called when the rating value is hovered. |
---
# Segment Control
Capture input for a limited set of options.
```svelte
(align = e.value)}>
```
## States
### Disable Group
```svelte
(size = e.value)} disabled>
sm
md
lg
```
### Disable Item
```svelte
(size = e.value)}>
sm
md
lg
```
### Read-Only Group
```svelte
(size = e.value)} readOnly>
sm
md
lg
```
## Orientation
Set `orientation="vertical"` to enable a vertical layout.
```svelte
(size = e.value!)} orientation="vertical">
Small
Medium
Large
```
## Alternative
Consider using a Skeleton [Button Group](/docs/tailwind/buttons#group) if you need finer grain control over the markup and styling.
```svelte
January
February
March
```
## Anatomy
## API Reference
### Segment
| Property | Type | Description |
| --- | --- | --- |
| `base` | string | Sets base classes. |
| `background` | string | Set background classes. |
| `border` | string | Set border classes. |
| `flexDirection` | string | Set flex direction classes. |
| `gap` | string | Set gap classes. |
| `padding` | string | Set padding classes. |
| `rounded` | string | Set rounded classes. |
| `width` | string | Set width classes. |
| `classes` | string | Provide arbitrary CSS classes. |
| `orientVertical` | string | Set classes to provide a vertical layout. |
| `orientHorizontal` | string | Set classes to provide a horizontal layout. |
| `stateDisabled` | string | Set classes for the disabled state. |
| `stateReadOnly` | string | Set classes for the read-only state. |
| `indicatorBase` | string | Sets base classes to the indicator. |
| `indicatorBg` | string | Sets background classes to the indicator. |
| `indicatorText` | string | Sets text classes to the indicator. |
| `indicatorRounded` | string | Sets border radius classes to the indicator. |
| `indicatorClasses` | string | Provide arbitrary CSS classes to the indicator. |
| `labelledby` | string | Set aria-labelledby for element |
| `children` | Snippet<[]> | The default child slot. |
| `orientation` | "horizontal" | "vertical" | Orientation of the radio group |
| `ids` | Partial<{ root: string; label: string; indicator: string; item(value: string): string; itemLabel(value: string): string; itemControl(value: string): string; itemHiddenInput(value: string): string; }> | The ids of the elements in the radio. Useful for composition. |
| `value` | string | The controlled value of the radio group |
| `defaultValue` | string | The initial value of the checked radio when rendered. Use when you don't need to control the value of the radio group. |
| `disabled` | boolean | If `true`, the radio group will be disabled |
| `onValueChange` | (details: ValueChangeDetails) => void | Function called once a radio is checked |
| `dir` | "ltr" | "rtl" | The document's text/writing direction. Default: "ltr" |
| `getRootNode` | () => ShadowRoot | Node | Document | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `name` | string | The name of the input fields in the radio (Useful for form submission). |
| `form` | string | The associate form of the underlying input. |
| `readOnly` | boolean | Whether the checkbox is read-only |
### SegmentItem
| Property | Type | Description |
| --- | --- | --- |
| `base` | string | Sets base classes. |
| `classes` | string | Provide arbitrary CSS classes. |
| `stateDisabled` | string | Set classes for the disabled state. |
| `stateFocused` | string | Set classes for the focus state. |
| `labelBase` | string | Sets base classes for the label element. |
| `labelClasses` | string | Provide arbitrary CSS classes for the label element. |
| `children` | Snippet<[]> | The default child slot. |
| `value`* | string | |
| `disabled` | boolean | |
---
# Slider
Capture input from a range of values.
```svelte
(value = e.value)} />
```
## Multiple Handles
```svelte
(valueMulti = e.value)} />
```
## Markers
```svelte
(value = e.value)} markers={[25, 50, 75]} />
```
## Height & Size
```svelte
(value = e.value)} height="h-1" />
(value = e.value)} height="h-6" thumbSize="size-8" />
```
## Colors
```svelte
(value = e.value)} meterBg="bg-primary-500" thumbRingColor="ring-primary-500" />
(value = e.value)} meterBg="bg-secondary-500" thumbRingColor="ring-secondary-500" />
(value = e.value)} meterBg="bg-tertiary-500" thumbRingColor="ring-tertiary-500" />
```
## State
```svelte
Disabled
(value = e.value)} disabled />
Read-Only
(value = e.value)} readOnly />
```
## RTL
```svelte
(value = e.value)} dir="rtl" />
(valueMulti = e.value)} dir="rtl" />
```
## Usage Within Forms
Make sure to add a unique `name` property.
## Anatomy
## API Reference
### Slider
| Property | Type | Description |
| --- | --- | --- |
| `markers` | number[] | Provide an array of value markers |
| `height` | string | Set height classes for the overall slider. |
| `base` | string | Set base classes. |
| `spaceY` | string | Set vertical spacing between the control and markers. |
| `classes` | string | Provide arbitrary classes for the root. |
| `controlBase` | string | Set base classes for the control. |
| `controlClasses` | string | Provide arbitrary classes for the control. |
| `trackBase` | string | Set base classes for the track. |
| `trackBg` | string | Set background classes for the track. |
| `trackRounded` | string | Set border radius classes for the track. |
| `trackClasses` | string | Provide arbitrary classes for the track. |
| `meterBase` | string | Set base classes for the meter. |
| `meterBg` | string | Set background classes for the meter. |
| `meterRounded` | string | Set border radius classes for the meter. |
| `meterClasses` | string | Provide arbitrary classes for the meter. |
| `thumbBase` | string | Set base classes for the thumb. |
| `thumbSize` | string | Set size classes for the thumb. |
| `thumbBg` | string | Set background classes for the thumb. |
| `thumbRingSize` | string | Set ring size classes for the thumb. |
| `thumbRingColor` | string | Set ring color classes for the thumb. |
| `thumbRounded` | string | Set border-radius classes for the thumb. |
| `thumbCursor` | string | Set cursor classes for the thumb. |
| `thumbClasses` | string | Provide arbitrary classes for the thumb. |
| `markersBase` | string | Set base classes for the markers. |
| `markersClasses` | string | Provide arbitrary classes for the markers. |
| `markBase` | string | Set base classes for each mark. |
| `markText` | string | Set text size classes for each mark. |
| `markOpacity` | string | Set opacity classes for each mark. |
| `markClasses` | string | Provide arbitrary classes for each mark. |
| `stateDisabled` | string | Set disabled state classes for the root element. |
| `stateReadOnly` | string | Set read-only state classes for the root element. |
| `mark` | Snippet<[number]> | Replace numeric markers with symbol, such as a icon. Takes marker value as argument. |
| `orientation` | "horizontal" | "vertical" | The orientation of the slider Default: "horizontal" |
| `ids` | 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; }> | The ids of the elements in the slider. Useful for composition. |
| `value` | number[] | The controlled value of the slider |
| `defaultValue` | number[] | The initial value of the slider when rendered. Use when you don't need to control the value of the slider. |
| `disabled` | boolean | Whether the slider is disabled |
| `onValueChange` | (details: ValueChangeDetails) => void | Function invoked when the value of the slider changes |
| `onFocusChange` | (details: FocusChangeDetails) => void | Function invoked when the slider's focused index changes |
| `dir` | "ltr" | "rtl" | The document's text/writing direction. Default: "ltr" |
| `getRootNode` | () => ShadowRoot | Node | Document | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `name` | string | The name associated with each slider thumb (when used in a form) |
| `form` | string | The associate form of the underlying input element. |
| `readOnly` | boolean | Whether the slider is read-only |
| `invalid` | boolean | Whether the slider is invalid |
| `aria-label` | string[] | The aria-label of each slider thumb. Useful for providing an accessible name to the slider |
| `min` | number | The minimum value of the slider Default: 0 |
| `max` | number | The maximum value of the slider Default: 100 |
| `aria-labelledby` | string[] | The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider |
| `onValueChangeEnd` | (details: ValueChangeDetails) => void | Function invoked when the slider value change is done |
| `getAriaValueText` | (details: ValueTextDetails) => string | Function that returns a human readable value for the slider thumb |
| `step` | number | The step value of the slider Default: 1 |
| `minStepsBetweenThumbs` | number | The minimum permitted steps between multiple thumbs. Default: 0 |
| `origin` | "start" | "center" | "end" | The origin of the slider range. The track is filled from the origin to the thumb for single values. - "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative) - "end": Useful when the value represents an offset from the end Default: "start" |
| `thumbAlignment` | "center" | "contain" | The alignment of the slider thumb relative to the track - `center`: the thumb will extend beyond the bounds of the slider track. - `contain`: the thumb will be contained within the bounds of the track. Default: "contain" |
---
# Switch
A control for toggling between checked states.
```svelte
(state = e.checked)} />
```
## List
```svelte
Default to the inactive state.
(disturb = e.checked)}>
Default to the active state.
(notifications = e.checked)}>
Shown in disabled mode.
(disabled = e.checked)} disabled>
```
## Icons
Pass icons through the `inactiveChild` and `activeChild` snippets respectively.
```svelte
{#snippet inactiveChild()}
```
## Compact
Apply the `compact` prop to switch a minimal display.
```svelte
{#snippet inactiveChild()}
```
## Light Switch
This is a full fledge example using multiple features.
```svelte
handleModeChange(e.checked)}>
{#snippet inactiveChild()}
```
## Anatomy
## API Reference
### Switch
| Property | Type | Description |
| --- | --- | --- |
| `compact` | boolean | Set the compact display mode. |
| `base` | string | Set base classes for the root element. |
| `classes` | string | Provide arbitrary classes to the root element. |
| `stateFocused` | string | Set classes for the focus state. |
| `controlBase` | string | Set base classes for the control element. |
| `controlInactive` | string | Set inactive state classes for the control element. |
| `controlActive` | string | Set active state classes for the control element. |
| `controlDisabled` | string | Set disabled state classes for the control element. |
| `controlWidth` | string | Set width classes for the control element. |
| `controlHeight` | string | Set height classes for the control element. |
| `controlPadding` | string | Set padding classes for the control element. |
| `controlRounded` | string | Set rounded classes for the control element. |
| `controlHover` | string | Set hover classes for the control element. |
| `controlClasses` | string | Provide arbitrary classes to the control element. |
| `thumbBase` | string | Set base classes for the thumb element. |
| `thumbInactive` | string | Set inactive classes for the thumb element. |
| `thumbActive` | string | Set active classes for the thumb element. |
| `thumbRounded` | string | Set rounded classes for the thumb element. |
| `thumbTranslateX` | string | Set animation X-axis translate classes for the thumb element. |
| `thumbTransition` | string | Set animation transition classes for the thumb element. |
| `thumbEase` | string | Set animation easing classes for the thumb element. |
| `thumbDuration` | string | Set animation duration classes for the thumb element. |
| `thumbClasses` | string | Provide arbitrary classes to the thumb element. |
| `labelBase` | string | Set base classes for the label element. |
| `labelClasses` | string | Provide arbitrary classes to the label element. |
| `iconInactiveBase` | string | Set base classes for the inactive icon child. |
| `iconActiveBase` | string | Set base classes for the active icon child. |
| `children` | Snippet<[]> | The default children snippet. |
| `inactiveChild` | Snippet<[]> | The inactive state snippet. |
| `activeChild` | Snippet<[]> | The active state snippet. |
| `ids` | Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string; }> | The ids of the elements in the switch. Useful for composition. |
| `value` | string | number | The value of switch input. Useful for form submission. Default: "on" |
| `disabled` | boolean | Whether the switch is disabled. |
| `dir` | "ltr" | "rtl" | The document's text/writing direction. Default: "ltr" |
| `getRootNode` | () => ShadowRoot | Node | Document | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `name` | string | The name of the input field in a switch (Useful for form submission). |
| `form` | string | The id of the form that the switch belongs to |
| `readOnly` | boolean | Whether the switch is read-only |
| `invalid` | boolean | If `true`, the switch is marked as invalid. |
| `required` | boolean | If `true`, the switch input is marked as required, |
| `label` | string | Specifies the localized strings that identifies the accessibility elements and their states |
| `onCheckedChange` | (details: CheckedChangeDetails) => void | Function to call when the switch is clicked. |
| `checked` | boolean | The controlled checked state of the switch |
| `defaultChecked` | boolean | The initial checked state of the switch when rendered. Use when you don't need to control the checked state of the switch. |
---
# Tabs
Use tabs to quickly switch between different views and pages.
```svelte
(group = e.value)}>
{#snippet list()}
Plane
Boat
Car
{/snippet}
{#snippet content()}
Plane Panel - {lorem}
Boat Panel - {lorem}
Car Panel - {lorem}
{/snippet}
```
## Icons
Easily customize tabs content with icons and arrange them in any combination you prefer.
```svelte
(group = e.value)}>
{#snippet list()}
{/snippet}
{#snippet content()}
Plane Panel - {lorem}
Boat Panel - {lorem}
Car Panel - {lorem}
{/snippet}
```
```svelte
(group = e.value)}>
{#snippet list()}
{#snippet lead()}
{#snippet lead()}
{#snippet lead()}
{/snippet}
{#snippet content()}
Plane Panel - {lorem}
Boat Panel - {lorem}
Car Panel - {lorem}
{/snippet}
```
## Fluid
Set `fluid` to enable tabs to stretch to fill the available width.
```svelte
(group = e.value)} fluid>
{#snippet list()}
Plane
Boat
Car
{/snippet}
{#snippet content()}
Plane Panel - {lorem}
Boat Panel - {lorem}
Car Panel - {lorem}
{/snippet}
```
## Justify
```svelte
(group = e.value)} listJustify="justify-center">
{#snippet list()}
Plane
Boat
Car
{/snippet}
{#snippet content()}
Plane Panel - {lorem}
Boat Panel - {lorem}
Car Panel - {lorem}
{/snippet}
```
## RTL
```svelte
(group = e.value)} dir="rtl">
{#snippet list()}
Plane
Boat
Car
{/snippet}
{#snippet content()}
Plane Panel - {lorem}
Boat Panel - {lorem}
Car Panel - {lorem}
{/snippet}
```
## Anatomy
## API Reference
### Tabs
| Property | Type | Description |
| --- | --- | --- |
| `fluid` | boolean | Set tabs to stretch to fill the available width. |
| `base` | string | Set base classes for the root element. |
| `classes` | string | Provide arbitrary classes for the root element. |
| `listBase` | string | Set base classes for the list element. |
| `listJustify` | string | Set justify classes for the list element. |
| `listBorder` | string | Set border classes for the list element. |
| `listMargin` | string | Set margin classes for the list element. |
| `listGap` | string | Set gap classes for the list element. |
| `listClasses` | string | Provide arbitrary classes for the list element. |
| `contentBase` | string | Set base classes for the panel group element. |
| `contentClasses` | string | Provide arbitrary classes for the panel group element. |
| `list` | Snippet<[]> | Slot containing the list of tab controls. |
| `content` | Snippet<[]> | Slot containing the list of panels. |
| `ids` | Partial<{ root: string; trigger: string; list: string; content: string; indicator: string; }> | The ids of the elements in the tabs. Useful for composition. |
| `value` | string | The controlled selected tab value |
| `defaultValue` | string | The initial selected tab value when rendered. Use when you don't need to control the selected tab value. |
| `onValueChange` | (details: ValueChangeDetails) => void | Callback to be called when the selected/active tab changes |
| `onFocusChange` | (details: FocusChangeDetails) => void | Callback to be called when the focused tab changes |
| `dir` | "ltr" | "rtl" | The document's text/writing direction. Default: "ltr" |
| `getRootNode` | () => ShadowRoot | Node | Document | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `loopFocus` | boolean | Whether the keyboard navigation will loop from last tab to first, and vice versa. Default: true |
| `translations` | IntlTranslations | Specifies the localized strings that identifies the accessibility elements and their states |
| `composite` | boolean | Whether the tab is composite |
| `navigate` | (details: NavigateDetails) => void | Function to navigate to the selected tab when clicking on it. Useful if tab triggers are anchor elements. |
| `activationMode` | "manual" | "automatic" | The activation mode of the tabs. Can be `manual` or `automatic` - `manual`: Tabs are activated when clicked or press `enter` key. - `automatic`: Tabs are activated when receiving focus Default: "automatic" |
| `deselectable` | boolean | Whether the active tab can be deselected when clicking on it. |
### TabsControl
| Property | Type | Description |
| --- | --- | --- |
| `base` | string | Set base classes for the control element. |
| `padding` | string | Set padding classes for the control element. |
| `translateX` | string | Set x-axis translate classes for the control element. |
| `classes` | string | Provide arbitrary classes for the control element. |
| `labelBase` | string | Set base classes for the label element. |
| `labelClasses` | string | Provide arbitrary classes for the label element. |
| `stateInactive` | string | Set inactive classes for the control element. |
| `stateActive` | string | Set active classes for the control element. |
| `stateLabelInactive` | string | Set inactive classes for the label element. |
| `stateLabelActive` | string | Set active classes for the label element. |
| `lead` | Snippet<[]> | The lead slot. |
| `children` | Snippet<[]> | The default child slot. |
| `value`* | string | The value of the tab |
| `disabled` | boolean | Whether the tab is disabled |
### TabsPanel
| Property | Type | Description |
| --- | --- | --- |
| `base` | string | Set base classes for the panel element. |
| `classes` | string | Provide arbitrary classes for the panel element. |
| `children` | Snippet<[]> | The default child slot. |
| `value`* | string | The value of the tab |
---
# Tags Input
Allows input of multiple values.
```svelte
(flavors = e.value)} placeholder="Add Tag..." />
```
## Icons
```svelte
(flavors = e.value)} placeholder="Add Tag...">
{#snippet buttonDelete()}
```
## Colors
```svelte
(flavors = e.value)}
placeholder="Add Tag..."
tagBackground="preset-filled-primary-500"
/>
(flavors = e.value)}
placeholder="Add Tag..."
tagBackground="preset-filled-secondary-500"
/>
(flavors = e.value)}
placeholder="Add Tag..."
tagBackground="preset-filled-tertiary-500"
/>
```
## Disabled
```svelte
(flavors = e.value)} placeholder="Add Tag..." disabled />
```
## Additional Features
```svelte
Not Editable Tags
(flavors = e.value)} placeholder="Add Tag..." editable={false} />
Add Tag on Paste
(flavors = e.value)} placeholder="Add Tag..." addOnPaste />
```
## Anatomy
## API Reference
### TagsInput
| Property | Type | Description |
| --- | --- | --- |
| `placeholder` | string | Set the add tag input placeholder. |
| `base` | string | Set base classes for the root. |
| `gap` | string | Set gap classes for the root. |
| `padding` | string | Set padding classes for the root. |
| `classes` | string | Provide arbitrary classes to the root. |
| `inputBase` | string | Set base classes for the add tag input. |
| `inputClasses` | string | Provide arbitrary classes to the add tag input. |
| `tagListBase` | string | Set base classes for the tag list. |
| `tagListClasses` | string | Provide arbitrary classes to the tag list. |
| `tagBase` | string | Set base classes for each tag. |
| `tagBackground` | string | Set background classes for each tag. |
| `tagClasses` | string | Provide arbitrary classes to each tag. |
| `tagEditInputBase` | string | Set base classes for the edit tag input. |
| `tagEditInputClasses` | string | Provide arbitrary classes to the edit tag input. |
| `buttonDeleteBase` | string | Set base classes for the delete button. |
| `buttonDeleteClasses` | string | Provide arbitrary classes to the delete button. |
| `stateDisabled` | string | Set the component disabled state. |
| `buttonDelete` | Snippet<[]> | The delete button label snippet. |
| `ids` | 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; }> | The ids of the elements in the tags input. Useful for composition. |
| `value` | string[] | The controlled tag value |
| `defaultValue` | string[] | The initial tag value when rendered. Use when you don't need to control the tag value. |
| `disabled` | boolean | Whether the tags input should be disabled |
| `onValueChange` | (details: ValueChangeDetails) => void | Callback fired when the tag values is updated |
| `dir` | "ltr" | "rtl" | The document's text/writing direction. Default: "ltr" |
| `getRootNode` | () => ShadowRoot | Node | Document | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `inputValue` | string | The controlled tag input's value |
| `defaultInputValue` | string | The initial tag input value when rendered. Use when you don't need to control the tag input value. |
| `name` | string | The name attribute for the input. Useful for form submissions |
| `form` | string | The associate form of the underlying input element. |
| `readOnly` | boolean | Whether the tags input should be read-only |
| `invalid` | boolean | Whether the tags input is invalid |
| `required` | boolean | Whether the tags input is required |
| `autoFocus` | boolean | Whether the input should be auto-focused |
| `onInputValueChange` | (details: InputValueChangeDetails) => void | Callback fired when the input value is updated |
| `onHighlightChange` | (details: HighlightChangeDetails) => void | Callback fired when a tag is highlighted by pointer or keyboard navigation |
| `translations` | IntlTranslations | Specifies the localized strings that identifies the accessibility elements and their states |
| `onPointerDownOutside` | (event: PointerDownOutsideEvent) => void | Function called when the pointer is pressed down outside the component |
| `onFocusOutside` | (event: FocusOutsideEvent) => void | Function called when the focus is moved outside the component |
| `onInteractOutside` | (event: InteractOutsideEvent) => void | Function called when an interaction happens outside the component |
| `validate` | (details: ValidateArgs) => boolean | Returns a boolean that determines whether a tag can be added. Useful for preventing duplicates or invalid tag values. |
| `max` | number | The max number of tags Default: Infinity |
| `maxLength` | number | The max length of the input. |
| `delimiter` | string | RegExp | The character that serves has: - event key to trigger the addition of a new tag - character used to split tags when pasting into the input Default: "," |
| `editable` | boolean | Whether a tag can be edited after creation, by pressing `Enter` or double clicking. Default: true |
| `onValueInvalid` | (details: ValidityChangeDetails) => void | Callback fired when the max tag count is reached or the `validateTag` function returns `false` |
| `blurBehavior` | "clear" | "add" | The behavior of the tags input when the input is blurred - `"add"`: add the input value as a new tag - `"clear"`: clear the input value |
| `addOnPaste` | boolean | Whether to add a tag when you paste values into the tag input Default: false |
| `allowOverflow` | boolean | Whether to allow tags to exceed max. In this case, we'll attach `data-invalid` to the root |
---
# Toast
Build a toast notification system.
The first example showcases the complete setup process for a reusable toast component, while the following are abridged to handle everything in a single file. Please keep this in mind when following these examples.
```svelte
```
## Trigger Methods
Use the generic `create()` method to trigger toasts of type: `info|success|warning|error`.
```ts
toaster.create({
type: 'info',
title: 'This is a toast',
description: 'This is a toast description.'
});
```
Additonally, four shorthand methods are available for specific toast types.
- `info()`
- `success()`
- `warning()`
- `error()`
```svelte
{
toaster.info({
title: 'This is a toast!'
});
}}>Info
{
toaster.success({
title: 'This is a toast!'
});
}}>Success
{
toaster.warning({
title: 'This is a toast!'
});
}}>Warning
{
toaster.error({
title: 'This is a toast!'
});
}}>Error
```
## Placement
Provide a `placement` option for `createToaster()`. Accepts the following:
- `top-start`
- `top-end`
- `bottom-start`
- `bottom-end`
```svelte
{
toaster.info({
title: 'This is a toast!'
});
}}>Toast
```
## Closable
Set `closable` to `false` to disable the close button toasts.
```svelte
{
toaster.info({
title: 'This is an unclosable toast!',
closable: false
});
}}>Toast
```
## Promise
Use `promise()` to create a toast configured based on the state of a promise. The toast will automatically update based on the state of the promise.
```svelte
{
toaster.promise(getTask(), {
loading: {
title: 'Loading...',
description: 'Please wait while the task is being processed.'
},
success: () => ({
title: 'Success',
description: 'Your request has been completed'
}),
error: () => ({
title: 'Error',
description: 'An error has occurred'
})
});
}}>Execute Task
```
## API Reference
### Toaster
| Property | Type | Description |
| --- | --- | --- |
| `toaster`* | ToastStore | |
| `base` | string | Provide base classes for the root element. |
| `width` | string | Provide width classes for the root element. |
| `padding` | string | Provide padding classes for the root element. |
| `rounded` | string | Provide border radius classes for the root element. |
| `classes` | string | Provide arbitrary classes for the toast cards. |
| `messageBase` | string | Provide base classes for the message. |
| `messageClasses` | string | Provide classes for the message. |
| `titleBase` | string | Provide base classes for the title. |
| `titleClasses` | string | Provide classes for the title. |
| `descriptionBase` | string | Provide base classes for the description. |
| `descriptionClasses` | string | Provide classes for the description. |
| `btnDismissBase` | string | Provide base classes for the dismiss button. |
| `btnDismissClasses` | string | Provide arbitrary classes for the dismiss button. |
| `stateInfo` | string | Provide base classes for info toasts. |
| `stateSuccess` | string | Provide base classes for success toasts. |
| `stateWarning` | string | Provide base classes for warning toasts. |
| `stateError` | string | Provide base classes for error toasts. |
| `placement` | Placement | The placement of the toast Default: "bottom" |
| `max` | number | The maximum number of toasts Default: 24 |
| `overlap` | boolean | Whether to overlap the toasts |
| `duration` | number | The duration of the toast. By default, it is determined by the type of the toast. |
| `gap` | number | The gap between the toasts Default: 16 |
| `offsets` | string | Record<"top" | "bottom" | "left" | "right", string> | The offset from the safe environment edge of the viewport Default: "1rem" |
| `hotkey` | string[] | The hotkey that will move focus to the toast group Default: '["altKey", "KeyT"]' |
| `removeDelay` | number | The duration for the toast to kept alive before it is removed. Useful for exit transitions. Default: 200 |
| `pauseOnPageIdle` | boolean | Whether to pause toast when the user leaves the browser tab Default: false |
### Toast
| Property | Type | Description |
| --- | --- | --- |
| `toast`* | Options | |
| `index`* | number | |
| `parent`* | ToastGroupService | |
| `max` | number | The maximum number of toasts Default: 24 |
| `base` | string | Provide base classes for the root element. |
| `width` | string | Provide width classes for the root element. |
| `padding` | string | Provide padding classes for the root element. |
| `rounded` | string | Provide border radius classes for the root element. |
| `classes` | string | Provide arbitrary classes for the toast cards. |
| `messageBase` | string | Provide base classes for the message. |
| `messageClasses` | string | Provide classes for the message. |
| `titleBase` | string | Provide base classes for the title. |
| `titleClasses` | string | Provide classes for the title. |
| `descriptionBase` | string | Provide base classes for the description. |
| `descriptionClasses` | string | Provide classes for the description. |
| `btnDismissBase` | string | Provide base classes for the dismiss button. |
| `btnDismissClasses` | string | Provide arbitrary classes for the dismiss button. |
| `stateInfo` | string | Provide base classes for info toasts. |
| `stateSuccess` | string | Provide base classes for success toasts. |
| `stateWarning` | string | Provide base classes for warning toasts. |
| `stateError` | string | Provide base classes for error toasts. |
| `placement` | Placement | The placement of the toast Default: "bottom" |
| `overlap` | boolean | Whether to overlap the toasts |
| `duration` | number | The duration of the toast. By default, it is determined by the type of the toast. |
| `gap` | number | The gap between the toasts Default: 16 |
| `offsets` | string | Record<"top" | "bottom" | "left" | "right", string> | The offset from the safe environment edge of the viewport Default: "1rem" |
| `hotkey` | string[] | The hotkey that will move focus to the toast group Default: '["altKey", "KeyT"]' |
| `removeDelay` | number | The duration for the toast to kept alive before it is removed. Useful for exit transitions. Default: 200 |
| `pauseOnPageIdle` | boolean | Whether to pause toast when the user leaves the browser tab Default: false |
## Alternatives
If you're looking for power user features or more control over templates, consider using [Svelte-French-Toast](https://svelte-french-toast.com/).
```
```
---
# Integrations
# Iconography
Learn how to integrate Lucide for iconography in Skeleton.
Skeleton takes an agnostic approach to icons, meaning you can use any combination of SVGs, emoji, unicode, or dedicated icon libraries.
Mix and match to fulfill your project's unique requirements.
## Lucide
If you're looking for an opinionated solution, Skeleton recommends [Lucide](https://lucide.dev/). This provides a huge selection of icons that are available to all popular frameworks and feature a clean and modern style. All code examples in this documentation site implement Lucide, but feel free to replace with any alternative.
### Installation
Follow the official instructions to install [Lucide for Svelte](https://lucide.dev/guide/packages/lucide-svelte).
## Usage
For optimal performance we recommend importing each icon using the full path.
```svelte
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.
Shiki Documentation →
## Installation
[Install Shiki](https://shiki.style/guide/install) with your preferred package manager.
```console
npm install -D shiki
```
## Create a Component
A reusable component should suffice in most projects. Tap the `code` tab below to access the source, then follow the steps below.
1. Implement a new `` component in `/src/lib/components/CodeBlock/CodeBlock.svelte`.
2. Implement the required component prop types in `/src/lib/components/CodeBlock/types.ts`.
3. Implement several variations of our `` component in any SvelteKit route `+page.svelte`.
```svelte
{@html generatedHtml}
```
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](http://localhost:4321/docs/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 `` tag is auto-generated by Shiki; target utility classes with: `[&>pre]:myClassHere`.
## Programmatic Usage
This use case falls outside the scope of Skeleton. The following is provided merely as guidance.
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 `` or `` elements. For this, you'll need to follow the general steps below. Specific implementation may differ based on your app and meta-framework.
1. Query all `` or `` 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.
For more instructions, please refer to this guide by [Joy of Code](https://joyofcode.xyz/) explaining how to [implement Shiki via MDX](https://joyofcode.xyz/sveltekit-markdown-blog#using-components-inside-markdown).
## 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.
---
# Popover
Learn how to integrate dynamic and interactive popover interfaces.
## Floating UI Svelte
Please note this section will be the future home of the [Floating UI Svelte](https://floating-ui-svelte.vercel.app/) integration guide,
an upcoming open-source library from [Skeleton Labs](https://github.com/skeletonlabs/floating-ui-svelte/discussions/50). While this
project is in development, we have provided several Svelte-specific components to act as temporary substitutions. Note that these
components will remain available until our next major release (Skeleton v4.x). However, the goal will be to replace these with Floating
UI Svelte as soon as possible.
## Z-Index
Skeleton does not take an opinionated stance regarding z-index stacking. This means elements may be occluded beneath other elements with a higher index. Adjust this using the `zIndex` component property.
```svelte
```
## Popover
Triggers an anchored popover when you click the trigger element. [View API Reference](https://zagjs.com/components/react/popover#methods-and-properties).
```svelte
(openState = e.open)}
positioning={{ placement: 'top' }}
triggerBase="btn preset-tonal"
contentBase="card bg-surface-200-800 p-4 space-y-4 max-w-[320px]"
arrow
arrowBackground="!bg-surface-200 dark:!bg-surface-800"
>
{#snippet trigger()}Click Me{/snippet}
{#snippet content()}
This will display a basic popover with a header and body. This also includes a title, description, and close button.
{/snippet}
```
### Anatomy
### API Reference
## Tooltip
Triggers an anchored popover when you hover the trigger element. [View API Reference](https://zagjs.com/components/react/tooltip#methods-and-properties).
```svelte
(openState = e.open)}
positioning={{ placement: 'top' }}
triggerBase="underline"
contentBase="card preset-filled p-4"
openDelay={200}
arrow
>
{#snippet trigger()}Hover Me{/snippet}
{#snippet content()}This is a tooltip.{/snippet}
```
### Anatomy
### API Reference
## Combobox
Triggers an anchored popover list when you tap the arrow. Includes auto-suggestion via typeahead. [View API Reference](https://zagjs.com/components/react/combobox#methods-and-properties).
```svelte
(selectedCountry = e.value)}
label="Select Country"
placeholder="Select..."
>
{#snippet item(item)}
{item.label}
{item.emoji}
{/snippet}
```
### Anatomy
### API Reference
## Modal
Generate modals or dialogs that require a user's immediate attention. [View API Reference](https://zagjs.com/components/react/dialog#methods-and-properties).
```svelte
(openState = e.open)}
triggerBase="btn preset-tonal"
contentBase="card bg-surface-100-900 p-4 space-y-4 shadow-xl max-w-screen-sm"
backdropClasses="backdrop-blur-sm"
>
{#snippet trigger()}Open Modal{/snippet}
{#snippet content()}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, ab adipisci. Libero cumque sunt quis error veritatis amet, expedita
voluptatem. Quos repudiandae consequuntur voluptatem et dicta quas, reprehenderit velit excepturi?
{/snippet}
```
```svelte
(drawerState = e.open)}
triggerBase="btn preset-tonal"
contentBase="bg-surface-100-900 p-4 space-y-4 shadow-xl w-[480px] h-screen"
positionerJustify="justify-start"
positionerAlign=""
positionerPadding=""
transitionsPositionerIn={{ x: -480, duration: 200 }}
transitionsPositionerOut={{ x: -480, duration: 200 }}
>
{#snippet trigger()}Open Drawer{/snippet}
{#snippet content()}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, ab adipisci. Libero cumque sunt quis error veritatis amet, expedita
voluptatem. Quos repudiandae consequuntur voluptatem et dicta quas, reprehenderit velit excepturi?
{/snippet}
```
### Anatomy
### API Reference
## Native Browser APIs
Skeleton will always favor native browser APIs over third-party libraries such as Floating UI Svelte. The following is a list of current and upcoming incoming APIs we will aim to support in the future, but are not quite standardized cross-browser yet.
- [Dialog Cookbook](/docs/guides/cookbook/dialog)
- [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- [CSS Anchoring Position](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)
---