Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Documentation Updates Changelog Block for React

A docs sitemap outline split by a divider, with New page, Updated and Rewritten marks on the changed pages and a Switch that keeps only those pages without moving the frame.

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 documentation changelog for React with Base UI, written for Manualist, a fictional docs platform. A divider splits the block. At the start sit the header (7 docs pages changed in September, counted from the data), a Switch labelled Only changed pages, a polite line saying how many pages are showing, and a short list of New page, Updated and Rewritten with their counts. At the end, in an inset frame, sits the outline itself as nested lists: Getting started, Guides and API reference, with a line for each of eleven pages. A changed page carries a mark, an icon and a word; the rest are quiet. Turning the Switch on keeps only the changed pages, and an unseen copy of the whole outline holds the frame's height. It's built from Switch, Guides and nested lists. The outline is example data and nothing is published.

FAQ

How do I change the outline?

Edit SECTIONS: each section has pages, and a page has a name and a mark (NEW_PAGE, UPDATED, REWRITTEN or NO_MARK for unchanged). The headline number, each section's changed count, the kind list and the status line are all computed from it.

What does the Switch do, and does anything move?

On, it keeps only the changed pages; off, it shows every page. The frame does not move: an unseen copy of the whole outline sits in the same grid cell, so the height of the full outline is always reserved. A polite line reads how many pages are showing.

How is a change shown without colour?

With an icon and a word at the end of the page's line: New page, Updated or Rewritten. Unchanged pages have no mark and a quieter text weight, so the difference does not depend on colour.

What changes on a phone and in a right-to-left layout?

The outline sits under the controls at full width. In a right-to-left layout the split and the indented pages mirror; counts keep their reading order.

What moves?

The two halves fade up once on load, with CSS transitions that reduced motion turns off. Toggling the Switch swaps the lines at once.

  • Pro

    Package Changelog

    Packages and versions

    One package's changelog behind a version select: its semver bump, release day, weekly downloads that count on to each version's figure, a Migration guide link, the install command with a Copy button and the changes in an accordion of groups.

  • Pro

    Checklist Style Changelog

    Votes and sharing

    A "tried it" checklist of the six latest things a task board shipped: a real checkbox per feature with its version and day, a count in the header and a meter that fills as you tick.

  • Pro

    Config Changes Ledger Changelog

    Data and config

    A change ledger of settings with the old value struck through and the new one after an arrow, an environment Select, and a Copy button for each row's rollback command.

  • Pro

    API Changes Changelog

    APIs and integrations

    A band of ruled rows listing changed API endpoints, each with its method, path, one line on what changed, a kind (Added, Changed, Removed) and its version, filtered by HTTP method with a toggle group that sums up what is showing.

  • Pro

    Feature Spotlight Changelog

    Spotlights and media

    One release with its headline feature in the spotlight: a drawn greyscale editor with two named cursors beside the title and why it matters, and a band of four smaller changes underneath.

  • Pro

    Code Owners Changelog

    Code and commits

    A path tester: type a file path and see which team owns it, the pattern that matched and the number of reviewers, with the owning row ringed in a framed table of teams, patterns, reviewers and wait times.

All 200 changelog blocks