This documentation provides a comprehensive reference for the Skeleton v3 UI framework, featuring React examples. If you are using a different JavaScript framework, please refer to the respective framework-specific documentation for examples. Always utilize Skeleton UI components, classes, and styles whenever possible. # Get Started # Core API Learn about the specific features Skeleton introduces to Tailwind. {

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

} --- ## @base Extends Tailwind's base layer with a set of opinionated global styles.
View Global Styles
- Sets the root color scheme to match Dark Mode settings. - Updates scrollbars to utilize theme colors. - Updates global text selection to utilize theme colors. - Defines the `` background colors and base font styles. - Implements global default styles for disabled states, such as buttons. ## @theme Uses Tailwind's `@theme` to implement a variety of new properties and utility classes.
View Theme Properties
### Colors Extends colors to include the [Skeleton color palette](/docs/design/colors). | Class | Theme Property | | ------------------------------------- | ------------------------------------ | | `[property]-[color]-[shade]` | {`--`}color-[color]-[shade] | | `[property]-[color]-contrast-[shade]` | {`--`}color-[color]-contrast-[shade] | | `body-background-color` | {`--`}body-background-color | | `body-background-color-dark` | {`--`}body-background-color-dark | ### Color Pairings Extends colors to implement [Color Pairing](/docs/design/colors#color-pairings), which balance colors between light and dark mode. | Class | Theme Property | | ------------------------------------ | ----------------------------------- | | `[property]-[color]-[shade]-[shade]` | {`--`}color-[color]-[shade]-[shade] | ### Spacing Integrates Tailwind's [spacing property](https://tailwindcss.com/docs/functions-and-directives#spacing-function) to modify [dynamic scaling](/docs/design/spacing) for various utility classes. | Class | Theme Property | | --------- | -------------- | | (various) | {`--`}spacing | ### Typography Introduces a [typographic scale](https://designcode.io/typographic-scales) to all Tailwind [font sizes](https://tailwindcss.com/docs/font-size) using the following formula. ```plaintext --text-{size}: calc({remSize} * var(--text-scaling)); --text-{size}--line-height: calc(calc(1 / {remSize}) * var(--text-scaling)); ``` #### Base Controls the style of the global page text. | Class | Theme Property | | ---------------------- | -------------------------- | | `base-font-color` | {`--`}base-font-color | | `base-font-color-dark` | {`--`}base-font-color-dark | | `base-font-family` | {`--`}base-font-family | | `base-font-size` | {`--`}base-font-size | | `base-line-height` | {`--`}base-line-height | | `base-font-weight` | {`--`}base-font-weight | | `base-font-style` | {`--`}base-font-style | | `base-letter-spacing` | {`--`}base-letter-spacing | #### Heading Controls the style of the heading text. | Class | Theme Property | | ------------------------- | ----------------------------- | | `heading-font-color` | {`--`}heading-font-color | | `heading-font-color-dark` | {`--`}heading-font-color-dark | | `heading-font-family` | {`--`}heading-font-family | | `heading-font-size` | {`--`}heading-font-size | | `heading-line-height` | {`--`}heading-line-height | | `heading-font-weight` | {`--`}heading-font-weight | | `heading-font-style` | {`--`}heading-font-style | | `heading-letter-spacing` | {`--`}heading-letter-spacing | #### Anchor Controls the style of anchor links. | Class | Theme Property | | ------------------------------- | ----------------------------------- | | `anchor-font-color` | {`--`}anchor-font-color | | `anchor-font-color-dark` | {`--`}anchor-font-color-dark | | `anchor-font-family` | {`--`}anchor-font-family | | `anchor-font-size` | {`--`}anchor-font-size | | `anchor-line-height` | {`--`}anchor-line-height | | `anchor-font-weight` | {`--`}anchor-font-weight | | `anchor-font-style` | {`--`}anchor-font-style | | `anchor-letter-spacing` | {`--`}anchor-letter-spacing | | `anchor-text-decoration` | {`--`}anchor-text-decoration | | `anchor-text-decoration-active` | {`--`}anchor-text-decoration-active | | `anchor-text-decoration-focus` | {`--`}anchor-text-decoration-focus | | `anchor-text-decoration-hover` | {`--`}anchor-text-decoration-hover | ### Radius Extends Tailwind's radius properties with theme-specific sizes. | Class | Theme Property | | ------------------- | ---------------------- | | `rounded-base` | {`--`}radius-base | | `rounded-container` | {`--`}radius-container | ### Edges Sets the default width for border, divide, and ring width to match the active theme properties. | Class | Theme Property | | -------- | -------------------------- | | `border` | {`--`}default-border-width | | `ring` | {`--`}default-ring-width | | `divide` | {`--`}default-divide-width | ## @utility
View Utilities
### Tailwind Components Allow you to style semantic HTML elements with utility classes. ## @variant
View Variants
### Themes Enables you to target and style elements for a particular theme. ```html
...
...
...
``` ## Optional ### Presets Provides a canned set of styles for use with buttons, badges, cards, and more.
Browse Presets
### Preset Themes Provides a hand curated set of themes for Skeleton.
Browse Themes
--- # Fundamentals An introduction to the core concepts of Skeleton. {

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

} --- ## Design System ### Figma UI Kit A fully featured [Figma UI Kit](/figma) is available to designers, allowing them to quickly draft visual concept of your project. ### Iconography Skeleton is icon agnostic, meaning you may bring your own iconography solution. However, we highly recommend [Lucide](https://lucide.dev/) and utilize it for all examples in our documentation. Refer to our integration guides for [React](/docs/integrations/iconography/react) and [Svelte](/docs/integrations/iconography/svelte). ### Core Features The following features fall under the umbrella of our design system. Provided via the Skeleton core. --- ## Tailwind Tailwind components that act as primitives for creating complex interfaces. Provided via the Skeleton core. --- ## Components Skeleton also offers optional component packages for select frameworks, each component automatically adapt to Skeleton's design system. | Framework | NPM Package | Description | | --------- | ------------------------------- | ------------------------------------------------ | | React | `@skeletonlabs/skeleton-react` | Contains all components and features for React. | | Svelte | `@skeletonlabs/skeleton-svelte` | Contains all components and features for Svelte. | ### Powered by Zag.js Skeleton's components are built on **Zag.js**, which provides a collection of framework-agnostic UI component patterns to manage logic and state. Zag was founded and maintained by industry veterans, such Segun Adebayo - the creator and core maintainer for [Chakra UI](https://www.chakra-ui.com/).
View Zag.js
### Importing Component Import the component you wish to use from your framework package of choice, then insert it into your page template. ```ts ``` ```ts ``` ### Component Props Skeleton components properties (aka "props") are loosely defined into the following categories: - **Functional Props** - directly affect the functionality of the component, such as an `open` or `src`. - **Style Props** - accept Tailwind utility classes to affect styling, such as `background` for background color. - **Event Props** - callback functions that trigger upon interaction, such as `onclick`, `onkeypress`, and more. In the example below, we set functional props for `src` and `alt`, while also including a style prop for `background`. ```ts ``` ### Style Props Skeleton components are styled by default out of the box. However, if you wish to customize the look and feel, then you may do so utilizing Style Props. These fall into a few sub-categories. - `base` - the default styles for each component template element, implemented by default. - `{property}` - take individual utility classes to customize styling, such as `background`, `padding`, or `margin`. - `classes` - allows you to pass any arbitrary utility classes and extend the class list. Note this is plural. Imagine the Avatar component was created like so: ```ts title="Example Props" { src = './some-placeholder.jpg', alt = '', // ... base = 'flex justify-center items-center overflow-hidden', background = 'bg-slate-500', rounded = 'rounded-full', // ... classes = '', } ``` ```svelte title="Example Template"
{name}
``` We can use the `background` style prop to replace the default background color. ```svelte Sk ``` Since the component doesn't have a dedicated `border` prop, we can extend our class list using `classes`. ```svelte Sk ``` And we can optionally replace the default `base` styles like so. Just remember our other `{property}` styles will remain. ```svelte Sk ``` Additionally, child elements within the template use these same conventions, but prefixed like `imageBase` and `imageClasses`. ```svelte ``` Consult each component's [API reference](/docs/components/accordion/react#api-reference) for a complete list of available properties. ### Learn More For a comprehensive understanding of how Skeleton implements our components, please refer to our [contribution guidelines](/docs/resources/contribute/components). --- # Installation Learn how to install and setup Skeleton for your project. ## Mixing UI Libraries Skeleton's design system is perfect for complementing headless component libraries, such as [Melt UI](https://www.melt-ui.com/), [Radix](https://www.radix-ui.com/), and [Zag.js](https://zagjs.com/). As well as "Tailwind component" libraries such as the [Tailwind UI](https://tailwindui.com/). Supporting any component system that supports Tailwind, but very specifically allows you to insert or substitute Skeleton-provided utility classes. ### Unsupported Libraries Unfortunately, Skeleton cannot integrate with [Flowbite React](https://flowbite-react.com/), [Flowbite Svelte](https://flowbite-svelte.com/), or [Daisy UI](https://daisyui.com/) at this time. Similar to Skeleton, these libraries depend on their own dedicated Tailwind plugin that directly overlaps with many of our core features, including class names and color values. --- # Introduction Skeleton integrates with Tailwind to provide an opinionated solution for generating adaptive design systems. Including easy to use components for your favorite web frameworks. ## 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 ( <> `} ``` > ⚠️ _Important_ make sure you sanitize the CSS before inserting it or you'll be vulnerable 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. --- # Floating UI Attachments A Svelte-focused guide around integrating Floating UI and Svelte attachments. Please note that this is a Svelte-only guide based around the [attachments](https://svelte.dev/docs/svelte/svelte-attachments) feature introduced in Svelte `v5.29`. ### Summary The following will guide you through integrating [Floating UI](https://floating-ui.com/) in Svelte and generating a baseline [attachment](https://svelte.dev/docs/svelte/svelte-attachments) that can be used to scaffold any number of custom popover interfaces, including but not limited to: popovers, tooltips, dialogs, drawers, combobox, context menus, and more. ### Accessibility Warning This guide is not a drop-in replacement for Skeleton's [Svelte Popovers](/docs/integrations/popover/svelte) as it does not replicate all recommended accessbility features out of the box (such as ARIA attributes, focus states, keyboard interactions, etc). These features are out of scope of this guide. It will be your responsibility to handle these features before using this in a production environment. ### Target Audience This guide is intended for advanced Svelte users that wish to integrate directly with Floating UI, build custom floating interfaces, and go beyond the scope of Skeleton's [Svelte Popovers](/docs/integrations/popover/svelte). This can be used to generate interfaces not covered by Skeleton's Popover components. ## Installing Floating UI To begin, install the standard version of Floating UI. ```console npm install @floating-ui/dom ``` If this is your first time using Floating UI, we recommend following the [guided tutorial](https://floating-ui.com/docs/tutorial) to learn the basics. ## Creating a Svelte Attachment Next, let's generate our custom attachment. If you're working with SvelteKit, we recommend adding this to `/src/lib/attachments/floating.svelte.ts`. This attachment will handle the following critical functionality: 1. This imports the Svelte attachment and Floating UI dependencies. 2. Scaffolds a simple `PopoverOptions` interface, which defines our configuraton options. 3. Implement the `Popover` class, which handles all the business logic for creating and using the attachment. 4. And of course sets the default configuration via `options`. We'll cover each additional method below. ### reference() When implemented, this is spread to the **Trigger** element and handles interaction such as `click` and `hover`. ### floating() When implemented, this is spread to the **Popover** element itself. This uses [createAttachmentKey](https://svelte.dev/docs/svelte/svelte-attachments#createAttachmentKey) to generate the attachment relationship itself. ### isOpen() Returns the current `open` state as a boolean value. We'll use this to show and hide the popover on demand. ### #updatePosition() This scaffolds [computePosition](https://floating-ui.com/docs/computePosition), which handles most of Floating UI's functionality. ## Making the Tooltip Float Floating UI [requires these CSS styles](https://floating-ui.com/docs/tutorial#making-the-tooltip-float) to ensure the popover element "floats" over other UI. For this guide we'll handle this with a convention by adding the following your to global stylesheet. For SvelteKit this is located in `/src/app.css`. ```css [data-floating] { width: max-content; position: absolute; top: 0; left: 0; } ``` ## Usage ### Popover Add the following to any page within your application to generate a basic popover. 1. First, import the Popover attachment and generate an instance using `new Popover()`. 2. Next, create a wrapping `` to ensure your popover is not affected by the flow of the document. 3. Add your trigger button and spread the `popover.reference()` 4. Add your popover element and spread the `popover.floating()` 5. Apply `data-floating` to the popover element. 6. Wrap the popover element with `#if popover.isOpen()` to show/hide the popover. > TIP: you can optionally import a [Svelte transition](https://svelte.dev/docs/svelte/svelte-transition), such as `slide`. Then use this to trigger animations on the open/close state for the popover. ### Tooltip Add the following to any page within your application to generate a basic tooltip. 1. Similar to the Popover - we import, initialize, and scaffold the common attachment requirements. 2. Unlike the Popover though, we configure `new Popover({ ... })` to adjust `interaction` and `placement` settings. 3. We can also use a different transition, such as `fade`, as shown above. ## Handling Accessibility We recommend you follow the [Aria APG patterns](https://www.w3.org/WAI/ARIA/apg/patterns/) when generating popover interfaces for production use. We've linked a few of the common patterns below to help you get started. This covers `aria` and `role` attributes, keyboard interactions, and other best practices. - [Alert and Message Dialogs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/) - [Alert Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) - [Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) - [Dialog (Modal) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) - [Menu and Menubar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) - [Tooltip](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) --- # 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 implementation of the Switch component that can toggle the mode on demand. ```html // 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 ( // <> // ``` ## 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' } ]; ---
{ movies.map((movie) => ( {movie.name} )) }
``` > 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 ... ``` We've provided a curated collection of SVG Filters to choose from below. ```html ``` ## 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 Supports 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

