shadcn.io is not affiliated with official shadcn/ui
Session Analytics Dashboard Block for React Aria
Two visitor segments compared side by side, each with active sessions, average duration, pages per session, bounce rate and its most reached pages, plus a written line on how the pair differs.
Installation
Overview
Compare how two groups of visitors behave with this session analytics dashboard for React with React Aria. A hairline frame with a plus mark on each corner opens with a toolbar of two Native Selects, "Compare" and "with", over five segments: Desktop, Mobile, Tablet, New visitors and Returning. Below it two columns share one hairline. Each lists the segment's active sessions, average duration, pages per session and bounce rate, with a small bar scaled against the other side, then the five pages its sessions reached most. A polite line under the pair says the difference in words, such as "Desktop against Mobile: sessions last 1m 48s longer, view 1.5 more pages and bounce 18.6 points less." Choosing the segment already on the other side swaps them, and a Swap button does the same. It's built from Native Select, Button and Guides. For product, growth and support reviews.
FAQ
How do I fill it with my segments?
Edit SEGMENTS: an id, a name, the sessions, the average duration in seconds, pages per session and bounce rate in tenths, and the five reached pages with the percent of the segment's sessions that saw each. The columns, the bars and the difference sentence are worked out from those values.
What if I pick the same segment on both sides?
It can't happen: choosing the segment shown on the other side puts the one you replaced there instead, so the pair always has two different segments.
What do the bars show?
Each bar is that figure as a share of the larger of the two sides, so the bigger side always fills the track. They only help the eye; the numbers beside them and the sentence under the pair are the reading.