Accordion Proximity 1 - Proximity

Pro

Accordion that dims every other item to half opacity while one is hovered.

Shadcn Accordion Proximity 1 component

Component data

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

Accordion Proximity 1 component design & features

A single :has() selector on the root fades all items except the hovered one, so attention narrows to the row under the pointer. No JavaScript is needed.

Proximity dimming works well for short lists in help panels where focus should follow the pointer.