Accordion Numbered 3 - Numbered with Circle

Pro

Accordion with step numbers in small circles that fill when their item opens.

Shadcn Accordion Numbered 3 component

Component data

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

Accordion Numbered 3 component design & features

Each title starts with a numbered circle. The open item's circle fills with the foreground colour, and the chevron indicator rotates.

Circled numbers fit setup guides and import flows that walk through steps in order.