feat: experimental component API

[Hugos68]

Linked Issue

Closes #3463

Also solves/closes:

• Review VS Code Intellisense auto-complete for Tailwind classes #3193
• Expose all types/props #3471
• Proposal: Tailwind Merge pattern for native Tailwind v4 #3339
• v3: Avatar component does not accept crossorigin prop or actions. #3230
• Slider per-mark customisation #2982
• NEXT: Review options for sharing and maintaining common component data between frameworks #2811
• Don't add data-testid attributes to component roots #3514

Review the RFC

• RFC: Component API Changes #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]

🦋 Changeset detected

Latest commit: 0b2d998

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]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
themes.skeleton.dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 18, 2025 1:45pm
www.skeleton.dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 18, 2025 1:45pm

[endigo9740]

The documentation Accordion/Avatar pages look like a great start. We just need to dress up the examples to be a bit closer to their legacy counterparts - that includes all relevant examples and API reference. We can probably get by without Anatomy for now. These will real docs used by actual end users leading up to the v4.x release.

Additionally, now that we have a stability frontmatter key, we should update the page template to display an alert that further emphasizes the feature status. Here's my recommendations:

(tonal-warning alert color)

Beta Feature

This feature is currently in a beta status and not intended for production use. It should be mostly functional, but may receive breaking changes before the final stable release.

(tonal-error alert color)

Alpha Feature

This represents a cutting edge and experimental feature that should not be used in production. Expect major breaking changes before this graduates to beta status.

[Hugos68]

I've done that now, I've specifically not used error because the user isn't doing anything wrong and that would give them a sense of wrongdoing. It's merely a warning about a non stable API. So all stability warnings are of the warning color.

[endigo9740]

As discussed on GitHub, we'll need to experiment with how we handle animations for relevant components. I'm going test a few things after this review. Expect an update by EOD today.

[endigo9740]

We should implement at least one example test case for either component to verify how we'll handle these. We should not re-test Zag features. But we should test custom Skeleton changes - such as the inclusion of a new icon snippet. Or any similar change not inherent to Zag's implementation.