whichdevtool?
Menu
StacksDirectory Pricing changes Glossary
VPS and cloud servers App hosting and PaaS Managed databases Transactional email APIs Email marketing and newsletters Domain registrars CDN, DNS and edge security Monitoring, uptime and error tracking Auth and identity Frontend and full-stack frameworks Backend frameworks UI component libraries AI model APIs File and object storage Payments and billing Background jobs, queues and workflows ORMs and database toolkits

Tailwind design system with Svelte and React components · by Skeleton Labs

Skeleton

An open-source design system on Tailwind CSS with themes and utility classes, plus Zag.js-based component libraries for Svelte 5 and React.

Visit skeleton.dev ↗ Alternatives Open source Open source
Skeleton homepage
§1

Overview

Skeleton is an opinionated, adaptive design system built on Tailwind CSS. Its core package adds themes, typography, color and spacing conventions and styled element classes that work in any framework using Tailwind. A theme generator helps build custom themes, and a curated theme set covers those who do not want to design one.

Component libraries sit on top: @skeletonlabs/skeleton-svelte and @skeletonlabs/skeleton-react. Since v3, launched on 11 March 2025 after 14 months of work, components are built on Zag.js state machines, which gives both frameworks the same APIs, accessibility and internationalization including RTL. v3 also rewrote the Svelte components for Svelte 5 runes and snippets and moved to Tailwind v4. Vue and Solid support were stated goals.

The project was created by Chris Simmons in 2022 and is maintained by Skeleton Labs and the community. It defaults to semantic HTML and native browser APIs, and most features are opt-in utility classes, which makes it easy to drop down to plain Tailwind when needed.

§2

Pricing and plans

Plan Price What you get
Open source Free MIT licence

No paid tier; the project accepts GitHub Sponsors and Ko-fi donations.

Source: www.skeleton.dev/docs/get-started/introduction · prices as published, excluding tax.

§3

What it does

Design system
Themes, color palettes, typography and styled element classes as a Tailwind plugin.
Theme generator
A web tool for building custom Skeleton themes.
Zag.js components
Accessible Svelte and React components sharing one API through Zag.js.
Opt-in utilities
Buttons, cards and typography are enabled through dedicated utility classes.
Integrations
Guides for third-party libraries such as Floating UI and Shiki.
§4

Strengths and limitations

Strengths

  • Design-system-first approach with themes
  • Same component APIs in Svelte and React
  • Framework-agnostic core on Tailwind
  • Free and community-driven

Limitations

  • Components only for Svelte and React; Vue and Solid are future plans
  • v3 rewrote components with new names and props, so v2 upgrades are large
  • Requires Tailwind CSS v4 for current versions
  • Smaller team than company-backed libraries
§5

Who it suits

Good for

  • SvelteKit apps wanting a themed design system
  • Projects that may use both Svelte and React

Look elsewhere if

  • Vue or Angular projects
  • Teams needing enterprise data components such as advanced grids
§6

Pricing history

  • Skeleton v3 adds React, Svelte 5 and Tailwind v4

    Released 11 March 2025: components rewritten on Zag.js, a new React package alongside Svelte 5 components, and Tailwind v4 support. Source ↗

§7

Alternatives to Skeleton

Tool From Free option Stages
PrimeVue Vue component suite (commercial licence from v5)
— Free tier
Mantine Styled React component library and hooks
— Open source
PrimeReact React component suite (commercial licence from v11)
— Free tier
Bits UI Headless accessible Svelte components
— Open source
Ant Design Enterprise React component library
— Open source
Chakra UI Styled React component library
— Free tier

All UI component libraries →

§8

Questions

Does Skeleton support React?

Yes. Since v3 there is a React component package alongside Svelte.

What is Skeleton built on?

Tailwind CSS for the design system and Zag.js for component behaviour.

Is Skeleton free?

Yes, it is MIT-licensed open source.

Sources read for this page