Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Quiet Mono Release Log Block for React

A quiet release log of five single mono lines: an inverted version chip, a plain date, a sigil and a word for the kind of change, and the change itself, between hairlines.

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 quiet changelog for React with Base UI, written for Quietterm, a fictional terminal emulator. A start-aligned header with a Full changelog link sits over five releases, each a single mono line between hairlines: the version as an inverted chip, the date as plain digits, the kind of change as a sigil and a word (+ new, ~ improved, ! fixed) and the change itself. There are no badges and no icons. The chip is inverted by structure (foreground fill, background text), so the block follows your theme in light and in dark. It's built from Guides and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For terminals, CLIs and any product that wants its changelog as quiet as its interface. The releases are example data.

FAQ

Why is it called dark minimal if it follows the theme?

The slug keeps its URL. The look is quiet and typographic, with a high-contrast version chip, but no section is forced dark: in a light theme it's light, in a dark theme it's dark.

How are the kinds told apart without colour or icons?

Each line says the word (new, improved, fixed) after a sigil. The sigil is decoration and hidden from assistive technology; the word carries the meaning.

How do I change the lines?

Edit RELEASES at the top of the file, newest first: a version, an ISO date shown as it is, a kind and the change. Dates are fixed, never computed from today. Five lines is the limit; older ones belong behind the link.

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

Below md each line stacks: the chip and the date on one row, the kind and the change under them. In a right-to-left layout the rows mirror; versions and dates stay left to right.

What moves?

The header and the list fade up once on load, with CSS transitions; with reduced motion they are off. The block has no state.

  • Pro

    Compact Timeline Changelog

    Lists and timelines

    The last three weeks of a time-tracking app on one thin rail: six releases of two small lines each, with the dot's shape (circle, diamond, square, ring) telling the kind and a one-line key.

  • Pro

    Condensed Feed Changelog

    Lists and timelines

    Twelve releases of a news reader as a single-line ledger: the day, a type word, the headline and the version on one row, month rows between, and the older rows opening in place.

  • Pro

    Compact Badges Changelog

    Lists and timelines

    The eight latest releases of a ticketing tool as one dense framed table: a mono version badge, a type tag with an icon and a word, what changed and the day it shipped.

  • Pro

    Release Timeline Changelog

    Lists and timelines

    A release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.

  • Pro

    Grouped Date Changelog

    Lists and timelines

    Changes grouped by the day they shipped: each day has a drawn calendar tile (month, big day number, weekday) beside a dated heading and its changes with a type tag, a sentence and the release.

  • Pro

    Color Coded Changelog

    Lists and timelines

    A changelog for a palette tool whose five kinds of change are coded without colour: a pattern strip, an icon and a word each, with a legend that dims the other rows in place.

All 200 changelog blocks