Hey everyone, Chris here from Skeleton. As you may know, over the last six months we've been hard at work on Skeleton v3. As of today, we're thrilled to share that we've now reached a major milestone - Skeleton v3 is now available in early access via a new public pre-release! This means you can now install and try all the new features directly!
View the Documentation
We've provide a new documentation website here: https://next.skeleton.dev/
Video Walkthrough
This covers the basics of creating a new project, and covers many of the new features:
How to Install
Heads up!
Skeleton v3 is available in a very early pre-release, meaning you can and will encounter bugs, missing features, or incomplete documentation. It is not advised to use in production. Please proceed with caution.
Given the early status of the pre-release, we're going to ask that you limit testing to only new projects for now. We've provided guide instruction for each supported framework below:
NOTE: keep and eye out for additional installation guides over the next few weeks!
What's New
Skeleton v3 represents a completely top-to-bottom rewrite of most features. Let's review a few of the most exciting changes:
- Skeleton now features a modular structure:
- The framework agnostic core package provides the Tailwind Plugin (design system, themes, and more)
- Dedicated framework-specific component packages are available both React and Svelte 5
- Plus direct support for add-ons such as the upcoming Floating UI Svelte.
- We now provide a much more robust design system, including:
- A new design aesthetic and several new curated preset themes
- A new and improved theme system and generator.
- An expanded color system featuring contrasting tones, support for shade 950, and improved color pairings
- New Presets system for handling common reused styles, with automatic support for contrasting colors
- Improved Typography system, including theme-specific scaling, and (soon) semantic text styles
- The new Spacing system, enabling dynamic scaling based on a theme-specified scale factor.
- Iconography remains an agnostic choice, while providing first-class support for Lucide.
- We've completely revitalized a number of features:
- Tailwind elements are now easier to use and more flexible when combined
- We now provide a full-fledge set of React components that adhere to Skeleton conventions
- Svelte components have been overhauled to take advantage of Svelte 5 features like runes, snippets, and more
- A new documentation experience:
- Simpler onboarding to help get you started quickly
- More in-depth exploration of the fundamentals of Skeleton
- We now provide complete code examples showcasing the entire process for implementing each feature.
- Added a new Cookbook section, showcasing simple recipes for mixing Skeleton + Tailwind features
- Provide quick toggles between component frameworks, with detailed API reference at a glance
Plus much more! Expect a complete list upon release!
Noteworthy Changes from v2
Below is a list of a few changes to be aware of if you're coming from Skeleton v2:
- We do not yet provide a v2 to v3 migration guide - but will have one before our stable release!
- v2 themes are currently incompatible with v3 themes - consider generating a new theme instead.
- We provide a limited set of built-in v3 themes - but expect more in the future!
- We're still in the process of porting many of our components to v3 - expect regular updates every 2 weeks!
- There are a number of breaking changes to component features due to Svelte 5 and our new approach to styles.
- v2 variants classes have now been replaced by the much more robust Presets system.
- v2 design token classes have been replaced by our new extended Tailwind utility classes.
- Component API Reference is only available for React while we await Svelte 5 to reach a stable release.
Providing Feedback
Our next step is to gather feedback from you, our community. This might come in the form of feedback and comments in regards to any of the following:
- What changes you do or do not like
- Features that don't meet expectations (what works, what doesn't)
- Gaps and errors in the documentation
- Proposals for quality improvements, especially around our React implementation
- And anything else you wish to share!
The team and I have put a ton of blood, sweat, and tears into this project and are very excited to hear your feedback. We just ask that you please try to keep your feedback kind and constructive!
You may contact us on GitHub via either new issues or within existing milestone issues, and of course by Discord in the dedicated #skeleton-next channel.
Thanks, and please enjoy!