Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Changelog Features Block for Svelte

A release feed for a changelog tool that presents its features as release entries: a New, Improved and Fixed filter with counts, a version rail, and a collapsible What changed list on each.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A release-feed features section for Svelte with Ark UI. Each feature is written as a release: a version, a relative date ("3 weeks ago"), a kind badge and the feature's name and sentence, with a "What changed" list that opens under it. A toggle group in the header filters the feed by New, Improved and Fixed, each with its count read from the data; picking none shows every release. A rail at the start holds the version and its line meets every band's rule at + marks, and the bands run from rail to rail. On a phone the rail becomes the first line of each row. It's built from Toggle Group, Collapsible, Badge, Status, Button and Guides, and it follows your theme. For changelog tools, developer products and any page that sells itself by what it shipped lately.

FAQ

How do I change the releases?

Edit RELEASES at the top of the file, newest first. Each has a version, a relative when, a kind (NEW, IMPROVED or FIXED), a title, a sentence and its changes. The filter's counts and the "3 of 7 releases" line are worked out from the list. Dates are relative on purpose: no year to go stale.

How does the filter work?

It's a multiple-choice toggle group: pick New, or New and Fixed, and only those releases show. Picking none shows all of them. A polite line under the group says "3 of 7 releases" when it changes, and each toggle's count is also read out ("New, 3 releases"). The group's value is an array of the picked kinds.

Does filtering move the page?

No: an unseen copy of the full feed sits in the same grid cell and holds its height, so the blocks below stay where they are while releases come and go.

How does What changed work?

Each release has a collapsible: the button says "What changed" and, for a screen reader, which version; it opens a short list of the details with a height animation that is off under reduced motion. They start closed so the feed is a skim, and any number can be open at once.

Is this a changelog page?

No: it sells the product's features by showing them as releases, a handful of the latest, with no history and no year. Link the full feed from the header if you have one.

What changes on a phone?

The version, the date and the kind badge become one line above each entry, the toggle group wraps under the heading, and the bands keep their rules. Nothing scrolls sideways at 320 pixels.

All 170 features blocks