Announcing the Skeleton v5 Release Candidate

[endigo9740]

Hey everyone, Chris here from Skeleton. Over the past few months we've been hard at work on the new Skeleton v5 update, and today we're thrilled to share the initial v5 Release Candidate.

Goals

Skeleton v5 introduces a major overhaul to the core of Skeleton. The goal has been to lay a much stronger foundation for theming, expand our design system and Tailwind utilities, and give you more control over branding, typography, and general styling, all while keeping the component API stability we established in v4.

Preview the changes on our pre-release documentation site: https://next.skeleton.dev/

What's Changed

As part of today's update, we've made a number of key changes across the theme format, design system, and Tailwind-centric features.

1. Theme format overhaul - a large number of theme properties have been renamed to establish clearer, more consistent conventions (for example --base-font-color is now --typo-base--color-light).
2. Expanded theme properties - typography settings have nearly doubled, with new properties for font stretch, kerning, text shadow, word spacing, hyphens, and text transform, along with expanded control over anchor states (hover/active/focus).
3. Corner Shape - a new utility built on the emerging corner-shape CSS property, giving you fine-grained control over the shape of border radius edges.
4. Brand Color - a new variable brand color property that can use any color/shade combination, differ between light and dark mode, include an accessible contrast color automatically, and ship with its own presets (e.g. preset-filled-brand).
5. Typography improvements - new opt-in typographic elements, including abbr, cite, q, sub, sup, and time.
6. Element Sizing - a new curated set of element sizes, which can be applied to many different types of elements. These benefit buttons, form fields, icons, and more.

For a deep dive, we recommend reading through the overhauled Core API documentation, which covers how each feature operates and which properties have Tailwind utility classes out of the box.

https://next.skeleton.dev/docs/svelte/get-started/core-api

New Features

Alongside the above, there's a long list of smaller updates and enhancements. Here are a few of our favorites:

• A new "Tailwind Utilities" documentation category, including a brand new Masks utility with 15 shapes out of the box for clipping elements like avatars.
• Buttons and Form Elements now support 13 sizes, from xs to 9xl, using a consistent mathematical formula so inputs and buttons placed side by side always align. Icons inserted inside these elements are automatically sized to match.
• A new dot variant for Badges, and clearer documented use cases for Chips.
• Three new Form Element utilities: fieldset, legend, and meter.
• input-group has been replaced by a new field-group utility for tightly grouping standard box-shaped form elements, no extra classes required.
• The native dialog element now has canned styles as a standard Tailwind Component, including progressive animations and support for triggering via pure HTML with no JavaScript needed.
• The native disclosure element is now covered as well, including the ability to operate as an accordion-like grouping with self-closing behavior via name attributes.

NOTE: We're not replacing the Skeleton Dialog and Accordion framework components yet. The native element styles are meant to live alongside them so you can opt in progressively as browser support matures.

New Components

The Release Candidate introduces three new framework components:

• QR Code - full control over colors, with support for inserting icons and branding.
• Marquee - animated horizontal or vertical content rows, including pause-on-hover.
• Locale Provider - a utility component for controlling locale information, including LTR/RTL support.

Theme Generator

The Theme Generator has also been updated to support the new v5 theme format. View this using the temporary preview URL here:

https://themesskeleton-ibtzm1eck-skeleton-labs.vercel.app/themes/create

NOTE: this will move to themes.skeleton.dev for the stable release.

This includes the following updates:

• Import and auto-conversion from v2 formats onward
• Color selections split into separate color + shade fields
• A new Brand section with dedicated previews
• Corner Shape previews and controls
• Support for custom fonts via Fontsource (2,000+ fonts), plus greatly expanded typography controls and anchor state options (hover/active/focus)
• And more!

How to Migrate

Caution

The Skeleton v5 Release Candidate is an early access preview intended for testing purposes. While fairly stable, we do not yet recommend it for production use.

If you wish to migrate to the v5 RC, please follow the instructions below:

1. Update to the next pre-release packages

Point your core and component packages at next version respectively (5.0.0-next.11 or higher):

For Svelte projects:

npm i -D @skeletonlabs/skeleton@next @skeletonlabs/skeleton-svelte@next

For React projects:

npm i -D @skeletonlabs/skeleton@next @skeletonlabs/skeleton-react@next

2. Follow the migration guide

We've put together a dedicated migration guide - please treat this as the single source of truth for the migration process and follow all instructions in full:

https://next.skeleton.dev/docs/svelte/get-started/migrate-from-v4

If you're using an LLM or coding agent to help with your migration, we also provide an LLM-friendly version of the same guide:

• Svelte: https://skeleton-dvdktjvq9-skeleton-labs.vercel.app/docs/svelte/get-started/migrate-from-v4.md
• React: https://skeleton-dvdktjvq9-skeleton-labs.vercel.app/docs/react/get-started/migrate-from-v4.md

3. Update Theme Files

If you're using one of Skeleton's built-in preset themes (ex: Cerberus) you will receive all theme file updates automatically. However, if you're using a custom theme, consider using the import feature of the Theme Generator to convert this to the new format automatically. Note that for the release candidate this can be handled here:

https://themesskeleton-ibtzm1eck-skeleton-labs.vercel.app/themes/import

What's Next

We'll be monitoring for feedback from early adopters and aiming to provide updates and bugfixes ASAP. We also plan to launch an update to the Skeleton CLI to help with migration, roll out at least one new theme to showcase the improvements, and of course update our supplementary assets such as the demo projects and sponsor templates. Keep an eye on all Skeleton news channels for follow-up announcements leading up to launch.

Support and Feedback

For the duration of this early access preview, we ask that you test the new theme format, design system, and Tailwind utility/component updates in your real-world projects. Please share your experience and report issues either on Discord (via the #contributors channel) or in the comments below. Your feedback is invaluable in guiding any last-minute changes and determining when the final release is ready.

Sponsoring Skeleton

To wrap up, as you may have seen in our last progress update, several members of the team and I have had a very difficult year outside of the project. Even through this, we've persisted and continued to update Skeleton to the best of our ability. If you would like to support the project, consider contributing to one of our sponsor programs:

• GitHub: https://github.com/sponsors/skeletonlabs
• Ko-fi: https://ko-fi.com/skeletonlabs

Note you can also support team members directly, including long term contributors such as Hugo via Github Sponsors.

Supporting Skeleton itself is a direct and meaningful way to help cover the cost of hosting and services, which is critical for keeping the project going. Thanks for your consideration and support!