Skeleton v3.0 has launched! 🎉

[endigo9740]

Hey everyone, Chris here from Skeleton. Today the team and I are very proud to share the culmination of work from our team, our contributors, the community, and myself. Version 3 of Skeleton represents a huge milestone for the project and establishes a new foundation and set of goals, allowing Skeleton to not only support the latest technologies, but provide a platform to grow from for the next few years.

Goals

Today’s update is driven by our original proposal, which asked one very specific question:

“If we were building Skeleton today, what would we do differently?”

As it turns out - quite a lot! Skeleton has always been a library that thrives on the cutting edge. While some changes may be disruptive, we hope you will keep an open mind as we step into this new chapter of Skeleton’s story. We have leaned very heavily into what makes Skeleton unique, while also providing more well defined goals with the hope of making a clearer path forward for the project. This includes:

• A more modular structure to further enable the opt-in nature of Skeleton
• Adoption of new technologies such as Svelte 5, React, and Tailwind v4
• A greater focus on productivity and Design System features
• Accessible components that share common APIs and patterns cross-framework
• More standardization across the board
• All presented with top-tier documentation

Special Thanks

Before we begin, a quick shoutout to the Skeleton team for helping make this possible, including Hugo, Long, Adrian, Malte, Domenic, Sebas, Rhys, Luke, and Mahmoud. Skeleton simply would not exist without their help. Thank you so much guys!

---

Useful Links

• Skeleton v3 Documentation
• Skeleton v3 Theme Generator
• Skeleton v3 - Release Changelog

v3 Migration Guides

• If you’re using Skeleton v2 - follow this guide
• To migrate from a v3 Pre-Release/RC1 to v3 Stable - follow this guide
• If you’re on RC2 - simply update to the latest release of these packages:
  • @skeletonlabs/skeleton@latest
  • Svelte Only: @skeletonlabs/skeleton-svelte@latest
  • React Only: @skeletonlabs/skeleton-react@latest
  • We also recommend updating to the last versions of Svelte 5 and Tailwind v4

---

Modular Architecture

To begin, let’s start by reviewing the new modular structure of Skeleton v3.

Framework-Agnostic Core

At the core is our new framework-agnostic package that handles all Tailwind-focused features:

• Base Styles - global styles enabled by default.
• @theme extensions support Skeleton’s robust theme system.
• @utility classes provide an extensive amount of new features and components.
• @variant features enable you to target specific themes.
• Skeleton Themes - adds 20+ new and updated preset Skeleton themes.
• Presets - implements the new Preset system, which we’ll cover in-depth below.

Framework-Specific Components

Components are now provided through respective framework-specific packages, making them simple to maintain and easy to opt into.

• skeleton-svelte - all Svelte components have been rewritten from the ground up to take advantage of new Svelte 5 component APIs, such as: runes, snippets, and more.
• skeleton-react - we now provide full parity for React, enabling much larger audience of both Skeleton users and contributors.
• And More Soon - we aim to expand to Vue and Solid.js in the near future!

Third-Party Integrations

It’s now easier to expand beyond Skeleton’s core features using our integration guides. Featuring many popular open-source tools that provide both a high level of quality and depth.

• Code Blocks - now powered by Shiki syntax highlighter.
• Iconography - powered by Lucide, which serves as our our de-facto icon solution.
• Popovers - including integration with Floating UI.
• Toasts - including unique solutions per framework.
• And More Soon - expect headless components, data tables, and more soon.

---

Design System

When we began to reimagine what Skeleton could be, we first looked inwards to understand what we were already doing well. One of the most unique and powerful parts of Skeleton is inherent Design System features. As such, this is now one of the core tenants for Skeleton.

Tailwind v4

At the heart of Skeleton design system is Tailwind, which brings uniform standards and conventions to the table, empowered by their utility-first methodology. Skeleton aims to both take advantage of Tailwind v4’s newest and and most relevant features, while extending it in meaningful ways.