Standard Colors

Color Pairings

``` 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 implemented in your CSS bundle as follows: ```css .text-primary-300-700 { color: light-dark(var(--color-primary-300), var(--color-primary-700)); } ``` This roughly equivalent to the following, just more compact, and enabling support for Tailwind's [Color Scheme](https://tailwindcss.com/docs/color-scheme) utilities. ```html
...
``` By default, Skeleton sets the overall app's color scheme to match light or dark mode. ### Pairing Previews The following is a static representation of each pairing. Only `primary` is shown, but all Skeleton colors are supported. The following shows actual Color Pairings. Toggle this website between light and dark mode to see how these react. ### When to use Pairings Color Parings are useful for generating a hierarchy of visual layers, ranging from foreground to background elements. Each reuse the same color ramp but, but inverts the order when toggling from light to dark mode. ```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
2
3
4
5
6
7
8
``` 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 disabling 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
Card
Card
Card
``` ### 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. Tap the theme preview above to copy the theme name to your clipboard. Then implement any desired theme in your app's global stylesheet. ```css title="app.css" {3} /* @import '@skeletonlabs/skeleton'; */ /* @import '@skeletonlabs/skeleton/optional/presets'; */ @import '@skeletonlabs/skeleton/themes/{theme-name}'; ``` > Make sure to replace `{theme-name}` with your desired theme names. ## Custom Themes Use our powerful Theme Generator app to create your own themes.
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 ``` ## 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-4

Aa
preset-typo-display-3

Aa
preset-typo-display-2

Aa
preset-typo-display-1

Aa
preset-typo-headline

Headline
preset-typo-title

Title
preset-typo-subtitle

Subtitle
preset-typo-body-1

Body 1
preset-typo-body-2

Body 2
preset-typo-caption Caption
preset-typo-menu Menu
preset-typo-button Button
``` --- # 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 Avatar
``` --- # Buttons Provide a variety of button, including customizable sizes and types. ```html --- ---
``` ## Presets Provides full support of [Presets](/docs/design/presets). ```html
``` ## Sizes ```html
``` ## Disabled When applied to a ` ``` ## Group ```html ``` --- # Cards Provides container elements that wrap and separate content. ```html

