Skeleton v5.0 is now live! 🎉

[endigo9740]

Hey everyone, Chris here from the Skeleton team. Today we're super excited to share our next major milestone release for Skeleton, version 5.0. Building on the foundation of the v3.0 release and v4.0 release, this update focuses on our theme format, design system, and Tailwind-centric features. It lays a much stronger foundation for theming, expands our design tokens and utilities, and gives you a lot more control over branding, typography, and general styling.

Documentation

View the documentation to preview all updates: https://www.skeleton.dev/

Goals

We had a few goals in mind for this major update, including the following.

• Lay a much stronger foundation for theming, with clearer and more consistent conventions for theme properties.
• Expand our design system and Tailwind utilities to give you more control over branding, typography, and general styling.
• Continue leaning into modern, native web platform features wherever they make sense, rather than reinventing the wheel with framework components.

What's New

Today's update features a number of changes across the theme format, design system, and various 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. Brand Color - a new variable accent color property that can use any color/shade combination, differ between light and dark mode, and include an accessible contrast color automatically. This ships with its own presets (e.g. preset-filled-brand).
4. Typography improvements - new opt-in typographic elements, including abbr, cite, q, sub, sup, and time.
5. 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.

• React | Svelte

Theme Updates

Today's update features a major overhaul and expansion to the Skeleton theme format. As you may know, themes are constructed using Tailwind's @theme directive, which houses a number of CSS design tokens. Our last major update to the theme format was way back in October 2025 alongside our v3 release, which introduced Tailwind v4 support. However, we wanted to both address some issues we've discovered since then, and of course expand with new settings for you to configure, adding more depth to themes overall.

NOTE: we've updated the Theme Generator to allow you convert custom themes all the way from v2 format and forward.

Here are a few of the highlights:

• Design tokens now have a more streamlined and sensible naming convention
• Many tokens that did not adhere to the @theme conventions have been resolved
• A new set of brand color tokens have been added, providing a reliable accent color
• Typography has been greatly expanded, including many new settings to configure

New Themes

In order to showcase some of the new improvements, we're introducing two new Skeleton themes today based on popular open-source color themes, similar to the existing Catppuccin theme.

Dracula

Source: https://draculatheme.com/

Enable this for your project using theme dracula.

Rosé Pine

Source: https://rosepinetheme.com/

Enable this for your project using theme rosepine. You can also sponsor the project here.

Design System

Brand Color

This introduces a new variable accent color for your design system. The benefits include:

• Brand utilizes any color from your theme palette (ex: primary/secondary/tertiary).
• Brand can use any shade from 50-950; it is not limited to shade 500.
• Brand color/shade can be tailored for light and dark mode independently.
• Brand includes a contrast color for foreground elements.
• Brand supports all standard presets (preset-filled-brand, preset-outlined-brand, preset-tonal-brand)

Given this is an abstraction, it may be difficult to understand at first. But as you utilize it you'll come to see the value and power it provides. To see it in action, we recommend doing the following:

1. View the Accordion component
2. Set the doc site theme to Nouveau, using the controls at the top of the page
3. Try mousing over an accordion item to preview the current accent color
4. Then toggle between light/dark mode using the controls at the top of the page
5. Observe how the row highlight accent color is purple in dark mode, yellow in light mode

View the documentation here:

• React | Svelte

Typography

The number of built-in typography properties has nearly doubled, all using the standard opt-in convention you've come to expect. We've also added a handful of new semantic elements to the mix, including: abbr, cite, q, sub, sup, and time.

• React | Svelte

Iconography & Element Sizing

We've also improved the iconography documentation, with simpler instructions for setting up Lucide. Additionally, we now include a curated set of element sizes - xs through 9xl - which can be applied to many different elements, but are primarily intended for use with icons.

NOTE: icon sizes are applied automatically for the new Tailwind Component sizes covered below.

• React | Svelte

Tailwind Utilities

As Skeleton continues to grow, we've introduced a new category of features. These are more abstract Tailwind-based utility classes that can be used in a variety of situations.

Corner Shape

Pair a corner-shape-* utility with a rounded-* utility on the same element to reshape the corner itself. Choose from round, bevel, notch, scoop, squircle, and straight, targeting specific sides, individual corners, or logical properties that respect writing direction. Two theme variables, corner-shape-base and corner-shape-container, are available for global control.

NOTE: this is a very new CSS property. Support currently varies by browser, so we recommend applying it as a progressive enhancement.

• React | Svelte

Masks

