# 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-react';
```
```ts
import { Avatar } from '@skeletonlabs/skeleton-svelte';
```
This also includes access to the component prop types.
```ts
import type { AvatarRootProps, ... } from '@skeletonlabs/skeleton-react';
```
```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`, `className`, and more.
```tsx
export default function Avatar() {
return (
SK
);
}
```
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 `className` attribute. Use this to pass any CSS utility class.
```tsx
export default function Avatar() {
return (
SK
);
}
```
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. This ensures any classes you pass through the `className` attribute are automatically given precedence. No mental overhead, it just works.
By default, all internal styles are auto-prefixed to ensure they are assigned to the `@base` layer. 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 to provide a custom element, this prop accepts a function which the `attributes` are passed into. Then spread the `attributes` to your custom elements. Note that this is an optional and advanced feature aimed at power users, and should not be needed for normal usage.
```tsx
export default function () {
return (
} />
Content for Item 1
);
}
```
```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 [Motion](https://motion.dev/), but you could also use framework agnostic solutions such as [Anime.js](https://animejs.com/) or [Animate.css](https://animate.style/).
```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
import { motion, AnimatePresence } from 'motion/react';
export default function CustomAnimation() {
return (
{['1', '2', '3'].map((item) => (
Item {item}
(
{!attributes.hidden && (
Content for item {item}
)}
)}
/>
))}
);
}
```
1. Implement the `element` snippet to gain access to the `attributes`.
2. Spread the `attributes` to the custom element, a `
` in this example.
3. Wrap the custom element in Motion's ``.
4. Then implement conditional rendering that triggers animations when `attributes.hidden` is toggled.
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 `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 underlying component APIs. In practice, this allows direct access to Zag.js API features, such as programmatic control for overlay components, the ability to clear input components, and more.
```tsx
import { Portal, Tooltip, useTooltip } from '@skeletonlabs/skeleton-react';
export default function TooltipExample() {
const tooltip = useTooltip();
return (
<>
AnchorContent
);
}
```
```svelte
AnchorContent
```
> Note: Svelte requires passing `id` because `$props.id` is not available outside the component's `
```
```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 `