Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Feature Request Board Changelog Block for React

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.

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 feature-request board for React with Base UI, written for Suggestbox, a fictional idea board. A split with a divider puts the heading, a count of the ideas and votes, and a "Suggest a feature" form at the start: one field and a Shine Button, "Submit idea". At the end four status tabs (Under review, Planned, In progress, Done) each show their count over a list of ideas with an upvote toggle and a comment count. A vote moves the count by one, and pressing it again takes it back. A submitted idea joins the top of Under review with your vote, a status line says it stays on the page and nothing is sent, and the tab count and the header follow. Done ideas keep their count without a toggle. An unseen copy of every panel holds the list's height. It's built from Guides, Tabs, Toggle, Field, Input and Shine Button, with CSS transitions for the entrance. For feedback tools and public roadmaps. The ideas and votes are example data.

FAQ

How do I change the ideas and the statuses?

Edit IDEAS at the top of the file: a list of ideas for each status, each with a title, the votes from everyone but the visitor, the comments and who suggested it. The tab counts, the header's totals and the vote counts are computed from them.

Does submitting an idea send anything?

No. The idea is added to this page's state and nothing is sent; a refresh clears it. The submit handler has a comment where your own endpoint goes. The field checks itself when you leave it and on submit (at least eight characters), and a failed submit moves focus back to the field.

Can I vote more than once?

No. Each idea has one upvote toggle: the count moves by one when you press it and back when you press it again, and the key is the toggle's own, so Space and Enter work. The count only changes for this visit.

Does changing tab move the page?

No. A copy of every status's list sits, unseen and inert, in the open panel's grid cell, so the tallest list sets the height. Adding an idea grows it, as it should.

How does it work with the keyboard?

Arrow keys move between the tabs, and the panel changes with them. The toggles and the form are ordinary controls in the tab order. On a phone the form comes first, then the tabs.

  • 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

    Feedback Votes Changelog

    Votes and sharing

    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.

  • Pro

    Roadmap Preview Changelog

    Roadmap and customers

    A roadmap for a planning tool: an accordion of three themes whose rows count their items by stage and open to a list with a stage and a target quarter, beside a framed Now building card with a progress bar, owners and a target.

  • 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

    Deprecation Notices Changelog

    APIs and integrations

    Four deprecation notices, each a window bar from the day it was announced to the day it sunsets, filled to an as-of day with a tick, with the days counted and the replacement named.

  • 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