• The Skeleton Tailwind plugin now takes the form of a simple stylesheet import, making it much easier to use, overwrite, and extend as needed.
• Provides a new first-class theme system which now enables Skeleton themes to move to fully native CSS, defined using standard CSS custom properties.
• Enables many new CSS features, such as true Color Pairings via light-dark(), format-agnostic color transparency via color-mix(), native Cascade Layer support, and container queries enabled by default.
• Improved Dark Mode, enabling isolation at any scope via Color Scheme.
• Directly integrates many of the features Skeleton has provided in the past, providing first-class solutions for themes, radial gradients, and dynamic spacing.
• And much more!

Figma UI Kit

Today’s launch sees the introduction of the new Figma UI Kit, created and tended by community contributors Micha and Bohdan in partnership with Skeleton Labs. This premium kit enables your designers to easily mock interfaces for your Skeleton applications. Including a dedicated Figma plugin to automatically import your theme’s color palette.

Themes

Skeleton themes have now been overhauled to adapt to Tailwind v4’s first-class theme system, which is configured with native CSS. The use of CSS Custom Properties (aka CSS variables) means it’s easy to adjust and overwrite properties on-the-fly, including any of Skeleton’s themes. Choose from any of our 20+ preset themes or try the brand new Theme Generator to create your own. Themes have been expanded to include nearly double the properties, allowing for fine grain control.

Color System

Colors have received a notable overhaul, expanding to include shade 950, as well as support for contrasting tones for every color and shade combination. This enables accessible contrast ratios with ease. Color Pairings have also received a slew of improvements, now powered by the CSS native light-dark() function to enable isolated light/dark mode control at any scope with Tailwind’s Color Scheme utilities. Colors can now be provided via any standard CSS color format (though we recommend OKLCH), while Color Parings now support Tailwind’s transparency syntax.

Presets

Skeleton Variants have been renamed Presets, and now provide a standardized concept for mixing Skeleton, Tailwind, and native CSS properties to create reusable utility classes. These are akin to industry standards like Design Tokens - where you create reusable classes based on theme properties, but tailored to fit the Skeleton and Tailwind naming conventions. v3 also comes equipped with an optional set of canned presets, including filled/tonal/outlined for use with common interfaces like cards and buttons. You may also notice us recommend the use of custom presets throughout to help control your app’s aesthetic, including suggestions for creating custom typography.

Typography

Skeleton’s typography system has also seen major improvements, including the familiar opt-in classes you already know and love, as well as an optional Typographic Scale. Including guidance for utilizing Presets to generate your own Semantic Typography system.

Spacing

Tailwind v4 introduces a new --spacing property for Tailwind’s @theme config, which enables you to set a dynamic scale for common size and spacing properties like width, height, margin, padding, gap, and more. Skeleton adopts this property into themes, allowing you to adjust spacing to be tighter or looser. For a simple demo, try the Spacing settings found on the new Theme Generator.

Iconography

Skeleton remains icon agnostic, allowing you to bring your own solution. However, we now provide a first-class recommendation for Lucide, which is included by default in all examples. See our integration guides for React and Svelte.

Tailwind Components

If you’ve used Skeleton in the past you’re likely already familiar with Tailwind components, such as buttons, badges, form elements, and more. These are canned CSS utility classes that allow you to quickly style common interface elements using semantic HTML elements. v3 sees both aesthetic and utility improvements to these components.

---

Functional Components

Components are now housed in their own framework-specific packages and have undergone the most extensive updates of this release.

Zag.js Integration

The most important change is the introduction of Zag.js. This provides a collection of framework-agnostic UI component patterns, including: Avatars, Switches, Tabs, and more. Rather than re-invent the wheel for multiple frameworks, we can now utilize Zag as a standard foundation for most Skeleton components. This provides a number of benefits:

• Allows Skeleton to easily expand and include many new components.
• Framework agnostic to support Svelte and React now. Then Vue, and Solid.js later.
• Provides standardized features and APIs per all frameworks.
• Greatly expanded feature set per each and every component.
• Accessible by default, well beyond prior version of Skeleton.
• Expanded support for internationalization, including RTL support.
• Fully headless, allowing use to easily adapt Skeleton’s design system.

Style Props

