Skeleton v4 Early Preview

[endigo9740]

Hey everyone, Chris here from Skeleton. Today the team and I are thrilled to pull back and curtain and share an early hands-on preview for what's coming in Skeleton v4. This will initially focus on new component API changes, which were originally proposed via this RFC.

Goal

The new component changes help address many of the pain points you've likely encountered when using Skeleton in the past. We are addressing this by allowing direct access to the component markup, while also making it easier to style and provide arbitrary attributes. This also goes a long way towards making Skeleton more intuitive to learn for new users. Which is critical if we hope for the library to continue to grow and evolve over time.

What's New

To help cover the new changes for components, we've added a new documentation section providing all details. This showcases code examples and helps explain the thought process behind each change:

https://www.skeleton.dev/docs/get-started/v4-early-preview

This covers:

1. A new "composed" component structure.
2. A new way to style components and provide arbitrary attributes
3. A new means for overriding the markup for component templates

NOTE: This will also expand to include custom animations, but give us a little more time to "cook" on this.

Get Started

The good news is it's extremely easy to access to the new preview components. Rather than implementing a new standalone package or restricting this to a test branch - we've simply introduced two new components to the latest release of our Skeleton v3 packages.

By updating to the latest release of each package, you will gain access to the new v4 preview components:

• @skeletonlabs/skeleton: 3.2.0 (or higher) - for styling
• @skeletonlabs/skeleton-react: 1.4.0 (or higher) - for React components
• @skeletonlabs/skeleton-svelte: 1.5.0 (or higher) - for Svelte components

Documentation for the new preview components:

Component	React	Svelte
Avatar	View	View
Accordion	View	View

Note the unique import path for either component and framework:

@skeletonlabs/skeleton-{svelte|react}/composed

Providing Feedback

Our early preview gives you a chance to go hands on and test the new components and experience how they operate first hand. We hope that you will test them out and provide questions and feedback on your experience. As always you can reach out in the comments section below, or on Discord via the #contributor channel. We're excited to hear what you think!

FAQ

Will I be required to install a special version of Skeleton to test these components?

Nope! Just install the latest release of the v3 packages and you should gain access immediately to the new Avatar and Accordion components.

Will these features undergo breaking changes?

This is highly likely. We're providing this early preview for that very reason. We hope folks will provide feedback, we'll review and make changes as needed, and release updates as we go. So please exercise caution if you plan to use these features in a production environment.

Will all components adopt these new conventions?

That's the plan! Again, we're providing this early preview for feedback. Once we feel the community is happy with the changes, we'll begin the process of porting all components to the new format. This will come as likely the focus of the upcoming Skeleton v4 release.

Will this be the ONLY update in Skeleton v4?

No, but expect the changes to be much smaller in scope than the jump from Skeleton v2 -> v3. We are doing our best to minimize the migration needed for this update.

When can we expect Skeleton v4?

When it's ready! We've already started prepping to convert all components to the new v4 format. And will keep you posted as we get closer to a solid release date. But note the current ETA for v4 is likely months out from now, given the scope of work and our current availability. We appreciate your patience in the meantime.

Special Thanks

Huge shoutout to long-time contributor @Hugos68 for leading the charge on this initiative!

[rChaoz]

I love the unified class attribute - this really has been a pain-point, by requiring to always look at the source to see the default styles and attribute names, but also never quite getting Tailwind autocomplete to work with all of the attributes.

However, I want to say that I don't like the verbose bits-based new components - this is actually one of the main reasons I chose to use Skeleton, over all of the other component libraries. I hope you can find a way to keep the current simplicity, with the added customizability. Personally, I'd love to see a way to use components with a "default" structure somehow:

