Announcing the Skeleton v4 Release Candidate

[endigo9740]

Hey everyone, Chris here from Skeleton. As you may know, @Hugos68, the team, and I have been hard at work the past few months on the new Skeleton v4 update . This focuses on major updates to the Skeleton component system. Today we're thrilled to share we've recently hit feature parity with Skeleton v3, and as such are announcing the new v4 Release Candidate today.

Goals

Skeleton v4 introduces a top-to-bottom overhaul of our component APIs. The goal has been to stabilize the internal and external APIs of our component system and ensure we can continue to introduce new components and new component frameworks over time.

Video Update

Check out a new walkthrough covering all the new features and changes:

Watch on YouTube: https://youtu.be/T10wNOQOehQ

What's Changed

As part of today's update, we have made five key changes to components.

1. Composed pattern - allowing fine grain control of the tree of components.
2. Overhaul styling - every component now uses a singular class attribute.
3. Extensible markup - allows you to make structural changes to the component HTML markup.
4. Custom animations - extensible markup now allows you to use any animation system of your choice.
5. Provider pattern - allowing access to the inner component API for programmatic control.

In practice, you'll find components are much easier to setup, configure, and customize. Everything feels much more natural and intuitive. Which has always been the goal of Skeleton.

For a deep dive, we recommend reading through the expanded Fundamentals section linked below. This provides more details and a number of code samples to showcase each specific change.

https://next.skeleton.dev/docs/get-started/fundamentals#functional-components

New Features

Alongside the above updates, you'll also find a number of new features and enhancements to existing components. There's way too many to list, so here's a few of our favorites.

• The composable pattern allows you to easily rearrange or reorder markup elements, such as labels.
• The Popover, Tooltip, and Combobox components are now standard components, are provided headless to allow unlimited styling, and are now available for React for the first time.
• The Combobox now includes full support for custom filters
• All components now support a Provider pattern, allowing you to access the inner Zag.js API for each component. This allows you to easily create your own custom "Clear" button for the FileUpload for example.
• The Navigation component has been reimagined and now support a bottom bar, rail, and sidebar layouts. Including groups and labels.
• Progress Circular now supports multiple formats for the value using the native Intl API.
• Progress Linear and Tabs now support a vertical orientation
• Keyboard navigation outlines are now standard across all components - try the new Switches for example.
• And documentation and examples have been greatly improved across the board

Presets Return to Core

As part of the Skeleton v3 update, you recall we made presets an optional and separate CSS import. This was an experiment to see if users would opt to forego these and roll their own. But as it turns out, they're pretty useful. So we're reverting this change in v4 and Presets will now once again be part of the core package. We'll have further developments around Presets in v5 - so make sure to remove the extra CSS import when migrating to the v4 RC release.

New Components (Now Available)

The Release Candidate will see the introduction of four new component:

• Portal
• Tree View
• Date Picker
• Listbox

Our goal post-release will be to expand to include nearly every component Zag.js provides. Expect new components to drop frequently with the new standards and component APIs.

NOTE: For Figma UI Kit users - the designs for the new components will be added soon. Please keep an eye out for that.

How to Migrate

Caution

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

If you're keen to update to the v4 RC, we've provided a simple migration guide for v3 users. Find this linked below. Please follow all instructions in full and know that we will be dropping regular updates as bugs are reported and squashed.

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

ETA for Release

We of course want to give folks time to try out the new Release Candidate today and submit your thoughts, while we continue to prepare for the full release. As of present, we're expecting the full release to drop in about two weeks, sometime around mid-October.

Support and Feedback

For the duration of this early access preview, we ask that you please test the new component structure, styling, and markup features in your real-world projects. We encourage you to share your experience and report issues on either Discord (the #contributors channel) or via the comment section below this post. Your feedback will be invaluable to guide any last minutes changes and determine when the final release is ready.

Thanks everyone!