One of the signature features of Skeleton is how Tailwind classes are provided to components. We’ve now created a more standardized approach for these “style props”, enabling finer grain control per each component element:

• base - the foundational styles that define the structure.
• {property} - specific properties such as backgrounds, margins, etc.
• classes - extends the class list with any number of arbitrary classes

We also now provide a standardized manner for identifying where styles are applied within the component’s element tree.

• classes - non-prefixed classes always apply to the parent element,
• fooClasses - prefixed classes will apply to a child element, such as:
  • imageClasses for an avatar’s image element.
  • controlClasses for an accordion’s control element.
  • meterClasses for a progress bar’s meter element.

View Fundamentals for more information or browse the API Reference table for each component.

Anatomy

Use each components Anatomy diagram, which visualizes the entire component element tree. This helps identify parent or child elements (on left; in blue) as well as the rough placement and type of element used (on right).

• Bracketed items like <Accordion> are parent elements that do not use style prop prefixes.
• While lead, content, indicator indicate child elements that would use prefixes.

Svelte 5 Support

All Svelte components have been rewritten from the ground up, and now take advantage of the new Svelte 5 component APIs, including the following:

• Runes - provide explicit syntax for state, props, handling side effects, and more.
• Snippets - replace Slots and provide better support for dynamic templates.
• Event Handlers - now handled with callback functions.
• And many of the other improvements.

React Support

Skeleton v3 is the first version of Skeleton to support React, including meta-frameworks such as Next.js. We aim to provide full parity when it comes to both features and support.

Component Improvements

While there’s too many improvements to list individually, here’s few of our favorites:

• Accordions now support a self-close collapsible mode and programmatic state.
• Avatars now provide more robust fallbacks that trigger automatically if the image fails to load.
• Navigation now supports both a Rail and Bar format with interchangeable tiles for selection or route-based navigation, as well as an expanded mode for Rails that can be easily toggled.
• Our previous file components have been combined into the universal File Upload, which is much easier to customize.
• Pagination supports client or server side pagination.
• Progress Bars now allow for custom animations.
• Progress Rings are now highly customizable, including the middle contents.
• Ratings components provide better control over icons.
• Segment Controls provide a nifty new animation when toggling options.
• Sliders now support multiple handles and direct control over markers.
• Switches now allow for icons and include a compact mode.
• Tabs come with many new configuration options for position and sizing.
• Tags Input now supports inline tag editing by double clicking.

---

Documentation

In order to support all current and upcoming frameworks, we needed a new solution for documentation. We’ve also taken this chance to focus on the authoring experience for contributors, with most content now defined with easy to use MDX.

Astro

The documentation site is now built with Astro, enabling us to support multiple component frameworks simultaneously. This allows demos for React, Svelte, and other framework components side-by-side. While also providing content-focused features, such as built-in MDX, island architecture for hydration, search integration, support for LLMs, and much more!

Improved Onboarding

With the additional of new meta-frameworks we have now reworked our onboarding and new user experience. You can find dedicated guides for each support meta-framework, as well as additional guidance around what Skeleton is and how it operates.

Learn the Fundamentals

The documentation now provides a deep dive Fundamentals section that explains the different tenets of Skeleton. If you’re curious to learn more about the Design System, Tailwind features, or components - then this is the place to start.

Browse the Core API

The new version of Skeleton has seen a complete rewrite of our Tailwind Plugin to support Tailwind v4’s new CSS-first methodologies. The Core API section now covers how Skeleton integrates and extends Tailwind to provide our unique set of features. If you’re curious to learn how how Skeleton operates from a technical level - then this is the place to start.

Examples

Each example now utilize the same source for both the visual preview as well as the code blocks, ensuring each is functional out of the box. This makes it much easier to copy/paste and start using features right away.

Necroparser

Long time Skeleton contributor Hugo Korte has created this new internal tool, which can scan and parse the type schema or each component in a framework-agnostic manner. This is used to generate the API Reference tables found on each component page, automating the process to ensure the schema data is always up to date. In the future, we hope to open source and provide this tool for everyone to use. We think it would be valuable for anyone who wishes to automate documentation of custom components.

