Skeleton Progress Update - May 2026

[endigo9740]

Hey everyone, welcome to another monthly progress update for Skeleton. Today's post is extra exciting, because it's our first follow up since starting the recently announced v5 update. Progress is going well, and we're not only moving quickly, but also nearly complete on many of the core package and theme improvements. Which means an early access public release will be coming soon.

Get your snacks ready, as today's post will be a big one!

Core API Docs Overhaul

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

For most features detailed below, please refer to the overhauled Core API documentation for more information. This does a better job of explaining how each feature operates, as well as covering which properties have Tailwind utility classes out of the box. We'll cover these at a high level below.

Theme Format

The foundation of Skeleton is our theme system, which houses a number of configurable properties that tailor the display of your app and overall branding and aesthetic. Including colors, typographic settings, scaling, and more. We haven't made a major modification to the theme format since the introduction of Tailwind 4 support alongside Skeleton v3. However, this is a critical update that lays the foundation for many of the new features introduced as part of this new major release.

NOTE: we'll provide an auto-migration tool for themes as part of the v5 launch

Renamed Properties

As part of a dedicated pass on the theme format, we've renamed a number of properties. This establishes new conventions that give us more wiggle room to grow over time, as well as resolving a couple of small bugs.

Before	After
--base-font-color	--typo-base--color-light
--base-font-color-dark	--typo-base--color-dark
--base-font-family	--typo-base--font-family
--base-font-size	--typo-base--font-size
--base-line-height	--typo-base--line-height
--base-font-weight	--typo-base--font-weight
--base-font-style	--typo-base--font-style
--base-letter-spacing	--typo-base--letter-spacing
--heading-font-color	--typo-heading--color-light
--heading-font-color-dark	--typo-heading--color-dark
--heading-font-family	--typo-heading--font-family
--heading-font-weight	--typo-heading--font-weight
--heading-font-style	--typo-heading--font-style
--heading-letter-spacing	--typo-heading--letter-spacing
--anchor-font-color	--typo-anchor--color-light
--anchor-font-color-dark	--typo-anchor--color-dark
--anchor-font-family	--typo-anchor--font-family
--anchor-font-size	--typo-anchor--font-size
--anchor-line-height	--typo-anchor--line-height
--anchor-font-weight	--typo-anchor--font-weight
--anchor-font-style	--typo-anchor--font-style
--anchor-letter-spacing	--typo-anchor--letter-spacing
--anchor-text-decoration	--typo-anchor--text-decoration-line
--anchor-text-decoration-hover	--typo-anchor--hover--text-decoration-line
--anchor-text-decoration-active	--typo-anchor--active--text-decoration-line
--anchor-text-decoration-focus	--typo-anchor--focus--text-decoration-line
--body-background-color	--color-root-bg-light
--body-background-color-dark	--color-root-bg-dark
--default-divide-width	(removed)

New Properties

Additionally, we've taken this opportunity to expand themes with a plethora of new properties that greatly extend typography settings and introduce brand new features.

Properties	Note
--typo-base--font-stretch	New base properties
--typo-base--font-kerning	-
--typo-base--text-shadow	-
--typo-base--word-spacing	-
--typo-base--hyphens	-
--typo-base--text-transform	-
--typo-heading--font-stretch	New heading properties
--typo-heading--font-kerning	-
--typo-heading--text-shadow	-
--typo-heading--word-spacing	-
--typo-heading--hyphens	-
--typo-heading--text-transform	-
--typo-anchor--font-stretch	Many new anchor properties
--typo-anchor--font-kerning	-
--typo-anchor--text-shadow	-
--typo-anchor--word-spacing	-
--typo-anchor--hyphens	-
--typo-anchor--text-transform	-
--typo-anchor--text-decoration-color	-
--typo-anchor--text-decoration-style	-
--typo-anchor--text-decoration-thickness	-
--typo-anchor--text-underline-offset	-
--typo-anchor--text-underline-position	-
--typo-anchor--hover--text-decoration-color	-
--typo-anchor--hover--text-decoration-style	-
--typo-anchor--hover--text-decoration-thickness	-
--typo-anchor--hover--text-underline-offset	-
--typo-anchor--hover--text-underline-position	-
--typo-anchor--active--text-decoration-color	-
--typo-anchor--active--text-decoration-style	-
--typo-anchor--active--text-decoration-thickness	-
--typo-anchor--active--text-underline-offset	-
--typo-anchor--active--text-underline-position	-
--typo-anchor--focus--text-decoration-color	-
--typo-anchor--focus--text-decoration-style	-
--typo-anchor--focus--text-decoration-thickness	-
--typo-anchor--focus--text-underline-offset	-
--typo-anchor--focus--text-underline-position	-
--default-outline-width	Global outline control
--corner-shape-base	We'll cover this below
--corner-shape-container	-
--color-brand-light	We'll cover this below
--color-brand-contrast-light	-
--color-brand-dark	-
--color-brand-contrast-dark	-

Custom Colors

While color property format remains mostly unchanged, we will provide guidance soon for supporting custom colors beyond the seven currently available: primary/secondary/tertiary/success/warning/error/surface. More details on this soon.

Core Features

With the expanded theme properties, we get access to two new core features.

Corner Shape

Based on the emerging corner-shape CSS property, this enables fine grain control over the shape of border radius edges. See examples in this CSS Tricks article. We expect this feature will become an official Tailwind utility in the future, but if you know Skeleton, you know we love to be ahead of the curve.

