feat: experimental component API

[Hugos68]

Linked Issue

Closes #3463

Also solves/closes:

• https://github.com/skeletonlabs/skeleton/issues/3193
• https://github.com/skeletonlabs/skeleton/issues/3471
• https://github.com/skeletonlabs/skeleton/issues/3339
• https://github.com/skeletonlabs/skeleton/issues/3230
• https://github.com/skeletonlabs/skeleton/issues/2982
• https://github.com/skeletonlabs/skeleton/issues/2811
• https://github.com/skeletonlabs/skeleton/issues/3514

Review the RFC

• https://github.com/skeletonlabs/skeleton/discussions/3499

Description

This PR adds a composed folder with all of our components using the new component API described in #3463.

API

These components will become available (when this PR is merged) under an alternative export path for users who want to test the new API.

import { Accordion } from '@skeletonlabs/skeleton-react/overhaul'

<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>

Features:

• Piecemeal components which allows for more fine grained (less abstraction).
• Full restAttributes support, components are now simply wrappers around HTML elements and allow you to define any attribute like a normal HTML element.
• Implementation of base styling system where we get rid of all the specific style props and introduce a single class (or className in React) prop that uses either the base: directive or twMerge (up for discussion).
• Implement the child snippet pattern, see: https://bits-ui.com/docs/child-snippet

Ccomponents

Component	React	Svelte
Accordion	Done	Done
Avatar	Done	Done

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 93243fc0038afe0c2ff3b891c6225f86edd55be9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@skeletonlabs/skeleton-svelte	Minor
@skeletonlabs/skeleton-react	Minor
@skeletonlabs/skeleton	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
themes.skeleton.dev	Ready	Preview	Comment	Aug 19, 2025 3:42pm
www.skeleton.dev	Ready	Preview	Comment	Aug 19, 2025 3:42pm

[oatmealproblem]

One potential concern about this base: classes approach: how much will it increase the size of CSS for apps that use skeleton?

With the current v3 approach, all the classes are potentially re-used. Eg, if skeleton base styles something with round-container and I style something with round-container, we're both using the same class so that's just defined once.

But in this proposed approach, skeleton styles with base:round-container and I style with round-container, those are separate classes, so won't that essentially be duplicated? Worst-case scenario, it could double the amount of CSS needed?

[Hugos68]

@oatmealproblem That's an excellent question we immediately asked ourselves, so I did some investigation, you can see our findings here: https://gist.github.com/Hugos68/8a5e2ee2f53522a350ac70ae20c2dcfc

TL;DR The bundle size tradeoff is quite insignificant (Especially compared to similar solutions like tailwind-merge).

[oatmealproblem]

@oatmealproblem That's an excellent question we immediately asked ourselves, so I did some investigation, you can see our findings here: https://gist.github.com/Hugos68/8a5e2ee2f53522a350ac70ae20c2dcfc

TL;DR The bundle size tradeoff is quite insignificant (Especially compared to similar solutions like `tailwind-merge).

Thanks, looks good! Glad to see that was already considered

edit: And I suppose if anyone is very CSS-size-conscious, they could configure Tailwind to ignore the skeleton component files, and pass in all the (non-base:) classes themself.

[endigo9740]

@oatmealproblem the new RFC is now live covering these changes:

• https://github.com/skeletonlabs/skeleton/discussions/3499

Feel free to review and leave your feedback there.