Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Availability Index Features Block for Solid

A feature index for a deploy tool: a large headline over a table of six features, each with a rollout meter and a channel badge, in bands that run from rail to rail.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A typographic availability index for Solid with Ark UI. A large left-aligned headline and one sentence sit over a table of six features. Each row is a band: the feature's name as a link with its sentence under it, a five-segment rollout meter that shows the share of workspaces that have it, and a channel badge (Stable, Beta, Preview or Planned). The rows are hairline bands from rail to rail, tinted on hover and when a name takes focus, under a top rule with + marks; the table ends the block, so the next section's rule is its foot. It's built from Table, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For release notes, roadmaps, status pages and any product that wants to say honestly what is shipped and what isn't.

FAQ

How do I change the features and their rollout?

Edit FEATURES at the top of the file. Each entry has a name, a sentence, a channel and segments, from 0 to 5, where each segment stands for a fifth of workspaces. The percentage beside the meter is worked out from segments, so the drawing and the text can't disagree.

How does a screen reader get the rollout?

The five segments are decoration, hidden from assistive technology. Beside them is the percentage in text, followed by a visually hidden "of workspaces", so a row reads as "60% of workspaces". The channel is a badge with its name in words, so nothing depends on weight or colour alone.

What happens on a phone?

Below md the table keeps one column. The Rollout and Channel columns and their headers are hidden, and the channel badge and the meter appear in a row under each sentence, so a row never scrolls sideways at 320 pixels. From md the three columns return.

Does it follow my theme?

Yes. The table, the meter and the badges use card, muted and foreground tokens, with no fixed colours and no dark scope, so the index is light on a light page and dark on a dark one. Nothing here is primary: the block has no button.

What moves, and what happens with reduced motion?

The header fades up once on load, with a CSS transition. With reduced motion the transition is off and the block simply appears. Nothing else moves.