Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Community Contributions Changelog Block for Svelte

Four merged pull requests as cells with the title, number, author, a First contribution badge, the merge day and a drawn diffstat, under a header counted from all fourteen.

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 community-contributions changelog for Svelte with Ark UI, written for Pavemoor v2.8.0, a fictional open-source UI toolkit. The header's sentence is counted from the release's typed list of merged pull requests ("14 pull requests from 9 contributors, 4 for the first time"). Under it four of them are cells whose lines run a little past their corners, one column on a phone and two from sm. Each cell has the title, the number in mono, the author's initials and name with how many of the release's pull requests they merged, a "First contribution" badge where it is their first, the day it merged and a drawn diffstat: five squares, solid for the share added and outlined for the share removed, beside "+120 −14". A ghost link to every merged pull request ends the block. It's built from Guides, Avatar, Badge and Button, with CSS transitions for the entrance. For open-source projects thanking the people who contributed. The people and pull requests are example data.

FAQ

How do I change the pull requests?

Edit PULLS at the top of the file: every pull request merged for the release, each with its number, title, author, the lines added and removed, the merged day and whether it is featured (shown as a cell) and the author's first. The header's counts, the first-time badges and each author's merged count are computed from the list.

How is the diffstat drawn?

Five squares: the share of lines added sets how many are solid (at least one) and the rest are outlined. The numbers beside them, "+120 −14", carry the meaning, and a hidden sentence reads them as "120 lines added, 14 removed". The squares are decoration.

How does it fit a phone and a right-to-left layout?

On a phone the cells stack in one column. In a right-to-left layout the cells mirror and their lines keep running past the corners, while numbers, versions and the diffstat stay left to right.

What moves, and what happens with reduced motion?

The header and the cells fade up once on load. Nothing else moves, and with reduced motion the entrance is off.

All 200 changelog blocks