Here's how we expect this will work:

<button class="btn preset-filled corner-shape-base">Button</button>

<div class="btn preset-filled-surface-100-900 corner-shape-container"
  >Card</div
>

As well as new properties to use globally:

.card {
  corner-shape: var(--corner-shape-container);
}

Brand Color

https://next.skeleton.dev/docs/svelte/design/colors#brand-color

Additionally, we're aware that branding doesn't always fit into the singular primary-500 color option. So we're adding a new variable brand color property, which enables all the following:

• Can use any color (ex: primary/secondary/tertiary; including custom colors)
• Can use any shade (ex: 50-950)
• The color/shade can differ between light/dark mode
• Contains a matching a11y-friendly contrast color for foreground elements
• Will have standard Presets out of the box, ex: preset-filled-brand
• Will become the default accent color for most default component styles

Work is still in progress on this, but we're very excited about what this brings to the table. More details soon.

Design System

Typography Improvements

https://next.skeleton.dev/docs/svelte/design/typography

The number of built-in typography properties has nearly doubled, all using the standard opt-in convention you've come to expect.

Property	Description
Abbreviation	<abbr> — marks an abbreviation or acronym, optionally with a title for the full term.
Citation	<cite> — references the title of a creative work (book, article, film, etc.).
Quotation	<q> — denotes a short inline quotation, typically wrapped in quotation marks by the browser.
Subscript	<sub> — renders text as subscript, lowered and smaller (e.g., chemical formulas).
Superscript	<sup> — renders text as superscript, raised and smaller (e.g., exponents, footnotes).
Time	<time> — represents a date, time, or duration, optionally machine-readable via datetime.

Iconography Improvements

https://next.skeleton.dev/docs/svelte/design/iconography

We've also improved the iconography documentation, with simpler instructions for setting up Lucide. Additionally, we now include a curated set of element sizes, 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 Components sizes covered below.

Tailwind Utilities

Presets never quite fit between the Design System or Tailwind Components categories in our documentation, so a new "Tailwind Utilities" category has been introduced. Now joined by the addition of Masks.

Masks

https://next.skeleton.dev/docs/svelte/tailwind-utilities/masks

Masks provide a simple utility class to clip elements (such as avatars) to a fun shape. 15 shapes are available out of the box, but may expand over time. Let us know if there's any particular primitive shape you would like to see included.

Tailwind Components

In addition to dramatically improved documentation, the Tailwind Components have received a number of functional and aesthetic improvements. Including the following.

Element Sizes

Buttons and Form Elements now have size options ranging from xs to 9xl. That's 13 dedicated sizes! Not only do you have more options, sizing is now truly universal, using a mathematical formula to ensure consistency for all elements. TL;DR inputs positioned alongside buttons will have an identical height, even when accounting for variable padding from the spacing system. Finally, any SVG-based icons (such as Lucide) inserted into these elements are automatically sized and scaled accordingly - no need to declare a redundant size.

NOTE: while Badges and Chips don't have variable sizes, they adhere to the same formulaic system.

Badges

https://next.skeleton.dev/docs/svelte/tailwind-components/badges

Badge usage is now much more clearly defined in the documentation, with a new "dot" variant added. All variants can be swapped with responsive breakpoints as well.

Buttons

https://next.skeleton.dev/docs/svelte/tailwind-components/buttons

Receive all the sizing improvements described above, extending to both the standard and icon variants. Use large icon buttons to create FABs (floating action buttons).

Chips

https://next.skeleton.dev/docs/svelte/tailwind-components/chips

Similar to badges, the role of chips is now much more explicit in the documentation, showing a number of set use cases.

Form Elements

https://next.skeleton.dev/docs/svelte/tailwind-components/forms

Form elements have seen the largest number of documentation improvements, including three new standard 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

Additionally a new field size option has been added for the first time in Skeleton:

And input-groups have been sunset in favor of the 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 have to remember.

Dialog Element

https://next.skeleton.dev/docs/svelte/tailwind-components/dialogs

Native dialog element styling has been promoted from a Cookbook guide to standard built-in Skeleton utilities. This includes progressive animations for supported browsers.

NOTE: we hope to expand this with the native Popover features when all CSS anchoring properties hit baseline for browsers.

Disclosure Element

https://next.skeleton.dev/docs/svelte/tailwind-components/dialogs

This update will also see the introduction of a new disclosure element. Think of this as a naive HTML equivalent of a collapsible or accordion component. Including progressively enhanced animations for supported browsers.

New Component

While components aren't the focus of this update. We're currently slated to launch at least one new component for Svelte and React alongside the v5 update - new QR Code component based on the Zag primitive of the same name. Documentation is still incoming, but it does exactly what you would expect.

What's Next

Obviously we've been cooking, but there are still a number of improvements that remain in progress. We'll then shift focus to the new Theme Generator, Preset Generator, and Mesh Generator tooling. Expect more details on these in our next update.

As for the launch itself, we aim to provide an early preview of the above features very soon. Just note this early access release may be limited to built-in themes (ex: Cerberus) or (for those adventurous enough) a guide for manually migrating your custom themes. We'll update you as soon as this is available.

If you have any questions, suggestions, or general feedback about the incoming update, please feel free to reach out and leave a comment below. As usual, thanks everyone for your continued support!