Masks provide a simple utility class to clip elements (such as avatars) to specific shapes. 15 shapes are available out of the box and tips are provided for implementing your own custom shapes.

• React | Svelte

New Tailwind Components

We've introduced a few new Tailwind components that utilize native and semantic HTML elements paired with styled utility classes.

Native Dialog Element

The interface of the web continues to grow and evolve rapidly. In recent years we've seen the launch of a highly accessible native dialog element, and recent changes have made it easier than ever to style and use - including support for triggering via pure HTML with no JavaScript needed. We now provide canned styles for it via our Tailwind Component system, including progressive animations for supported browsers.

NOTE: we're not replacing the Skeleton Dialog framework component. The native element styles are meant to live alongside it so you can opt in progressively as browser support matures.

• React | Svelte

Native Disclosure Element

Likewise, the native <details>/<summary> disclosure has come a long way and received some new superpowers, such as the ability to operate as a group and self-close when using shared name attributes. This provides a highly accessible, semantic alternative to Accordion components, with an optional slide animation as a progressive enhancement.

NOTE: we're not replacing the Skeleton Accordion framework component either. Both solutions will live in parallel while browser adoption ticks forward.

• React | Svelte

Form Elements

Form elements have received a huge number of documentation improvements, including the addition of three new utility classes:

• fieldset - provides an optional grouping for related fields
• legend - provides a semantic label for each fieldset
• meter - similar to progress bars, but colors adjust based on fill level

And note that input-group has been sunset in favor of a new field-group utility. This uses all standard box-shaped form elements to create a tight, single-row grouping - no extra classes or conventions to remember. Form fields also receive all the same sizing improvements as buttons, from xs to 9xl.

• React | Svelte

New Framework Components

Alongside the above updates, we're also shipping three new framework components.

QR Code

A fully-featured QR code component, complete with a frame, pattern, optional overlay for inserting a logo or icon, and a built-in download trigger for exporting as an image.

• React | Svelte

Marquee

Animated horizontal or vertical rows of content, perfect for logos, announcements, or featured items. Supports auto-fill, pause on interaction, and full control over speed, delay, and direction.

• React | Svelte

Locale Provider

A small but mighty utility component for controlling locale information, including reading direction. See how we're using it to power the LTR/RTL previews found on every component in the new documentation site.

• React | Svelte

Theme Generator

Kapture.2026-07-03.at.11.06.40.mp4

The Skeleton Theme Generator has also been updated to support the new v5 theme format:

https://themes.skeleton.dev/

This includes the following updates:

• Import and auto-conversion from v2, v3, and v4 theme formats
• Color selections split into separate color + shade fields
• A new Brand section with dedicated previews
• Corner Shape previews and controls
• Support for custom fonts!

Using Custom Fonts

Support for custom fonts via Fontsource (2,000+ fonts), plus greatly expanded typography controls and anchor state options (hover/active/focus). Adding a custom font is as simple as pasting in the font URL from Fontsource - it'll then appear in the font-family options for base/headings/anchor. We'll also include the installation command and CSS imports within the Code view when exporting your theme, so you have everything needed in one place.

Migrating Theme Format

Note that if you're using one of Skeleton's built-in preset themes (ex: Cerberus), you'll receive all theme file updates by default. However, if you're using a custom theme, use the the Theme Generator's import feature convert it to the new format automatically.

v5 Migration Guide

We've provided a detailed guide for migrating from Skeleton v4. This uses the Skeleton CLI's migration feature to help automate the process of renaming design token and utility classes. Please make sure to read and follow the guide in full:

• Guide: https://www.skeleton.dev/docs/svelte/get-started/migrate-from-v4
• For LLMs: https://www.skeleton.dev/docs/svelte/get-started/migrate-from-v4.md

NOTE: if you're migrating from the Release Candidate, simply update your core and framework packages from @next back to the production versions. No further breaking changes have been introduced.

Sponsorship

As you may have seen in our prior progress update, several members of the team have had a very difficult year outside of the project. Even through this, we've persisted and continued our effort on delivering this major release. If you would like to support the project, please 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 our hosting and services, which is critical for keeping free and open source projects like this going. Thanks for your consideration and support!

Support and Feedback

If you have any questions or feedback around today's update, please know we're available to help. Either through the comments section below or via Discord.

Wrapping Up

A huge shoutout to @Hugos68 and @nullpointerexceptionkek who did a ton of heavy lifting to make this update possible. And of course thank you to our wonderful community for your continued support. We appreciate every one of you!

Thanks everyone, and please enjoy the new update!

[synthetic-blood]

the GOAT!