Skeleton Next - Update 4 - Components & Props

[endigo9740]

Hey everyone, Chris here from the Skeleton crew! This post is part of an ongoing series of updates as we progress towards Skeleton v3 (aka Skeleton "Next"). We're excited to share some exciting updates today, including the introduction of our first components for Svelte 5 and React, as well as updates to the syntax for component properties.

As with the previous updates, we've provide a quick summary post below, as well as videos providing a more in-depth walkthrough.

Useful Links

• YouTube video walkthrough
• v3 documentation website
• Svelte 5 Preview Docs

v3 Components

• v3 Accordion

This now showcases our first live and interactive example of Skeleton components running on both Svelte 5 and React! Note the documentation site has been updated to allow you to quickly toggle between both the preview and the code implementation. Simply toggle the "code" tab to view this. Near the top of the doc page you can also see React/Svelte buttons that links to the source code for each respective component.

Keep in mind this is an early preview though and our documentation and components are not yet complete.

1. We're still working on additional documentation features for display props, events, slots, etc
2. There's a display issue that's preventing the Svelte component from showing right now
3. The React component currently lacks animation, but we hope to implement this soon.

Component Properties

The most exciting changes today are the updates to the component code itself, including how component and props are authored. In addition to greatly reducing the boilerplate required per component, we're now using a set of naming conventions to provide more power to style props - those being props that take in Tailwind classes.

The first thing to note is that style props now fall into one of three categories. These are handled per template element:

• base - which houses all the default styles for a particular component template element
• {property} - which represents any number of standard style props (backgrounds, margins, paddings, etc)
• classes - which act as an overflow for appending additional arbitrary Tailwind classes

Additionally, a new prefix is used to semantically describe where the prop is implemented in the template:

• The root template element props do not use a prefix
• Any child/grandchild elements do use a semantic prefix

The result is a flat list of semantic properties that can target very specific portions of the template:

While the prop names may seem a bit more verbose, we think you're going to be very pleased with the extra level of control this provides you, enabling you to:

• Replace each elements default styles via base, allowing a faux-headless approach to styling
• Provide Tailwind classes to common properties (backgrounds, margins, etc) as you're used to
• Provide arbitrary classes that extend go beyond what the default canned style props provide

We hope that this remains very familiar, while also allowing you to work around some really nasty roadblocks present prior versions of Skeleton, such as name collisions and placement of styles being unclear.

If you would like to see this in action, see the video links above. I walk through and showcase modifying several of these props for the brand new Accordion component. These conventions will carry through to all components in the future though!

What's Next

Wrapping up, we encourage you to keep an eye out for the next update. Our goal is to continue porting new components forward. This will initially be limited to our core team while we finalize and dogfood our contribution guidelines. However, we do hope to open this up to the community very soon. Additionally, I will be switching my focus to the theme generator, which we hope to demonstrate in our new progress update post! So stay tuned for that!