Card

``` ```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'; ---
banner

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 --- ---
``` ## Presets Provides full support of [Presets](/docs/design/presets). ```html
``` ## Disabled When applied to a ` ``` ## 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 ))}
); }; ``` --- # 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
``` ## Style Use Tailwind's [border style](https://tailwindcss.com/docs/border-style) utilities to adjust visual style. ```html
border-solid
border-dashed
border-dotted
border-double
``` ## Colors Use any Tailwind or Skeleton [colors or pairing](/docs/design/colors). ```html
border-primary-500
border-secondary-500
border-tertiary-500
border-success-500
border-warning-500
border-error-500
border-surface-950-50
``` ## Vertical Use `vr` for a vertical rule, which supports all above styles. Make sure to set the height. ```html
Default → ← border-l-8
``` --- # Forms and Inputs Various form and input styles. ```html ``` ## Prerequisites ### Tailwind Forms Skeleton relies on the official [Tailwind Forms](https://github.com/tailwindlabs/tailwindcss-forms) plugin to normalize form styling. This 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 --- ---
https://
``` | 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' } ]; ---
{ tableData.map((row) => ( )) }
A list of elements from the periodic table.
Position Symbol Name Weight
{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' } ]; ---
{ tableData.map((row) => ( )) }
First Name Last Name Email  
{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. ```react 'use client'; const lorem = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.'; return ( Club {(ctx) => (ctx.api.value.includes('item-1') ? '-' : '+')} {lorem}
Diamond {(ctx) => (ctx.api.value.includes('item-2') ? '-' : '+')} {lorem}
Heart {(ctx) => (ctx.api.value.includes('item-3') ? '-' : '+')} {lorem}
Spade {(ctx) => (ctx.api.value.includes('item-4') ? '-' : '+')} {lorem} ); } ``` ## State Note that `value` and `onValueChanged` are optional on the root component. ```react 'use client'; return ( Item 1 Content for Item 1
Item 2 Content for Item 2
Item 3 Content for Item 3 ); } ``` ## Collapsible By default you can't close open items. Adding `collapsible` changes this behavior. ```react 'use client'; return ( Club Content for Item 1
Diamond Content for Item 2
Heart Content for Item 3
Spade Content for Item 4 ); } ``` ## Multiple Adding `multiple` allows items to open independently. ```react 'use client'; return ( Item 1 Content for Item 1
Item 2 Content for Item 2
Item 3 Content for Item 3 ); } ``` ## Grid Columns Use [Grid Columns](https://tailwindcss.com/docs/grid-template-columns) to adjust the layout of the Trigger component. ```react 'use client'; return ( Club Content for Item 1
Diamond Content for Item 2
Heart Content for Item 3
Spade Content for Item 4 ); } ``` ## API Reference --- # Avatar An image with a fallback for representing the user. ```react 'use client'; return ( SK ); } ``` ## Fallback Use `` to provide initials, icons, or a framework-specific image component. ```react 'use client'; return ( SK ); } ``` ## Filter Avatars can implement [SVG Filters](/docs/guides/cookbook/svg-filters) using the image `className` attribute. ```react 'use client'; return ( <> SK ); } ``` ## API Reference --- # Rating Group Rating Group allows users to rate something ```react 'use client'; return ( {(ctx) => ctx.api.items.map((index) => ( {(ctx) => (ctx.itemState.highlighted ? : )} )) } ); } ``` ## Allow Half ```react 'use client'; return ( {(ctx) => ctx.api.items.map((index) => ( {(ctx) => { if (ctx.itemState.half) { return ; } if (ctx.itemState.highlighted) { return ; } return ; }} )) } ); } ``` ## Label ```react 'use client'; return ( Rate: {(ctx) => ctx.api.items.map((index) => ( {(ctx) => (ctx.itemState.highlighted ? : )} )) } ); } ``` ## Disabled ```react 'use client'; return ( {(ctx) => ctx.api.items.map((index) => ( {(ctx) => (ctx.itemState.highlighted ? : )} )) } ); } ``` ## Right-to-Left ```react 'use client'; return ( {(ctx) => ctx.api.items.map((index) => ( {(ctx) => (ctx.itemState.highlighted ? : )} )) } ); } ``` --- # Tabs Use tabs to quickly switch between different views and pages. ```react 'use client'; return ( Tab 1 Tab 2 Tab 3 Content for Tab 1 Content for Tab 2 Content for Tab 3 ); } ``` ## Fluid ```react 'use client'; return ( Tab 1 Tab 2 Tab 3 Content for Tab 1 Content for Tab 2 Content for Tab 3 ); } ``` ## RTL ```react 'use client'; return ( Tab 1 Tab 2 Tab 3 Content for Tab 1 Content for Tab 2 Content for Tab 3 ); } ``` ## API Reference --- # Integrations # Code Block Learn how to integrate Shiki, a beautiful yet powerful syntax highlighter.

Shiki (式, a Japanese word for "Style") is a beautiful and powerful syntax highlighter based on TextMate grammar and themes, the same engine as VS Code's syntax highlighting. It provides accurate and fast syntax highlighting for almost any mainstream programming language.

Shiki Documentation →
## Installation [Install Shiki](https://shiki.style/guide/install) with your preferred package manager. ```console npm install -D shiki ``` ## Next.js Integration Shiki provides [official documentation](https://shiki.style/packages/next) for integrating into Next.js. This guide will follow this outline. ## Create a Component A reusable component should suffice in most projects. Tap the `code` tab below to access the source, then follow the steps below. 1. Implement a new `` component in `/src/components/CodeBlock/CodeBlock.tsx`. 2. Implement the required component prop types in `/src/components/CodeBlock/types.ts`. 3. Implement several variations of our `` component in any route `page.tsx`. ```react "use client"; // Shiki // Themes // https://shiki.style/themes // Languages // https://shiki.style/languages // Types // https://shiki.style/guide/sync-usage const shiki = createHighlighterCoreSync({ engine: createJavaScriptRegexEngine(), // Implement your import theme. themes: [themeDarkPlus], // Implement your imported and supported languages. langs: [console, html, css, js, svelte], }); code = "", lang = "console", theme = "dark-plus", // Base Style Props base = "overflow-hidden", background = "bg-neutral-950", rounded = "rounded-container", shadow = "", classes = "", // Pre Style Props preBase = "", prePadding = "[&>pre]:p-4", preClasses = "", }) => { // Shiki convert to HTML const generatedHtml = shiki.codeToHtml(code, { lang, theme }); return (
); }; ``` 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.

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

---

# Iconography
Learn how to integrate Lucide for iconography in Skeleton.



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



## Lucide



	

		
		
		
	




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

## Installation

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

## Usage

```tsx

const App = () => {
	return ;
};

```

## Alternatives

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

---