Skeleton Next - Update 7 - Components and Animations

[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"). As usual, we've provided a quick summary post below, as well as an in-depth video walkthrough.

Today we'll cover documentation updates, preview new components, and go in depth on component animations.

Useful Links

• YouTube Video Walkthrough

Doc Updates

First up, the v3 doc site now features a round of structural improvements. This includes deeper integration of Astro's powerful Content Collections. This enables MDX and Markdown content to be abstracted from the file-based routes. Think of this as a local database, where data is queried and displayed on demand. The benefit of this is simpler organization of the site content, making it easier to retrieve and display data on demand. This will likely also help support our upcoming site search indexing.

New Components

Progress

Additionally, Skeleton has two new components incoming. First the new Progress component. This includes a sleek design and simple prop interface, while also introducing high quality animations, including support for custom CSS animations in indeterminate mode.

Tabs

The new Tabs component is coming later this week. This features a fresh new design, allows for extensive customization, while retaining the simple state management from previous versions of Skeleton. Expect this to arrive on the doc site later this week. In the meantime, see a preview in the video walkthrough linked above.

Component Animations

Finally, we're thrilled to announce we've finally settled on a solution for animations in Skeleton components. After much deliberation, we've opted to lean into the strengths of each framework.

• For Svelte, that means we'll continue using the built-in Svelte/Transition and Svelte/Animation features.
• For React, we'll be introducing the first peer dependency in Svelte's history - Framer Motion

Framer Motion

The React ecosystem does not currently provide a first class solution for animations, which leaves a large gap in providing high fidelity components. While there are great options such as React Spring and GSAP , we've opted for Framer Motion due to its top-notch documentation, ease of use, and powerful feature set. It even received a shoutout in the recent Tailwind v4 preview (near the end). To learn more, checkout their list of interactive examples.

What's Next

With animations sorted, we'll continue to build new components new components. We'll also be putting more focus into nailing down a great solution for automated documentation. This enables us to parse raw code configuration settings, such as props, directly from the code and display this information directly on each feature's page. Expect more updates soon!

[withden]

Awesome work @endigo9740. I'm playing with the themes and components(next version - v3), it's really good. Glad to see good progress towards v3.