Skeleton v3 Pre-Release Announcement 🎉

[endigo9740]

Hey everyone, Chris here from Skeleton. As you may know, over the last few 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/

Progress Updates

As we continue forward, we'll update the section below with updates.

View our YouTube playlist of progress updates or review our written updates below.

• Pre-Release Walkthrough (Video)
• Skeleton Next - Update 1 - Design & Code #2424
• Skeleton Next - Update 2 - Themes & Plugin #2452
• Skeleton Next - Update 3 - Documentation #2477
• Skeleton Next - Update 4 - Components & Props #2521
• Skeleton Next - Update 5 - Theme Generator #2544
• Skeleton Next - Update 6 - Plugin, Docs, and Figma #2574
• Skeleton Next - Update 7 - Components and Animations #2602
• Skeleton Next - Update 8 - Popovers and Modals #2629
• Announcing Floating UI Svelte 🎉 #2652
• Skeleton v3 Pre-Release Announcement 🎉 #2681
• Skeleton Next - Update 9 - Doc Search, Gradients, and Switch (Video)
• Skeleton Next - Update 10 - Ratings, Progress Ring, and Nav Components #2728
• Skeleton Next - Update 11 - Sneak Peak of Zag.js Integration #2784
• Skeleton Next - Update 12 - Zag Components Implemented #2804
• Skeleton Next - Update 13 - Components, Docs, and Themes #2861
• Skeleton Next - Update 14 - Theme Generator Overhaul #2871
• Skeleton Next - Update 15a - Skeleton Progress Update #2885
• Skeleton Next - Update 15b - Popovers and Modals #2886

How to Install

Caution

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 new projects for now. We've provided guide instruction for each supported framework below:

• Install for React + NextJS
• Install for Svelte 5 RC + SvelteKit

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 to this!
• 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 in the the comment section below, 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!

[rChaoz]

One small thing - when viewing the docs on mobile, there's no way to view anything else other than the introduction page. Even when enabling desktop mode in the browser in landscape. There's no sidebar or anything to navigate.

Moderator Note: (image removed due to size)

[endigo9740]

@rChaoz oh yeah, we're aware. Lots of work left on the doc site before launch, but we're actually waiting on our upcoming Floating UI Svelte package to handle this!

• Announcing Floating UI Svelte! 🎉 floating-ui-svelte#50

You'll likely see this come in alongside our upcoming integration guide on the v3 doc site. It'll give us a great way to dogfood the new library! Feel free to report any similar issues here:

• NEXT: Astro Documentation Site #2353

[Hugos68]

This is done for technical reasons. Importing from the root of the package causes Vite (what we use to develop) to load in all icons causing a 20 second delay everytime we start the development server.

[endigo9740]

What Hugo said, the direct import method is required for Svelte for proper tree shaking.