# Skeleton Documentation
## Get Started
# Introduction
Learn more about Skeleton and how it can serve you.
Skeleton provides a uniform design language and structured framework for controlling the look and feel of your product and user experience. It serves as an opinionated design system that aims to greatly reduce the amount of time spent managing design elements and patterns, allowing you to more quickly build and manage your frontend interfaces at scale.
## In a Nutshell
{
Design System
This aims to augment Tailwind CSS. It provides themes, styled elements, and provides opinionated guardrails for integrating your fully
featured design system.
Components
Turnkey components built atop the foundation of{' '}
Zag.js
. These automatically adapt to the Skeleton design system out of the box. Currently available for Svelte and React.
}
## Our Philosophy
{
Framework Agnostic
Skeleton's core features are framework agnostic, only requiring the use of{' '}
Tailwind CSS
. This provides full access to all design system features, while enabling you to standardize the design process for your framework of
choice.
Native-First
We aim to embrace the interface of the web, not replace it. This is why Skeleton defaults to semantic HTML elements and native browser
APIs. Beyond ease of use, we feel this offers a huge advantages to accessibility.
Simple Standards
We aim to standardize the design process, providing common conventions that are easy to learn and retain, whether you work alone or in
a team environment. Covering common fixtures such as themes, colors, typography, spacing, and more.
Utility-First
Skeleton embraces the{' '}
utility-first
{' '}
methodology for styling, supporting all features provided by{' '}
Tailwind
, while extending its capabilities in meaningful ways. Providing full support for the encapsulated components of the modern web.
Opt-In by Default
Most features in Skeleton are modular and opt-in by default. Enabling interface features like buttons and typography via dedicated
utility classes. This allows for a simple escape hatch when you need to draw outside the lines and generate custom interfaces.
Adaptive
Skeleton is intended to adapt to the design and aesthetic of your project, while still providing reasonable defaults. Providing a
powerful{' '}
theme generator
{' '}
for custom themes, while also supplying a curated set of themes for those less design savvy.
Skeleton has maintained a frequent release cadence over for years. Just take a look at our{' '}
Releases
.
Community Tools
We promote community-based projects that help augment Skeleton and improve your productivity, such as the{' '}
Figma UI Kit
.
}
# Installation
Learn how to install and setup Skeleton for your project.
## Guides
doc.id.includes('installation/')} class="md:grid-cols-2" />
## Mixing UI Libraries
Skeleton's design system is perfect for complementing headless component libraries, such as [Bits UI](/docs/\[framework]/integrations/bits-ui), [Melt UI](/docs/\[framework]/integrations/melt-ui), [Radix](/docs/\[framework]/integrations/radix-ui), and [Zag.js](https://zagjs.com/). As well as "Tailwind component" libraries such as the [Tailwind Plus](https://tailwindcss.com/plus). Supporting any component system that supports Tailwind, but very specifically allows you to insert or substitute Skeleton-provided utility classes.
### Unsupported Libraries
Unfortunately, Skeleton cannot integrate with [Flowbite React](https://flowbite-react.com/), [Flowbite Svelte](https://flowbite-svelte.com/), or [Daisy UI](https://daisyui.com/) at this time. Similar to Skeleton, these libraries make changes to Tailwind that directly overlaps with many of our core features, including class names and color values.
# Fundamentals
An introduction to the core concepts of Skeleton.
Skeleton is comprised of three pillars - the design system, our extensions to Tailwind, and an optional suite of framework-specific components. Together these form a comprehensive solution for designing and implementing complex web interfaces at scale.
***
## Design System
Explore each pillar of the Skeleton design system. Provided via the Skeleton core.
doc.id.includes('design/')} class="md:grid-cols-2" />
***
## Tailwind Components
Tailwind components that act as primitives for creating complex interfaces. Provided via the Skeleton core.
doc.id.includes('tailwind-components/')} class="md:grid-cols-2" />
***
## Framework Components
Skeleton also offers optional component packages for select component frameworks. Each component automatically adapts to Skeleton's design system. While still allowing a high level of customization.
### Supported Frameworks
\| Framework | NPM Package | Description |
\| --------- | ------------------------------- | ------------------------------- |
\| React | `@skeletonlabs/skeleton-react` | Contains all React components. |
\| Svelte | `@skeletonlabs/skeleton-svelte` | Contains all Svelte components. |
### Powered by Zag.js
Skeleton's components are built on **Zag.js**, which provides a collection of framework-agnostic UI component patterns to manage logic and state. Zag is actively maintained by industry veterans, such as [Segun Adebayo](https://github.com/segunadebayo) - the creator and core maintainer for [Chakra UI](https://www.chakra-ui.com/), [Ark UI](https://ark-ui.com/), and [PandaCSS](https://panda-css.com/).
View Zag.js
### Importing Components
You may import components per each Skeleton framework as follows.
```ts
import { Avatar } from '@skeletonlabs/skeleton-svelte';
```
This also includes access to the component prop types.
```ts
import type { AvatarRootProps, ... } from '@skeletonlabs/skeleton-svelte';
```
### Composed Pattern
Skeleton components are granular. This offers direct access to all children within the tree, similar to working with raw HTML. This allows passing in arbitrary props and attributes directly to the template within. Including: `required`, `data-*`, `style`, `class`, and more.
```svelte
SK
```
### Styling Components
Skeleton components implement a universal convention for accepting CSS utility classes via the `class` attribute. Use this to pass any CSS utility class.
```svelte
SK
```
### Extensible Markup
Skeleton components provide a mechanism for overwriting the internal HTML with custom markup. Use the `element` prop to provide a custom element, this prop accepts a function which the `attributes` are passed into. Then spread the `attributes` to your custom elements. Note that this is an optional and advanced feature aimed at power users, and should not be needed for normal usage.
```svelte
{#snippet element(attributes)}
{/snippet}
Content for Item 1
```
### Custom Animations
Using the extensible markup pattern, you may implement custom animations. We showcase this below with [Svelte Transitions](https://svelte.dev/docs/svelte/transition), but you could also use framework agnostic solutions such as [Motion](https://motion.dev/), [Anime.js](https://animejs.com/), or [Animate.css](https://animate.style/).
```svelte
{#each ['1', '2', '3'] as item (item)}
{/if}
{/snippet}
{/each}
```
1. Implement the `element` snippet to gain access to the `attributes`.
2. Spread the `attributes` to the custom element, a `
` in this example.
3. Add the `transition:slide` and configure your preferred options.
4. Then implement the wrapping `#if` block that triggers transitions when `attributes.hidden` is toggled.
### Data Model Pattern
Skeleton components maintain a uniform pattern for handling data flow in and out. We lean into the Zag convention for this, which handles this explicitly with a prop for data in and event handler for data out. As opposed to two-way binding (such as `bind:` in Svelte). You can see this in practice below for the Switch component.
{/* prettier-ignore */}
```svelte
(checked = e.checked)}>
Label
```
In this example the Switch component uses `checked` to pass state in, and `onCheckedChange` to listen and update then the state is modified internally. Please note the prop, event prop, and key within the event payload may vary from component to component. For example:
* `` - handled via `open` / `onOpenChange` / `e.change`
* `` - handled via `value` / `onValueChange` / `e.value`
* `` - handled via `step` / `onStepChange` / `e.step`
This pattern is utilized for all relevant components, and is documented via the [API Reference](/docs/framework-components/switch#api-reference) table per component.
### Provider Pattern
Most Skeleton components also support the Provider Pattern. This utilizes a provider component that replaces the root and provides access to the underlying component APIs. In practice, this allows direct access to Zag.js API features, such as programmatic control for overlay components, the ability to clear input components, and more.
```svelte
AnchorContent
```
> Note: Svelte requires passing `id` because `$props.id` is not available outside the component's `
```
While Skeleton is icon-agnostic, we recommend [Lucide](https://lucide.dev/) for its broad framework support and clean aesthetic. All examples found on this site use Lucide, but feel free to substitute with any alternative.
Install Lucide
## Sizes
You can size icons and related elements using the following utility classes:
* `size-elem-*`
* `h-elem-*`
* `w-elem-*`
> TIP: Tailwind Components (buttons, badges, chips, field sizes, etc) adjust icon size automatically for any SVG-based icons (such as Lucide). Explicitly setting the size is redudant.
```astro
---
import { HeartIcon } from 'lucide-react';
---
xs
sm
base
lg
xl
2xl
3xl
4xl
5xl
6xl
7xl
8xl
9xl
```
Icon sizes are based on Tailwind's built in `--text-*` property, which means you can match icon sizes as follows.
```html
...
```
As well as extend with custom icon sizes as expected.
```css
:root {
--text-10xl: --spacing(42); /* 168px */
}
```
```css
@utility icon-10xl {
width: var(--text-10xl);
height: var(--text-10xl);
}
```
## Alternatives
Looking for something a bit different? Check out these other popular alternatives.
{/* prettier-ignore */}
* [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.
* [SimpleIcons](https://simpleicons.org/): provides an excellent selection of brand icons.
{/* prettier-ignore */}
## Tailwind Utilities
# Masks
Clip elements to a variety of decorative shapes using CSS mask-image.
```astro
```
## Shapes
Apply classes `mask mask-{shape}` with any of the shapes defined below.
### Circle
```astro
```
### Squircle
```astro
```
### Triangle Up
```astro
```
### Triangle Down
```astro
```
### Triangle Right
```astro
```
### Triangle Left
```astro
```
### Diamond
```astro
```
### Pentagon
```astro
```
### Hexagon
```astro
```
### Cube
```astro
```
### Octagon
```astro
```
### Decagon
```astro
```
### Star
```astro
```
### Heart
```astro
```
### Cross
```astro
```
## Custom Masks
Define your own custom shape. Any valid [CSS mask source](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mask) will work.
```css
@utility mask-custom {
mask-image: url('/path/to/your-shape.svg');
}
```
```html
```
# Presets
Canned styles for your interface elements.
Presets are pre-defined utility classes that allow you to quickly and easily style buttons, badges, cards, and more. They are implemented using a combination of Skeleton and Tailwind primitives. A number of presets are available out of the box, with guidelines provided for crafting your own.
## Skeleton Presets
The following Presets are available to you when using Skeleton. Each comes with a shorthand neutral option.
```astro
---
const diagramCircle = 'preset-tonal w-8 aspect-square flex justify-center items-center rounded-full';
---
1
2
3
```
1. **Filled** - a filled preset of the primary brand color.
2. **Tonal** - a tonal preset of the primary brand color.
3. **Outlined** - an outlined preset of the primary brand color.
### Filled
Has a wide variety of use cases and automatically implements [contrast colors](/docs/design/colors#contrast-colors) automatically.
```txt
preset-filled
preset-filled-{color}-{lightModeShade}-{darkModeShade}
```
```astro
{/* Neutral */}
{/* Colors */}
```
### Tonal
Ideal for alerts and axillary buttons and actions.
```txt
preset-tonal
preset-tonal-{color}
```
```astro
{/* Neutral */}
{/* Colors */}
```
### Outlined
Ideal when for minimal interfaces, such as a surrounding card.
```txt
preset-outlined
preset-outlined-{color}-{shade}-{shade}
```
```astro
{/* Neutral */}
{/* Colors */}
```
***
## User Generated
In a nutshell, Presets are a resuable combination of styles that mix Skeleton and Tailwind primitives. This means you can create as many combinations as you wish to help control the aesthetic of your application. All custom presets should be implemented in your application's global stylesheet. See our reference examples below.
```astro
---
const presets = [
{
label: 'Glass',
class: 'preset-glass-primary',
},
{
label: 'Elevated',
class: 'preset-filled-surface-100-900 shadow-xl',
},
{
label: 'Ghost',
class: 'hover:preset-tonal',
},
{
label: 'Gradient',
class: 'preset-gradient-secondary-primary',
},
];
const cell = 'flex flex-col items-center gap-4';
const diagramCircle = 'preset-tonal w-8 aspect-square flex justify-center items-center rounded-full';
---
{
presets.map((preset, index) => (
{index + 1}
))
}
```
1. **Glass** - a custom preset using background transparency and backdrop blur.
2. **Elevated** - mixes a filled preset with a shadow.
3. **Ghost** - has no style by default, but shows a tonal preset on hover.
4. **Gradient** - a custom preset generated using Tailwind gradient primitives.
### Pratical Examples
#### Input Presets
Use Presets to generate your own custom validation classes for inputs.
```astro
```
#### Gradient Presets
Utilize [Tailwind Gradient](https://tailwindcss.com/docs/gradient-color-stops) utility classes to create fancy buttons or cards.
```astro
Card
Card
Card
```
#### Glass Presets
Fine tune your Presets with special effects, such as the [Tailwind Backdrop Blur](https://tailwindcss.com/docs/backdrop-filter-blur) for a glass-like effect.
```astro
---
const baseClasses = 'card p-4 text-white text-center flex justify-start items-center';
---
Neutral
Primary
Secondary
Tertiary
Success
Warning
Error
Surface
```
### Guidelines
* When creating custom Presets, you're only limited by your imagination.
* Use any combination of Skeleton or Tailwind primitives to generate a Preset.
* Apply Presets to any relevant element, including: buttons, badges, chips, cards, inputs, and more.
* Use a set naming convention, such as `preset-{foo}-{bar}` to keep things standardized.
* Consider implementing Presets using Tailwind's [@utility directive](https://tailwindcss.com/docs/functions-and-directives#utility-directive) in your stylesheet.
* Abstrast Presets to a stylesheet or NPM package for shared used between projects.
* Use Presets to apply styling for your components via the `class` attribute.
## Tailwind Components
# Badges
Show notifications, counts, or status information on navigation and icons
```astro
---
import { HeartIcon } from 'lucide-react';
---
BadgeBadge Badge
```
## Inline
Display badges inline within buttons or list items.
```astro
---
import { HeartIcon } from 'lucide-react';
---
```
## Presets
Provides full support of [Presets](/docs/\[framework]/tailwind-utilities/presets).
```astro
---
import { HeartIcon } from 'lucide-react';
---
BadgeBadgeBadge
BadgeBadgeBadge
BadgeBadgeBadge
BadgeBadgeBadge
BadgeBadgeBadge
BadgeBadgeBadge
BadgeBadgeBadge
```
# Buttons
Provide a variety of button, including customizable sizes and types.
```astro
---
import { ArrowUpRightIcon } from 'lucide-react';
---
```
## Sizes
Use `btn-{size}` paired with: `xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl`
```astro
---
import { ArrowUpRightIcon, PlusIcon } from 'lucide-react';
---
```
## Presets
Provides full support of [Presets](/docs/\[framework]/tailwind-utilities/presets).
```astro
---
import { HeartIcon } from 'lucide-react';
---
```
# Buttons
Provide a variety of button, including customizable sizes and types.
```astro
---
import { ArrowUpRightIcon } from 'lucide-react';
---
```
## Sizes
Use `btn-{size}` paired with: `xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl`
```astro
---
import { ArrowUpRightIcon, PlusIcon } from 'lucide-react';
---