Cookbook

We now include a new Cookbook section, containing a set of recipes for generating interface features outside the normal scope of Skeleton, currently housing recipes for Steppers, SVG Filters, and more.

Search

Our docs now utilize PageFind to greatly improve the search experience. This allows deep search to help you find exactly what you’re looking for, including customizable filters to limit results per framework.

Navigation

You’ll find navigation to be much more streamlined. Key section are located at the top, while most documentation pages are listed in flat/categorized lists on the left. This allows you to quickly navigate between sections.

News Feed

We’ve now replaced our blog with a simple news feed, allowing you to scan and get the latest updates at a glance. Don’t fret over losing our long-form guides though - they will now reside in the Cookbook and Integration guide sections.

LLM Support

Our documentation also includes LLM support, for all you machine learning enthusiasts. Note that we recommend the use the curated documentation in most cases. Please consider this before creating new support issues in the future!

Contributor Docs

As always, Skeleton aims to provide best in class onboarding for new contributors. This outlines everything you need to know to get started, contribute features, or help maintain the documentation.

---

Theme Generator

Alongside the new documentation site, we’ve launched a new Theme Generator app for authoring custom Skeleton Themes. While this focuses on the core theme experience, we hope to expand this to generate axillary features such as mesh gradients, custom presets, and more.

Live Previews

Changes are presented in real-time using a sample of components as you generate your theme.

Extended Controls

With greatly expanded theme properties, you now have more control to fine tune your theme’s look and feel. We hope to expand this further in the future, including support for custom fonts.

Import and Convert

The Theme Generator Import page includes several features:

• Drag and drop your v2 themes to automatically convert to the v3 format.
• Drag and drop any v3 theme to allow further edit and refinement.
• Choose any of the existing Skeleton themes to use as a boilerplate for new themes.

---

The Future of Skeleton

While today’s launch is a monumental step forward for Skeleton, we truly intend for it to serve as a the foundation for future development. As such, the team and I are already brainstorming what comes next. We anticipate major updates will come not only more frequently, but be smaller and more iterative in scope. Here’s a few ideas of what you might can expect.

• Initial updates will be focused on triage and smoothing out rough edges.
• Bring forth new components from Zag primitives, including: data pickers, QR Codes, Timers.
• Provide deeper integration and support for new Tailwind v4 features, such as container queries.
• Streamlined Component APIs as we embrace new techniques for style props.
• Introduce new component frameworks, such as Vue and Solid.js (likely in that order)
• Expansions to the Theme Generator, including social profiles for logging in, managing themes, and sharing with the community.
• More premium assets, such as: educational tutorials, UI blocks, templates, and more.

If you have other ideas, let us know in the comments. We’re always down to hear them!

Svelte Summit 2025

Several members of the Skeleton team will be at this year’s Svelte Summit on May 8-9 in Barcelona, Spain. If you plan to attend, please feel free to introduce yourself. The team and I would love to meet any and all members of the greater web community!

---

Sponsor Us

Finally I want to once again thank everyone from the community for their patience and support for today’s new launch. If anything provided here is of value to your and your development process, then please consider taking a moment to return the favor. Skeleton is open source, which means we funded in whole by the generosity of the community. If you can, please consider contributing through one of the services below. Every little bit counts!

• GitHub Sponsors
• Ko-Fi

Supporting Members

Additionally, please consider sponsoring fellow contributor Hugo Korte, who has been responsible for many of the new features, including: Zag integration, Necroparser, doc improvements, the new Skeleton CLI, and more! He’s an invaluable member of the community and deserves the support.

Likewise if you see other members in the community, please extend your thanks. This is always welcome and encouraged!

[saturnonearth]

Congrats on the release guys!! You can really tell the attention to detail you put into this project

[segunadebayo]

Congrats on the release! Glad your team found Zag.js useful ♥️

[endigo9740]

Thank you Segun! It's been extremely useful and we can't wait to expand with more Zag components, and support more frameworks soon. Much of this simply wouldn't have been possible without the hard work you and your team have done to make this possible, so please do pass on my thanks!