Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Feedback Votes Changelog Block for React

Four release notes you can vote on: Yes and No toggles that move a count by one and back, a share bar, and a No that opens a reason field with an honest local Send.

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-note feedback changelog for React with Base UI, written for Thumbwick, a fictional docs-feedback widget. A header whose sentence is counted from the votes sits over a band of four releases, newest first, each with its version, day, title and a line on what changed. Beside each (under it on a phone) "Was this useful?" has a Yes and a No toggle. A vote moves the count by one, pressing the same toggle again takes it back and the other one swaps the vote. The share that said yes is a foreground bar and a number that follow the counts. Choosing No opens a note field, "What was missing?", and a Send button; sending folds it away and a status line says "Thanks, sent." and that the note stays on this page. It's built from Guides, Toggle Group, Collapsible, Textarea and Button, with CSS transitions for the bar. For docs and release notes that ask readers whether they helped. The votes are example data.

FAQ

How do I change the notes and the votes?

Edit NOTES at the top of the file. A note has a version, an ISO date, a title, a summary and the up and down votes from everyone but the visitor. The share, the bar and the header's total are computed from those and from the visitor's own vote.

Does Send send anything?

No. The reason stays in this page's state and the status line says so. The send handler has a comment where your own endpoint goes. The note is optional, so a No can be sent without one.

Why can I take a vote back?

Each row is a multiple-select toggle group that keeps at most one pressed: pressing the other one swaps, pressing the same one clears. The counts move by one and back, so a mis-click costs nothing.

What happens to the note field when it closes?

The closed field stays in the HTML and is hidden, and the typed note is kept if you open it again.

How is it announced?

The bar repeats the sentence beside it, so assistive technology skips it. A status line is in each row from the start and takes focus once a note is sent, so the confirmation is read out.

  • Pro

    Feature Request Board Changelog

    Roadmap and customers

    An idea board in a split: a Suggest a feature form beside status tabs with counts and a list of ideas with once-only upvote toggles and comment counts; a submitted idea joins the list locally.

  • Pro

    Customer Request Changelog

    Roadmap and customers

    A "you asked, we shipped" band of four requests, each with an avatar stack, a count of customers and a span bar on one shared axis from the first ask to the release that shipped it.

  • Pro

    Reaction Votes Changelog

    Votes and sharing

    Four release rows, each with four reaction toggles drawn with icons (a thumb, a heart, sparkles, a party popper) whose counts move up by one when pressed and back when pressed again.

  • Pro

    Review Checklist Changelog

    Deploys and rollouts

    A pre-release checklist as a split: a progress summary and a Ship button that stays disabled until all 14 checks are ticked, beside four accordion categories of real checkboxes with owners and Blocker badges.

  • 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

    Filterable Changelog

    Filters and browsing

    The plainest filtered release list: one row of choices with counts (All, New, Improved, Fixed, Security) over nine releases, a live count of what is showing, and a height that never changes.

All 200 changelog blocks