Today we're happy to introduce the new v2 release candidate of Skeleton! This represents a huge step forward for Skeleton, introducing a number of important updates, new features, and of course some necessary breaking changes. As part of today's update you'll find a new Skeleton plugin for Tailwind, new theme format and configuration options, a dynamic transitions system for components, and much more!

🚨 Migration Guide 🚨

We've created a detailed migration guide to help you move from v1.x to the v2 release candidate.

🆕 What's New?

New Tailwind Plugin (#1660)

Skeleton co-maintainer @AdrianGonz97 has provided one of the largest and most impactful updates - a brand new Skeleton Tailwind plugin, which is now a standalone package separate from the core library. Under the hood, the plugin composes and injects all styles required, such Skeleton's Tailwind Elements, and injects those directly via Tailwind. This means you're no longer required to import and manage additional stylesheets such as theme.css or skeleton.css. Additionally, the plugin now supports the recently introduced .ts or .js formats for your Tailwind Config. The new plugin also changes the way you define and customize your themes settings, which we'll cover in more detail below.

New Theme Updates (#1660)

Learn more about the new theme options from the updated Themes section of our documentation.

Register and Switch Themes

The new Skeleton v2 plugin now allows you to register one or more preset or custom themes directly within your Tailwind config. You may then define which theme you wish to be actively displayed via a data-theme attribute on the body element in your application. This means dynamic theme switching is not only possible, but quite trivial to implement!

Preset Theme Enhancements

Preset themes have a simpler interface for enabling optional features, such as background gradients. This is provided via the enhancements setting in your plugin settings. Set the value to TRUE to opt into these extra features per each theme.

New Theme Format

Additionally, themes have been migrated to use CSS-in-JS, Tailwind's preferred format for injecting new styles via a plugins. Themes still utilize CSS custom properties (aka CSS variables) like before, this merely changes how the theme data is delivered to the plugin. Typescript fans will also enjoy the new CustomThemeConfig type for simple type safety.

Using the New Format

Whether you're using a preset theme or aiming to migrate a custom theme, we recommend following our full migration guide linked at the top of this page. Note that we've also update the Theme Generator to output themes in the new format.

Dynamic Transitions for Components (#1533)

Contributor @Mahmoud-zino has devoted a tremendous amount of time to introduce a new dynamic transition system. This allows you to modify or disable transitions for nearly every component in the library! See the new Essentials > Transitions to learn more about how this works. This covers which components are supported, how to configure each transition, how to disable transitions, and of course how to adhere to best practices for accessibility. And yes, this dynamic transition system supports custom Svelte-based CSS or JS Svelte transitions!

New Table of Contents Utility (#1832)

Skeleton introduced a rudimentary Table of Contents component for our v1 launch, however, this never quite reached our standards of quality. Given this, we've raised this feature to the ground and began anew. With this, a new version of the feature can now be found under Utilities > Table of Contents.

The new version features a "crawler" action to scan a region of the page for headings, optionally append unique IDs to each heading, passing a reference for each heading to the component. While the updated component provides the visual interface and list of links on the page. Furthermore, we've reworked the scroll mechanisms to allow for native browser URL hashes for deep linking (ex: /some/path#my-deeplinked-section). This means the feature is now supported with or without the use of the Skeleton App Shell. You'll note the default styles are much less opinionated, but you'll find a wider range of customization is possible through the new style props.

Tree View Updates (#1779)

Contributor @Mahmoud-zino has been hard at work to introduce a number of user-requested features to the new Tree View. This includes a slew of selection methods, utility features, and even a means to generate tree views in a data-driven and recursive manner. Given the scope of the changes we're going to keep the beta label for a little while longer, but very much welcome your feedback on these changes.

PurgeCSS Plugin Support

While not directly part of the library proper, Skeleton co-maintainer @AdrianGonz97 has launched his initial version of vite-plugin-tailwind-purgecss. If you're not aware, Tailwind can provide a sub-par experience when it comes to purging unused CSS provided by third party Tailwind libraries such as Skeleton. To remedy this, the plugin helps ensure only the styles used in your production application make it to final CSS bundle. While optional, we highly encourage this for all Skeleton projects and have enabled it by default for all Skeleton CLI generated projects going forward. We've also provide a simple guide to help you get started.

Additional Updates:

Added a regionLabel prop to the RadioGroup component (#1836)
Many updates to the Skeleton documentation to cover the latest changes.

⚠️ Breaking Changes:

Drawers, Modals, and Toasts Stores (#1831)

We've refactored the stores for all singleton-based overlay features to help prevent known SvelteKit SSR issues. The new requirements are covered in our migration guide, and of course you're welcome to reference the updated documentation page for each feature:

Skeleton Data Table Removed (#1822)

We've now removed the long-deprecated and unlisted Skeleton Data Table feature. Going forward, Skeleton's official recommendation is to use Svelte Simple Datatables paired with Skeleton's Table Element styles. For any holdouts wishing to keep the legacy data table feature, you can find a zip backup here.

Additional Breaking Changes

The deprecated whitelist | blacklist props have been removed from the Autocomplete component.
Removed all remnants of Skeleton's legacy typography system, which is no longer available in v2.
Renamed the Paginator offset to page for better semantics.

🐞 Bugfixes

Resolved a bug when Autocomplete allow and deny lists are empty.
Resolved a style issue for .bg-hover-primary-token color in dark mode.
Prevent Paginator from resetting page value on length change.
InputChips now update binded value only once.

What's Next?

We'll be gathering and implementing fixes for issues found within the v2 RC, then anticipate a minor migration process from v2 RC -> v2 (stable). Keep an eye out for that in our next round of announcements on or around August 29th.

You may also reference our current proposals for the v3 roadmap. This provides a sneak peek into what we have planned for the future.

Mode

Skeleton v2.0 Release Candidate