Skeleton Design System

Skeleton is an opinionated design system that provides a uniform design language and structured framework for managing the look and feel of user interfaces. It is designed to augment Tailwind CSS by providing themes, styled elements, and design guardrails.

Key features include:

• Design System: Extends Tailwind CSS with themes and styled elements.
• Turnkey Components: Built on top of Zag.js, these components automatically adapt to the Skeleton design system. Currently, support is available for Svelte and React.
• Framework Agnostic: Core features only require Tailwind CSS, allowing you to use Skeleton's design system across different frameworks.
• Utility-First: Fully supports the Tailwind CSS utility-first methodology while extending its capabilities for modern web components.

Skeleton v5 introduces several new design system, Tailwind, and component features:

Design System & Tailwind:

• Typography: Expanded native element styles (abbr, cite, q, sub, sup, time).
• Mask: Clip elements using mask-image.
• Corner Shape: Specify corner shapes within the border-radius area.

Tailwind Components:

• Dialog: Modal popups using native HTML <dialog>.
• Disclosure: Collapsible content using native HTML <details>.
• Forms: New meter component.

Framework Components:

• Marquee: Auto-scrolling content.
• QR Code: Scannable QR code rendering.
• Locale Provider: Context for controlling reading direction.

The repository is organized into three main areas:

Sites

Public websites hosted for users:

• /sites/skeleton.dev: Documentation website.
• /sites/themes.skeleton.dev: Theme generator website.

Packages

NPM-distributed modular packages:

• /packages/skeleton: Core package with Tailwind-specific features.
• /packages/skeleton-react: React components.
• /packages/skeleton-svelte: Svelte components.
• /packages/skeleton-common: Shared modules.
• /packages/cli: Skeleton CLI for migrations.

Playgrounds

Sandbox environments for testing:

• /playgrounds/skeleton-svelte: SvelteKit playground for the Svelte package.
• /playgrounds/skeleton-react: Tanstack Start playground for the React package.

Skeleton is built upon three primary pillars that work together to provide a comprehensive solution for complex web interfaces:

1. Design System: The core design language and foundational rules.
2. Tailwind Components: Primitive Tailwind-based components used to build complex interfaces.
3. Framework Components: An optional suite of components specifically optimized for certain frameworks (e.g., Svelte, React).

Skeleton follows several key principles to ensure a high-quality developer and user experience:

• Native-First: Defaults to semantic HTML elements and native browser APIs to improve accessibility and leverage the web's native capabilities.
• Simple Standards: Provides common conventions for themes, colors, typography, and spacing to standardize the design process.
• Opt-In by Default: Most features are modular. You enable interface features (like specific button styles or typography) via dedicated utility classes, providing an easy escape hatch for custom designs.
• Adaptive: Designed to adapt to your project's specific aesthetic. It includes a powerful theme generator for custom themes and a curated set of pre-made themes.

Skeleton extends Tailwind CSS by introducing specific design tokens and utility classes. When reading Skeleton documentation, you will encounter three primary concepts:

• Skeleton Theme Property: Represents the CSS design token defined within each Skeleton theme file.
• Tailwind @theme Property: Represents the @theme property provided to Tailwind via injection.
• Class: Represents one or more utility classes generated by the @theme injection.

Component styles are shared across frameworks and reside in /packages/skeleton-common/src/components/[component-name].css.

Styles should use data-scope and data-part attributes to target specific elements.

Requirement: You must export the component's CSS file in /packages/skeleton-common/index.css to make it available to consumers.

[data-scope='avatar'] {
	&[data-part='root'] {
		isolation: isolate;
		background: var(--color-surface-400-600);
		width: --spacing(16);
		height: --spacing(16);
		border-radius: calc(infinity * 1px);
		overflow: hidden;
	}

	&[data-part='image'] {
		width: 100%;
		object-fit: cover;
	}

	&[data-part='fallback'] {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

To add Skeleton to your project, use the following pnpm command:

pnpm add @skeletonlabs/skeleton

Skeleton's design system is designed to complement headless component libraries and Tailwind-based component libraries. It supports any component system that uses Tailwind CSS, as it allows you to insert or substitute Skeleton-provided utility classes.

Compatible headless libraries include:

• Bits UI
• Melt UI
• Radix
• Zag.js

Compatible Tailwind component libraries include:

• Tailwind Plus