# Skeleton — Adaptive Design System Powered by Tailwind CSS

> An open-source UI toolkit that combines Tailwind CSS with framework-specific components for Svelte, React, and Next.js with built-in theming.

## Install

Save in your project root:

# Skeleton — Adaptive Design System Powered by Tailwind CSS

## Quick Use
```bash
npm install @skeletonlabs/skeleton @skeletonlabs/skeleton-react
npx tailwindcss init
```
```jsx
import { AppBar, Button, Card } from '@skeletonlabs/skeleton-react';

export default function App() {
  return (
    <div>
      <AppBar>
        <span>My App</span>
      </AppBar>
      <Card>
        <h2>Welcome</h2>
        <p>Build with Skeleton and Tailwind.</p>
        <Button>Get Started</Button>
      </Card>
    </div>
  );
}
```

## Introduction
Skeleton is an adaptive design system and component library built on top of Tailwind CSS. It provides pre-built, themeable components for Svelte, React, and other frameworks, combining the utility-first power of Tailwind with a consistent design token system. Skeleton is designed for developers who want Tailwind's flexibility with the productivity of a component library.

## What Skeleton Does
- Provides 40+ UI components including app bars, modals, tables, drawers, and toasts
- Integrates directly with Tailwind CSS using a plugin-based architecture
- Supports multiple themes with live theme switching and a visual theme generator
- Offers framework-specific packages for Svelte, React, and SvelteKit
- Includes utility features like light switches, code blocks, and responsive drawers

## Architecture Overview
Skeleton extends Tailwind CSS via a custom plugin that registers design tokens as CSS custom properties. Components consume these tokens for consistent theming. The library ships framework-specific packages (@skeletonlabs/skeleton-svelte, @skeletonlabs/skeleton-react) that provide idiomatic components for each framework while sharing the same Tailwind plugin and theme system underneath.

## Self-Hosting & Configuration
- Install the core package and your framework-specific adapter
- Add the Skeleton Tailwind plugin to your tailwind.config.js
- Choose a preset theme or create custom themes with the theme generator
- Configure global settings like dark mode toggle and transition preferences
- Works with SvelteKit, Next.js, Vite, and Astro projects

## Key Features
- Built-in theme system with CSS custom properties and live theme switching
- Tailwind CSS native with no conflicting style systems
- Visual theme generator for creating branded color palettes
- Components follow each framework's conventions (slots in Svelte, props in React)
- Responsive by default with mobile-first Tailwind utility patterns

## Comparison with Similar Tools
- **DaisyUI** — Tailwind component classes only; Skeleton provides JavaScript components with interactivity
- **shadcn/ui** — copy-paste React components; Skeleton is an installable library with multi-framework support
- **Flowbite** — Tailwind components with JavaScript; Skeleton has deeper theme customization and Svelte-first design
- **Mantine** — framework-specific with its own styling; Skeleton uses Tailwind CSS as the styling layer
- **Headless UI** — unstyled primitives; Skeleton provides fully styled, themed components

## FAQ
**Q: Does Skeleton work with plain React (not SvelteKit)?**
A: Yes. Skeleton offers @skeletonlabs/skeleton-react for React and Next.js projects.

**Q: Can I use my existing Tailwind configuration?**
A: Yes. Skeleton adds a Tailwind plugin alongside your existing config. It extends rather than replaces your setup.

**Q: How do I switch themes at runtime?**
A: Apply a data-theme attribute to the html element. Skeleton's tokens update automatically via CSS custom properties.

**Q: Is Skeleton suitable for production applications?**
A: Yes. Skeleton is used in production applications and follows semantic versioning with stable releases.

## Sources
- https://github.com/skeletonlabs/skeleton
- https://skeleton.dev

---
Source: https://tokrepo.com/en/workflows/asset-fcc8343b
Author: AI Open Source