Version 4 Preview

Component

As we prepare for the upcoming release of Skeleton v4, we will introduce new component APIs for all Skeleton components and supported frameworks. This comes in the form of three primary changes, covered below.

Composed Pattern

The component structure will now be much more explicit and granular. While a bit more verbose, this offers direct access to all children within the component tree. Allowing you to pass pass arbitrary props and attributes directly to the the HTML template within. Including: required, data-*, style, class, and many others.

<Accordion>
  <Accordion.Item value="item-1">
    <Accordion.Heading>
      <Accordion.Trigger>Item 1</Accordion.Trigger>
      <Accordion.Content>Content for Item 1</Accordion.Content>
    </Accordion.Heading>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Heading>
      <Accordion.Trigger>Item 2</Accordion.Trigger>
      <Accordion.Content>Content for Item 2</Accordion.Content>
    </Accordion.Heading>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Heading>
      <Accordion.Trigger>Item 3</Accordion.Trigger>
      <Accordion.Content>Content for Item 3</Accordion.Content>
    </Accordion.Heading>
  </Accordion.Item>
</Accordion>

Simpler Stying

The most painful part of using Skeleton in the past has been learning the unique conventions required to apply styles to to each component. Previously we relied on reserved prop names, special prefixes, etc. This is no longer the case. You simply provide your styles via a common class attribute per component.

v3 Styling

<Avatar ... rounded="rounded-2xl" imageClasses="grayscale" />

v4 Styling

<Avatar class="rounded-2xl">
  <Avatar.Image src="https://i.pravatar.cc/150?img=48" class="greyscale" />
  <Avatar.Fallback>SK</Avatar.Fallback>
</Avatar>

Rather than opting for additional tooling like Tailwind Merge under the hood, we instead accomplish this using the new custom variant syntax provided in Tailwind 4.

@custom-variant skb {
  @layer base {
    @slot;
  }
}

This enables us to assign all internal styles to the @base layer within your generated CSS bundle. We then inject our Tailwind utility classes to the class attribute within each component for the default styling, but prefix them with skb (short for “Skeleton Base”).

{
  class: "skb:bg-surface-500 skb:rounded-full"
}

Then, when you supply custom classes via the component’s class attribute, those are appended to the end of the class list and automatically take precedence. By pairing this with the new composed component structure, this means you can alawys target the portion of the component you wish to adjust. Leading to a much more intuative experience overall that is closer to working with native HTML.

Extensible Markup

Finally we’re adding one more tool to your toolkit - the ability to override and modify the component template markup.

React

export default function () {
  return (
    <Accordion>
      <Accordion.Item value="item-1">
        <Accordion.Heading>
          <Accordion.Trigger element={({ attributes }) => <button {...attributes}>My Own Button</button>} />
          <Accordion.Content>Content for Item 1</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      {/* ... */}
    </Accordion>
  );
}

Svelte

<Accordion>
  <Accordion.Item value="item-1">
    <Accordion.Heading>
      <Accordion.Trigger>
        {#snippet element({ attributes })}
          <button {...attributes}>My Own Button</button>
        {/snippet}
      </Accordion.Trigger>
      <Accordion.Content>Content for Item 1</Accordion.Content>
    </Accordion.Heading>
  </Accordion.Item>
  <!-- ... -->
</Accordion>

By exposing the the the internal attributes, this enables you to take control and template implementation.

NOTE: we expect this will open the door to custom animations. Expect more guidance on this in the future.

Early Access Preview

If you’re interested in trying our early preview of the new Skeleton v4 components, you can do so immediately by updating to the latest release of each production Skeleton v3 package:

• @skeletonlabs/skeleton - for styling
• @skeletonlabs/skeleton-react - for React components
• @skeletonlabs/skeleton-svelte for Svelte components

We have currently provided two new components that follow the new patterns. There are available in parallel to their standard v3 variants, which means you can easily swap between at will.

• Avatars: React | Svelte via import path @skeletonlabs/skeleton-react/composed
• Accordions: React | Svelte via import path @skeletonlabs/skeleton-svelte/composed

Request for Comment

For the duration of this preview, we ask that you please test the new component structure, styling, and markup features in your projects. Note that these features are considered experimental and subject to breaking changes at any time. However, we encourage you to share feedback in both Discord (via #contributors) and GitHub. We’ll aim to provide progress updates as frequently as we can.