Skeleton Next - Update 10 - Ratings, Progress Ring, and Nav Components

[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"). Today we'll be showcasing three brand new v3 components. Each represent a huge step forward compared to their v2 counterparts.

New Components

As expected, all the new components have been ported to fully support Svelte 5 and React, as well as the newest Skeleton v3 conventions and aesthetic. Browse the React tab and view the API Reference for a run down of the new props and similar features.

Ratings

React | Svelte

First up, the new Ratings component. Contributor @Mahmoud-zino has introduced a number of improvements, including:

• Support for fractional steps, allowing you to support literally any fractional amount (ex: 0.1, 0.25, 0.5, etc)
• This uses a new clipping-path approach to smoothly transition between an empty and fill icon state
• Keyboard interaction has been improved and supports both up/down and left/right arrow keys
• Includes RTL support out of the box

Progress Ring

React | Svelte

Next we have the new Progress Ring component, which replaces the v2 Progress Radial.

• Uses the new shorter <ProgressRing> component name
• Supports rounded stroke caps by default
• Matches the <Progress> (bar) component and supports a max prop value
• Show a percentage amount in the middle by default, but can be replaced by icons or custom content
• Retains the indeterminate mode, which works the same as before

Navigation

React | Svelte

Finally a new set of navigation components now replace the v2 AppRail. Both extending and expanding on the prior version in a number of meaningful ways:

• Rail - a vertical nav element intended for medium to large screens.
  • Supports an optional expanded mode with a wider display
  • Makes use of the taller vertical space to support header and footer slots
• Bar - a horizontal nav element for small screens.
  • The first brand new component for Skeleton v3!
• Tile - the navigation tiles within the Rail and Bar components.
  • These can represent either <button> and <a> elements
  • Automatically adjusts to the expanded layout for rails
  • Support a selected state for handling local state

NOTE: currently the Rail only supports real-time toggling between the default and expanded mode for React. We will aim to bring parity to Svelte 5 in the future.
UPDATE: Fixed as part of: #2750

What's Next

Please see our other post concerning the future roadmap for Skeleton v3 and related projects. To summarize, we will be shifting priority to Skeleton v3 going forward, with a focus on components. Expect a larger uptick of new components over the next few weeks. Please keep an eye on our social channels and v3 documentation for details.