# Introduction
Learn more about Skeleton and how it can serve you.
Skeleton provides a uniform design language and structured framework for controlling the look and feel of your product and user experience. It serves as an opinionated design system that aims to greatly reduce the amount of time spent managing design elements and patterns, allowing you to more quickly build and manage your frontend interfaces at scale.
## In a Nutshell
## Our Philosophy
## Additional Benefits
# Installation
Learn how to install and setup Skeleton for your project.
## Guides
## Mixing UI Libraries
Skeleton's design system is perfect for complementing headless component libraries, such as [Bits UI](/docs/\[framework]/integrations/bits-ui), [Melt UI](/docs/\[framework]/integrations/melt-ui), [Radix](/docs/\[framework]/integrations/radix-ui), and [Zag.js](https://zagjs.com/). As well as "Tailwind component" libraries such as the [Tailwind Plus](https://tailwindcss.com/plus). Supporting any component system that supports Tailwind, but very specifically allows you to insert or substitute Skeleton-provided utility classes.
### Unsupported Libraries
Unfortunately, Skeleton cannot integrate with [Flowbite React](https://flowbite-react.com/), [Flowbite Svelte](https://flowbite-svelte.com/), or [Daisy UI](https://daisyui.com/) at this time. Similar to Skeleton, these libraries make changes to Tailwind that directly overlaps with many of our core features, including class names and color values.
# Fundamentals
An introduction to the core concepts of Skeleton.
***
## Design System
### Figma UI Kit
A fully featured [Figma UI Kit](https://www.etesie.dev/figma) is available to designers, allowing them to quickly draft visual concept of your project.
### Core Features
The following features fall under the umbrella of our design system. Provided via the Skeleton core.
***
## Tailwind Components
Tailwind components that act as primitives for creating complex interfaces. Provided via the Skeleton core.
***
## Functional Components
Skeleton also offers optional component packages for select component frameworks. Each component automatically adapts to Skeleton's design system. While still allowing a high level of customization.
\| Framework | NPM Package | Description |
\| --------- | ------------------------------- | ------------------------------- |
\| React | `@skeletonlabs/skeleton-react` | Contains all React components. |
\| Svelte | `@skeletonlabs/skeleton-svelte` | Contains all Svelte components. |
### Powered by Zag.js
Skeleton's components are built on **Zag.js**, which provides a collection of framework-agnostic UI component patterns to manage logic and state. Zag is actively maintained by industry veterans, such as [Segun Adebayo](https://github.com/segunadebayo) - the creator and core maintainer for [Chakra UI](https://www.chakra-ui.com/), [Ark UI](https://ark-ui.com/), and [PandaCSS](https://panda-css.com/).
### Importing Components
You may import components per each Skeleton framework as follows.
```ts
import { Avatar } from '@skeletonlabs/skeleton-{react|svelte}';
```
This also includes access to the component prop types.
```ts
import type { AvatarRootProps, ... } from '@skeletonlabs/skeleton-{react|svelte}';
```
### Composed Pattern
Skeleton components are granular. This offers direct access to all children within the tree, similar to working with raw HTML. This allows passing in arbitrary props and attributes directly to the the template within. Including: `required`, `data-*`, `style`, `class`, and more.
```svelte
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
```
By default, all internal styles are auto-prefixed to ensure they are assigned to the `@base` layer in the Tailwind bundle. This ensures any classes you pass through the `class` attribute are automatically given precedence. No mental overhead, it just works.
```css
@custom-variant skb {
@layer base {
@slot;
}
}
```
### Extensible Markup
Skeleton components provide a mechanism for overwriting the internal HTML with custom markup. Use the `element` prop in React, and the `element` snippet in Svelte to obtain the internal `attributes`. Then spread these to your custom elements. Note that this is an optional and advanced feature aimed at power users, and show not be needed for normal usage.
**React:**
```tsx
export default function () {
return (
{/* ... */}
Content for Item 1
```
### Custom Animations
However, using the extensible markup pattern, you may implement custom animations. While we showcase this below with [Svelte Transitions](https://svelte.dev/docs/svelte/transition), but you could also use framework agnostic solutions such as [Motion](https://motion.dev/), [Anime.js](https://animejs.com/), or [Animate.css](https://animate.style/).
```ts
import { slide } from 'svelte/transition';
```
```svelte
{/if}
{/snippet}
```
1. Implement the `element` snippet to gain access to the `attributes`.
2. Spread the `attributes` to the custom element, a `
` in this example.
3. Override the `hidden` attribute to `false` to prevent it from showing/hiding the element too soon.
4. Add the `transition:slide` and configure your preferred options.
5. Then implement the wrapping `#if` block that triggers transitions when `attribute.hidden` is toggled.
### Provider Pattern
Most Skeleton components also support the Provider Pattern. This utilizes a provider component that replaces the root and provides access to the inner component APIs. In practice, this allows direct access to Zag.js API features, such as programmatic control for overlay components, the ability to clear input components, and more.
```svelte
AnchorContent
```
### Learn More
For a comprehensive guide to how Skeleton implements components, refer to our [contribution guidelines](/docs/\[framework]/resources/contribute/components).
# Core API
Learn about the specific features Skeleton introduces to Tailwind.
The heart of Skeleton is our framework agnostic core package. This adapts and extends Tailwind to introduce our global styles, color system, typography, and more. This section details all available Skeleton-provided utility classes and theme properties.
## @base
Extends Tailwind's base layer with a set of opinionated global styles.
* Sets the root color scheme to match Dark Mode settings.
* Updates scrollbars to utilize theme colors.
* Updates global text selection to utilize theme colors.
* Defines the `` background colors and base font styles.
* Implements global default styles for disabled states, such as buttons.
## @theme
Uses Tailwind's `@theme` to implement a variety of new properties and utility classes.
### Colors
Extends colors to include the [Skeleton color palette](/docs/\[framework]/design/colors).
\| Class | Theme Property |
\| ------------------------------------- | ------------------------------------ |
\| `[property]-[color]-[shade]` | color-\[color]-\[shade] |
\| `[property]-[color]-contrast-[shade]` | color-\[color]-contrast-\[shade] |
\| `body-background-color` | body-background-color |
\| `body-background-color-dark` | body-background-color-dark |
### Color Pairings
Extends colors to implement [Color Pairing](/docs/\[framework]/design/colors#color-pairings), which balance colors between light and dark mode.
\| Class | Theme Property |
\| ------------------------------------ | ----------------------------------- |
\| `[property]-[color]-[shade]-[shade]` | color-\[color]-\[shade]-\[shade] |
### Spacing
Integrates Tailwind's [spacing property](https://tailwindcss.com/docs/functions-and-directives#spacing-function) to modify [dynamic scaling](/docs/\[framework]/design/spacing) for various utility classes.
\| Class | Theme Property |
\| --------- | -------------- |
\| (various) | spacing |
### Typography
Introduces a [typographic scale](https://designcode.io/typographic-scales) to all Tailwind [font sizes](https://tailwindcss.com/docs/font-size) using the following formula.
```plaintext
--text-{size}: calc({remSize} * var(--text-scaling));
--text-{size}--line-height: calc(calc(1 / {remSize}) * var(--text-scaling));
```
#### Base
Controls the style of the global page text.
\| Class | Theme Property |
\| ---------------------- | -------------------------- |
\| `base-font-color` | base-font-color |
\| `base-font-color-dark` | base-font-color-dark |
\| `base-font-family` | base-font-family |
\| `base-font-size` | base-font-size |
\| `base-line-height` | base-line-height |
\| `base-font-weight` | base-font-weight |
\| `base-font-style` | base-font-style |
\| `base-letter-spacing` | base-letter-spacing |
#### Heading
Controls the style of the heading text.
\| Class | Theme Property |
\| ------------------------- | ----------------------------- |
\| `heading-font-color` | heading-font-color |
\| `heading-font-color-dark` | heading-font-color-dark |
\| `heading-font-family` | heading-font-family |
\| `heading-font-size` | heading-font-size |
\| `heading-line-height` | heading-line-height |
\| `heading-font-weight` | heading-font-weight |
\| `heading-font-style` | heading-font-style |
\| `heading-letter-spacing` | heading-letter-spacing |
#### Anchor
Controls the style of anchor links.
\| Class | Theme Property |
\| ------------------------------- | ----------------------------------- |
\| `anchor-font-color` | anchor-font-color |
\| `anchor-font-color-dark` | anchor-font-color-dark |
\| `anchor-font-family` | anchor-font-family |
\| `anchor-font-size` | anchor-font-size |
\| `anchor-line-height` | anchor-line-height |
\| `anchor-font-weight` | anchor-font-weight |
\| `anchor-font-style` | anchor-font-style |
\| `anchor-letter-spacing` | anchor-letter-spacing |
\| `anchor-text-decoration` | anchor-text-decoration |
\| `anchor-text-decoration-active` | anchor-text-decoration-active |
\| `anchor-text-decoration-focus` | anchor-text-decoration-focus |
\| `anchor-text-decoration-hover` | anchor-text-decoration-hover |
### Radius
Extends Tailwind's radius properties with theme-specific sizes.
\| Class | Theme Property |
\| ------------------- | ---------------------- |
\| `rounded-base` | radius-base |
\| `rounded-container` | radius-container |
### Edges
Sets the default width for border, divide, and ring width to match the active theme properties.
\| Class | Theme Property |
\| -------- | -------------------------- |
\| `border` | default-border-width |
\| `ring` | default-ring-width |
\| `divide` | default-divide-width |
## @utility
### Tailwind Components
Allow you to style semantic HTML elements with utility classes.
## @variant
### Themes
Enables you to target and style elements for a particular theme.
```html
...
...
...
```
## Optional
### Presets
Provides a canned set of styles for use with buttons, badges, cards, and more.
### Preset Themes
Provides a hand curated set of themes for Skeleton.
# Migrate from v2
Learn how to migrate from Skeleton v2 to the latest version.
Version 3 represents a major overhaul to Skeleton. This includes a ground up rewrite of quite literally every feature in the library. We have provided a migration CLI to help automate this process. However, some portions of this migration will still required manual intervention. This is not a trivial migration from prior versions, so please use caution when updating and ensure you follow this guide very carefully.
## Prerequisites
While Skeleton v3 introduces support for multiple frameworks, we’ve historically only supported SvelteKit. As such, this guide is only intended for users migrating from Skeleton v2 and SvelteKit. If you you are coming from another meta-framework, this will be outside the scope of this guide. However, this may still provide a valuable insight to the primary objectives for migration.
### Create a Migration Branch
We recommend you handle all migration changes on a dedicated feature branch. This ensures you can easily drop or revert changes if something goes wrong.
```bash
git checkout -b migration
```
### Prepare Your Skeleton App
Please make sure you have accounted for the following:
* Your app is running the latest release of Skeleton v2.x
* All critical dependencies have been updated (optional but recommended)
* Your app is in a functional state before you proceed
***
## Migrate Core Technologies
Skeleton is built on top of the following technologies. These must be migrated individually before proceeding with the Skeleton-specific migration. Note that Svelte and Tailwind provide dedicated CLIs to automate this process.
### Svelte v5
Migrate to the latest release of Svelte v5.
### SvelteKit v2
Migrate to the latest release of SvelteKit v2.
### Tailwind v4
Before migration to tailwind v4 using their upgrade guide some manual steps are required:
1. Remove the `skeleton` plugin from your `tailwind.config` file.
2. Rename your `app.postcss` or `app.pcss` to `app.css`.
3. Remove the `purgecss` (`vite-plugin-tailwind-purgecss`) vite plugin from your `vite.config` (if installed).
Migrate to the latest release of Tailwind v4.
> TIP: Having trouble running Tailwind's automated migration script due to `@apply`? Remove the classes temporarily, then follow [these steps](/docs/\[framework]/get-started/migrate-from-v2#replacing-apply) to adapt to native CSS custom properties and Tailwind's new utilities.
***
## Migrate to the Tailwind Vite Plugin
Use the following steps to migrate to from PostCSS to the Vite plugin:
1. Delete `postcss.config.mjs`
2. Run `npm uninstall postcss @tailwindcss/postcss`
3. Run `npm install @tailwindcss/vite`
4. Open your `vite.config` in the root of your project
5. Import the following at the top of the file: `import tailwindcss from '@tailwindcss/vite'`
6. Finally, add the Vite plugin ABOVE your specific framework plugin:
```ts
plugins: [
tailwindcss(),
sveltekit(), // or svelte()
];
```
***
## Automated Migration
We’ve provided a dedicated migration script as part of the Skeleton CLI to help automate much of this process.
> TIP: Please ensure you've committed all pending changes before proceeding.
```bash
npx skeleton migrate skeleton-3
```
What WILL be migrated...
* Update all required `package.json` dependencies
* Implement all required Skeleton imports in your global stylesheet `app.css`
* Modify `data-theme` in `app.html` if you’re using a Skeleton preset theme.
* Temporarily disable custom theme imports to allow for theme migration.
* Migrate all modified Skeleton utility classes (ex: `variant-*` to `preset-*`)
* Update all Skeleton imports throughout your entire project
* Renames all relevant Skeleton components
* Some Component imports will also be pruned as they are no longer supported. We’ll cover these features in detail below.
What will NOT be migrated...
* Component props will not be updated. Unfortunately there’s too many permutations.
* Most v2 Utility features will not be migrated (ex: popovers, code blocks, etc)
Make sure to consult your local Git Diff to compare what has been modified before progressing forward or committing these automated changes.
***
## Manual Migration
With automated migration complete, please follow the remaining manual migration steps.
### Migrate Themes
#### For Preset Themes
Your preset theme should be automatically migrated by the CLI, you're all set!
#### For Custom Themes
1. Use the [Import feature](https://themes.skeleton.dev/themes/import) provided by the new Theme Generator.
2. Drag and Drop your v2 theme into the file upload field.
3. Your theme will be automatically converted to the newest format.
4. Update and modify any theme settings in the live preview.
5. Make sure to set a valid theme name in the right-hand panel.
6. Tap the “Code” tab to preview your generated theme code.
7. Copy the theme code, then following our [custom theme instructions](/docs/\[framework]/design/themes#custom-themes).
8. Similar to preset themes, you will need to both register and set an active theme.
### Replace AppShell with Custom Layouts
Skeleton has sunset the ([troublesome](https://github.com/skeletonlabs/skeleton/issues/2383)) `` component in favor of user-defined custom layouts. We've provided a [Layouts](/docs/\[framework]/guides/layouts) guide for replicating common page structures using only semantic HTML and Tailwind - no Skeleton specific features needed!
### Migrating Components
> NOTE: if you're aiming to migrate to Skeleton v4, we recommend you skip this specific step and follow [the v4 migration guide instead](/docs/\[framework]/get-started/migrate-from-v3). Once complete, resume from the "Tailwind 4 Changes" section below, and continue through the remainder of this guide.
Components have undergone the biggest update in Skeleton v3. Given the sheer number of changes, we recommend you compare each component to it's equivalent v3 documentation. We’ve highlighted a few of the key changes below:
* Changes to adopt the new [Svelte 5 APIs](https://svelte.dev/docs/svelte/v5-migration-guide) like runes, snippets, event handlers, etc.
* Changes to support [Zag.js](https://zagjs.com/), which serves as a foundation of our cross-framework components.
* Changes to the import path: `@skeletonlabs/skeleton-svelte`.
* Changes to the component name and/or structure (including sub-components)
* Changes based on newly introduces features and properties.
* Changes to adopt the new [component fundamentals](/docs/\[framework]/get-started/fundamentals#functional-components).
Here's an example of changes for a single component from v2 to the new equivalent:
```svelte
```
```svelte
(value = e.value)} markers={[25, 50, 75]} />
```
We’ve recorded the most notable changes to each component in the table below:
\| Name | v2 | v3 | Notes |
\| ------------------ | ----------------------------------------------------------- | -------------------------------------------------------------------- | --------------------------------------------------------- |
\| `` | [Link](https://v2.skeleton.dev/components/app-rail) | [Link](https://v3.skeleton.dev/docs/components/navigation/svelte) | Renamed `` - greatly expanded features |
\| `` | [Link](https://v2.skeleton.dev/components/file-buttons) | [Link](https://v3.skeleton.dev/docs/components/file-upload/svelte) | Renamed `` - merges `` features |
\| `` | [Link](https://v2.skeleton.dev/components/file-buttons) | [Link](https://v3.skeleton.dev/docs/components/file-upload/svelte) | Renamed `` - merges `` features |
\| `` | [Link](https://v2.skeleton.dev/components/input-chips) | [Link](https://v3.skeleton.dev/docs/components/tags-input/svelte) | Renamed `` |
\| `` | [Link](https://v2.skeleton.dev/components/paginators) | [Link](https://v3.skeleton.dev/docs/components/pagination/svelte) | Renamed `` |
\| `` | [Link](https://v2.skeleton.dev/components/progress-bars) | [Link](https://v3.skeleton.dev/docs/components/progress/svelte) | Renamed `