<Accordion>
  <Accordion.Item>
    {#snippet lead()}<IconClub />{/snippet}
    {#snippet control()}Club{/snippet}
    {#snippet panel()}{lorem}{/snippet}
  </Accordion.Item>
</Accordion>

<!-- identical to -->

<Accordion.C>
  <Accordion.CItem>
    <Accordion.CHeading>
      <Accordion.CTrigger>
        <IconClub />
        <span>Club</span>
        <Accordion.CIndicator />
      </Accordion.CTrigger>
    </Accordion.CHeading>
    <Accordion.CContent>{lorem}</Accordion.CContent>
  </Accordion.CItem>
</Accordion.C>

The documentation should state that...

  <Accordion.Item>
    {#snippet lead()}{LEAD}{/snippet}
    {#snippet control()}{CONTROL}{/snippet}
    {#snippet panel()}{PANEL}{/snippet}
  </Accordion.Item>

equals

  <Accordion.CItem>
    <Accordion.CHeading>
      <Accordion.CTrigger>
        {LEAD}
        {CONTROL}
        <Accordion.CIndicator />
      </Accordion.CTrigger>
    </Accordion.CHeading>
    <Accordion.CContent>{PANEL}</Accordion.CContent>
  </Accordion.CItem>

so that anyone can copy-paste the new composed structure and replace {PLACEHOLDERS} with their custom content, if they want to customize the Accordion. Otherwise, they'll likely leave it as is, to avoid cluttering the component.

I'm not suggesting this exact syntax, just a way to use the component in a "default", non-verbose way. 100% of all Skeleton users are using components like this now (duh), so providing a way to update to v4 with a minimal migration, while allowing components to later be customized, is most important IMO.

[Hugos68]

Hey @rChaoz I do agree that the current syntax is verbose but you're hiding the verbosity with newlines, your example should actually be:

Old:

<Accordion>
    <Accordion.Item>
        {#snippet lead()}
            {LEAD}
        {/snippet}
        {#snippet control()}
            {CONTROL}
        {/snippet}
        {#snippet panel()}
            {PANEL}
        {/snippet}
    </Accordion.Item>
</Accordion>

New:

<Accordion>
	<Accordion.Item value="item-1">
		<Accordion.Heading>
			<Accordion.Trigger>
			    {LEAD}  
			    <Accordion.Indicator>
			        {CONTROL}
			    </Accordion.Indicator>
			</Accordion.Trigger>
		</Accordion.Heading>
		<Accordion.Content>
		    {PANEL}
		</Accordion.Content>
	</Accordion.Item>
</Accordion>

See how it's not actually that more verbose?

We will definitely try to make the process from V3 to V4 a nice and easy process. But we're, despite the seeming verbosity, pretty set on this component structure as the pros outweigh the cons by a LOT.

[rChaoz]

pretty set on this component structure as the pros outweigh the cons by a LOT.

I agree with this. I just think that, in the limits of the possibility, a simpler structure should be also supported. Both to ease migration, but also to make Skeleton stand out the many libraries with similar approaches.

[Hugos68]

Oh I think it definitely is doable to export a second set of components that are smarter but also less customizable. The question is if we can afford a "double" export maintenance and work wise.

[endigo9740]

The question is if we can afford a "double" export maintenance and work wise.

Definitely a no there. In the time spent supporting multiple copies of the same components, we could instead support multiple frameworks and grow Skeleton to many more users. Which has many benefits to the community, including more contributors, more bugs reported/fixed, etc.

Per the new syntax, this offers way more benefit than downsides. Basically everything we're adding is possible because the components are broken into smaller parts. Think of it as creating a more 1:1 relationship between component and template element within - which is why the new class syntax is possible, arbitrary attributes can be passed, etc.

Much like the runes change in Svelte 5 and the CSS-based configuration in Tailwind 4, I think this will feel a bit awkward at first, but the more the benefits will become more apparent the more you use this.

Let me put it this way - to me this is the simple most important update to Skeleton since launch, as it's solves many of the issues I've been trying to work around since the library's inception. I also think it'll be very helpful to new users to Skeleton that may already be used to these conventions from using libraries like Bits UI or Shadcn.