Skeleton v3 Beta 🎉

[endigo9740]

Hey everyone, Chris here from the Skeleton team. I am thrilled to announce the release of the new Skeleton v3 Beta, the latest milestone in our journey to create both the best design system for the web. This of course follows our recent roadmap, which details our plans leading up to the full launch later this year. Let's dive in and review what the v3 Beta means for you and your projects.

• v3 Documentation: https://next.skeleton.dev/
• v3 Theme Generator: https://themes.skeleton.dev/

News & Announcements

You can find progress updates and announcements for the duration of the v3 development cycle here:

• View the latest GitHub Announcements
• View the latest YouTube Announcements

Getting Started

Installation Guide

• React (NextJS)
• Svelte 5 (SvelteKit)
• (more coming soon...)

Migration Guide

• Skeleton v3 Beta Migration Guide #2921
• Watch the Migration Video Tutorial

What's New in v3

Modular Packages

• @skeletonlabs/skeleton - this contains the core design system features as provided by the Tailwind Plugin
• @skeletonlabs/skeleton-react - a library of React components built using the Skeleton design system.
• @skeletonlabs/skeleton-svelte - a library of Svelte components built using the Skeleton design system.
• As well as integration for third party libraries, such as Floating UI and Shiki.

Design System

• A professional-grade Figma UI Kit and accompanying theme import plugin.
• A completely revamped Tailwind plugin
• New and improved Theme system and Theme Generator with nearly 3x the custom CSS properties
• Expanded color palette and utility classes
• Overhauled Presets system
• Overhauled Typography system
• A brand new Spacing system, for dynamic spacing based on a scaling factor
• An opinionated Iconography integration.

Tailwind Plugin

• Focuses on expanding Tailwind's standard utility classes, while also providing a number of unique utilities.
• Now features 20+ themes out of the box, including updates to our legacy themes.
• Tailwind Elements (ex: buttons, cards, etc) are much easier to implement and style.

Components

• All components have been rewritten from the ground up, including new names, features, and properties.
• Full support for React and Svelte 5, with more planned for the future.
• All components now use Zag.js as their foundation to maintain cross-framework parity.

Documentation

• Simpler onboarding and support for a number of new meta-frameworks.
• A deep dive into the fundamentals of using Skeleton.
• Complete code examples showcasing the entire process for implementing each feature.
• Numerous integration guides for implementing third party libraries such as Floating UI and Shiki.
• A new Cookbook recipe section illustrating how to mix Skeleton and Tailwind primitives to generate complex UI.
• Streamlined navigation, UX, and search to help you find what you're looking for.

FAQs

What does "Beta" mean?

For us, this means the Skeleton next branch is now feature complete. Essentially the minimum threshold of features we plan to ship for the final v3.x release are now in place in either our core or component packages. This does not, however, mean Skeleton v3 is complete, bug free, or stable.

Is Skeleton v3 ready for production?

Not quite. While we consider the v3 Beta to be feature complete, there's still a number of remaining issues to address. However, we continue to move at a steady pace.

Why so many changes?

If you review the original proposal, you'll understand the motivation. It comes down to a single question: "If we were going to build Skeleton today, what would we do differently?". Turns out the answer is: a lot! Though we think these changes are healthy for life and longevity of the project. The update to Svelte 5 serves as a prime example of this.

Is it possible to migrate from a Skeleton v2 project?

Yes, we've provided a migration guide for this process. Though please be aware it's an involved process. And that Skeleton v3 is not yet ready for production.

Should I begin testing the Skeleton v3 Beta?

Yes, please do! And make sure to submit feedback on what you think! We can only improve what you communicate to us!

Reporting Issues

Please report all issues via GitHub, Discord, or the comments section below.

[bhuynhdev]

Comment about V3 preset naming scheme: May I ask why are there two shades? It is not easily understandable what each shade is responsible for, and in all presets, both the shade always add up to 1000, so why use two shades at all?

[endigo9740]

Hey @bhuynhdev are you referring to color pairings?
https://next.skeleton.dev/docs/design/colors#pairings

We still need to flush out the docs for this a bit more, but this was a feature we also supported in past versions:
https://www.skeleton.dev/docs/tokens#color-pairing-chart

In Tailwind light and dark mode colors are assigned like this:

<!-- green in light mode, overwritten as red in dark mode -->
<div class="bg-green-500 dark:bg-red-500">

In Skeleton we pair certain combinations of shades like 50 and 950 to ensure an even balance when flipped between light/dark mode. So imagine something like for your <body> element:

<div class="bg-surface-50 dark:bg-surface-950">

You might end up writing these "paired" classes over and over, so Skeleton offers a shorthand for this:

<!-- Shade 50 for light mode, shade 950 for dark mode -->
<div class="bg-surface-50-950">

This actually works very similar to the official CSS syntax that's only recently be standardized in browsers.

[bhuynhdev]

Ah I see, that does very make sense. Then I hope that the docs in https://next.skeleton.dev/docs/design/presets could say .preset-filled-{color}-{lightModeShade}-{darkModeShade} instead of the current .preset-filled-{color}-{shade}-{shade}

[endigo9740]

Agreed! Now that we have the core features in place, a lot of our focus between now and launch will be updating and improving the documentation exactly like that. It's a process though, so we appreciate your patience in the meantime!