Today we're happy to introduce Skeleton v2! This represents a huge step forward for Skeleton, introducing a number of critical updates, new features, and of course a handful of breaking changes. We'll cover the details for this release below.

🚨 Migration Guide 🚨

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

• View the v2 migration guide
• View the v2 documentation site
• View the v2 Changelog
• View the archived v1 documentation site

🆕 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 plugin. 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.

Wintry Theme (#1901)

Along with the new theme updates, we've opted to introduce the new "Wintry" theme. An elegant blue-focused theme. Register and implement this alongside your favorite Skeleton preset themes.

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. You can reference pending updates here:

• https://github.com/skeletonlabs/skeleton/issues/1943
• https://github.com/skeletonlabs/skeleton/issues/1944

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.

⚠️ 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:

• Drawers: https://www.skeleton.dev/utilities/drawers
• Modals: https://www.skeleton.dev/utilities/modals
• Toasts: https://www.skeleton.dev/utilities/toasts

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.

Updates since the v2 Release Candidate

If you installed an early version of the Skeleton v2 release candidate, please be aware we've implemented a number of updates based on your feedback, including:

• The brand new "Wintry" preset theme is now available:
• Resolved a bug in vite-plugin-tailwind-purgecss breaking styles in production:
• The new CSS-in-JS theme format now support properties_dark for specifying dark mode overrides to CSS custom properties
• Theme properties and properties_dark can now be extended with aribtrary CSS custom properties:
• Scrollbar corners now utilize theme styles:
• Improvements to the beta Tree View component:
• The new Table of Components utility now now includes optional prefix and suffix parameters:
• Added theme styles for the indeterminate checkbox style:
• File Button now allows you to remove the .btn class style for a completely unstyled display:
• Improved the documentation around the new store features for Drawers, Modals, and Stores:
• We've rolled back a change to the Input Chips that introduced a reactivity regression:
• Added a regionLabel prop to the RadioGroup component
• A number of issues have been resolved in the Skeleton CLI (aka create-skeleton-app or CSA)
• We've made various corrections and updates to the Skeleton documentation
• The documentation website features a slightly updated App Bar with version navigation

What's Next?

You may reference our current proposals for the v3 roadmap. This provides a sneak peek into what we have planned for the future. The overall goal will be to start breaking up core features, such as Popups and Code Blocks to their own standalone packages. This will allow better implementation of the dependencies these rely on. Likewise we have some major updates planned for themes and the theme generator. Expect to see updates on this in the near future.