Skeleton v4.0 has launched (Tailwind-based component library)

Hey everyone, Chris here from the Skeleton team. Today we're super excited to share our next major milestone release for Skeleton, version 4.0. Building on the foundation of v3.0, this update focuses on refining and standardizing our component APIs and structure to help ensure we can continue to roll out new components and soon support additional frameworks. This also comes with a vast array of quality of life improvements, making Skeleton much more intuitive to work with. While also providing a lot more power in how you utilize components.

Goals

We set out with a few goals for our component system this release:

• Improved usage of the Zag.js primitives. Including tighter integrated and direct access to the APIs.
• Modify the structure of components to keep it intuitive and easy to understand what props affect the components set.
• Streamline the way you combine Tailwind utilities and components to be much simpler, intuitive, and powerful.

What's New?

As part of the v4 update, there are five key features for components you need to know about.

1. Composed pattern - allowing fine grain control of the tree of components.
2. Overhauled styling - every component now uses a standardized class attribute.
3. Extensible markup - allows you to make structural changes to the component's 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.

If you're the visual type - we've provided a video walkthrough talking about the changes here.

And if you prefer written guides - we've updated our Fundamentals section to detail the above changes.

Finally, if you're a way into the technical details - view our new Component Contribution guidelines, which provides explicit code examples and explains each concept in detail.

New Components

We couldn't put out a component-focused update without a few new additions to the library. We're happy to share we have a handful of new components available for your projects today:

NOTE: these components are currently flagged as beta features, as we finalize the design and squash the last few bugs. This will be temporary for a couple more weeks, then these will transition to stable.

Collapsible

We snuck one more component in for launch! This is a simple but highly applicable component that can be used in a lot of different scenarios. Create mini accordions, toggle navigation sections in a sidebar, and more.

React | Svelte

Date Picker

This is an extremely flexible calendar component, that can either be paired with an input or used directly inline. This allows for a ton of configuration and supports pretty much every feature you could imagine. Note that it does not yet include time selection, but we will offer a sibling component for this in the future.

React | Svelte

Listbox

Making a return from Skeleton v2, we now have a standard selection interface through the Listbox component. Display a flat list, groups, or pair with search. This pairs well with the Popover component as well.

React | Svelte

Portal

The portal is a utility component that we use alongside many of our overlay components (Dialog, Popovers, Tooltips, Combobox). The idea is you can transport DOM structure from one location to another. This can be helpful if you need to insert overlay content above the scope of your page.

React | Svelte

Tree View

This is a classic interface for navigating complex paths and directory structures. This comes with single or multiple selection, programmatic control, and lazy loading.

React | Svelte

New Features

Likewise the updates to the component APIs has allowed us to introduce a number of new features and quality of life changes to existing components. There's too many to list here, so we've compiled a list of a few of our favorites:

• The composable pattern allows you to easily rearrange or reorder markup elements, such as labels.
• Nearly every component support a Provider pattern, allowing you to access the inner Zag.js API for each component. This allows you to implement a custom "Clear" button for the FileUpload for example.
• The overlay components such as Combobox, Dialog, Popover, and Tooltip components are now standard components, meaning they're available for React for the first time.
• Overlay components are also now shipped headless, allowing for full control of the styling top-to-bottom.
• The Combobox now includes full support for custom filters. Including a demo for Fuse.js.
• The Navigation component has been reimagined and now supports a bottom bar, rail, and a new sidebar layout. Which supports 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

CSS Updates

Alongside the component changes, we snuck in two small but impactful CSS changes.

1. The @source() import can now be replaced with a simpler framework import.
2. Skeleton Presets have once again been folded into the core package. You can remove the optional import.

Showcase

Alongside the new release today, we're also introducing the new Showcase page on our website. This features a variety of projects created by the Skeleton community. This represents projects both big and small, from teams and individuals, and covers a variety of different verticals.

• View the Showcase: https://www.skeleton.dev/showcase

Additionally, if you're interested submitting your project to our showcase, please let us know. We've created a new thread and we encourage everyone to share what they're working on. We can't promise we'll add everyone (sorry!) but we're always happy to show what folks are building with Skeleton!

• Submit a Showcase Entry

Migration Guide

To prepare you for the migration, we've provided a detailed guide below. This uses the Skeleton migration CLI to help with the process. However, please note component changes will still require a manual effort. Make sure you follow the full guide in full to complete the migration:

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

NOTE: if you're migrating from the Release Candidate, simply update your core and framework packages for Skeleton.

What's Next

Behind the scenes, we have already began to pivot towards our next few initiatives. We actually have several exciting updates that we'll be covering in the coming weeks and months. Obviously no ETA yet, but here's a high level roadmap of what to expect going forward:

• More Components - expect the number of components in our library to continue to expand now that we've solidified the API structure.
• Documentation Updates - we want to do a pass to improve the technical implementation of our documentation, which should result in higher quality information and examples overall.
• Design System and Theme updates - we already have a 2000 word spec detailing these incredibly impactful updates. We cannot wait to share more details on this soon!
• New Frameworks - we're still keen to expand to Vue and Solid.js as soon as possible.

Additionally, if you would like to provide input onto the future of Skeleton, we recently launched a community survey. As always, this is anonymous and does not require a login to participate. Your feedback is invaluable for informing the future of the project.

Complete the community survey

Sponsorship

Finally, to wrap up, a quick shoutout to @Hugos68 who not only proposed many of these changes you see today, but did a lot of the heavy lifting to make this update possible. Like all of us on the Skeleton team, Hugo volunteers his time to help improve Skeleton every day. Please consider sponsoring him if you're able:

https://github.com/sponsors/Hugos68

And as always, if you appreciate updates like this to Skeleton - consider sponsor the project itself as well:

• GitHub Sponsors
• Ko-Fi

And huge shoutout to the team and our community for all your support. We could not do this without you!

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 on Discord.

Thanks everyone, and please enjoy!