Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Bug Tracker Todo List Block for React Aria

A bug list filtered by severity with counts, rows that open to numbered reproduction steps, the affected part and the reporter, and a four-step status advanced by one button.

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

Keep a small team's bugs in one place, with this bug tracker block for React with React Aria. A Toggle Group filters the list by All, Critical, Major or Minor with a live count on each; on a phone it becomes a Native Select. Each bug is a Collapsible row with its title, id, affected part, a severity word with a signal glyph and its status. Opening a row shows the numbered steps to reproduce, the reporter's initials in an Avatar and a four-step status drawn as dots and named in words: Open, In progress, Fixed, Verified. One outline Button names the next state, "Advance to Fixed", and moves the bug there; a verified bug offers "Reopen bug". The list region keeps its height, so opening a row scrolls inside it. Guides rule the bands. For bug lists, QA checklists and any queue where each item has a few stages.

FAQ

How is severity shown without color?

As a word with a signal glyph beside it that gets heavier with the level: three bars for Critical, two for Major and one for Minor. Nothing relies on a hue, and the filter counts are worked out from the rows.

How does the status work?

Each bug holds a number from Open to Verified. The dots are decoration; the four words are real list items and the current one carries aria-current="step". The button's label is built from the next word, and pressing it announces the new state.

Where do the reproduction steps come from?

Each bug has a steps array of plain sentences, shown as an ordered list. Keep each step to one action so someone else can follow it.

What stays local, and how do I wire it for real?

Statuses live in the page and reset on reload. Send the new status from advance to your issue tracker and update the row from its answer.

How do I use it from the keyboard?

Each row's heading is a button: Enter or Space opens it. The severity filter is a toggle group with arrow keys, and the advance button is a normal button inside the open row.

How does it look on a phone?

The severity switch is a select, the rows keep their title and status on two lines, and an open row stacks the steps, the reporter, the status dots and the button.

All 100 todo list blocks