shadcn.io is not affiliated with official shadcn/ui
Mobile Analytics Dashboard Block for React Aria
A week of mobile app sessions with a platform toggle for All, iOS and Android, a four-figure strip, the top screen paths with the drop-off at each step, and the app versions in use as one stacked bar.
Installation
Overview
See where people leave your app, with this mobile analytics panel for React with React Aria. A Toggle Group in the header picks All, iOS or Android, and a hairline frame with a plus mark on each corner re-works everything under it: a strip of sessions, crash-free sessions, average session length and screen views, then four Tapwise screen paths as chains of four screens. Under each chain a rail gets thinner with every step, in step with the sessions still on the path, and the words under each screen give the drop-off from the one before. The versions in use close the panel as one stacked bar with a legend. It's built from Toggle Group and Guides, with hand-built rails and bars. For product teams and mobile release reviews.
FAQ
How do I fill it with my app's numbers?
Edit IOS and ANDROID: each holds its sessions, crashes, mean session seconds, views, the session counts at each step of each path and the sessions per app version. PATHS names the paths and their screens, and VERSIONS the versions. All is worked out by adding the two platforms, with the average length weighted by sessions.
How is the drop-off shown?
Each screen reports how many sessions reached it. The rail above it is thicker the larger the share of the first screen's sessions, and the words say how many fewer arrived than at the screen before, for example minus 41 percent. The first screen says Start, and the figure beside the path name is the share of sessions that finish it.
How is the crash-free rate worked out?
It is one minus the crashed sessions over all sessions, to two decimals, for the platform you picked. On All it uses the sums of both platforms, so it is not the average of two percentages.
What stays local, and how do I wire it for real?
Everything: the counts are typed and no SDK reports to this page. To make it real, aggregate your analytics events by platform on the server, define a path as an ordered list of screen views inside one session, and send the weekly totals to this component.