Accordion Numbered 2 - Numbered with Large Index

Pro

Accordion with a large light index that darkens on hover and when its item opens.

Shadcn Accordion Numbered 2 component

Component data

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

Accordion Numbered 2 component design & features

Each row starts with a large, light tabular number. The number darkens on hover and turns to the foreground colour when its item opens, and the square indicator fills.

Use it for process or service lists where the step number carries as much weight as the title.