Accordion Checklist 2 - Checklist with Progress

Pro

Setup checklist with a progress bar header and a Mark complete button in each panel.

Shadcn Accordion Checklist 2 component

Component data

ID
accordion/accordion-checklist-2
Access
pro
Created
Oct 30, 2026
Type
example
Libraries
Radix UI, Base UI, React Aria

Accordion Checklist 2 component design & features

Each panel has a Mark complete button that ticks the step and moves the progress bar in the header. Completed steps keep their tick and disable the button.

Use it where users finish setup tasks inside the panel, such as configuring email sending or a new integration.