shadcn.io is not affiliated with official shadcn/ui
Device Breakdown Dashboard Block for Vue
An icicle of three tiers (devices, browsers within them, OS versions within those) as wide as their users, with a trail naming the selected block and a side cell reading its share of its parent and of all users.
Installation
Overview
See how your audience splits by device, browser and OS version with this partition chart for Vue with Ark UI. A hairline frame with a plus mark on each corner holds an icicle of three rows: Screenage's 10.0M monthly users by device, the browsers inside each device and the OS versions inside each browser, every block as wide as its users. Pressing a block lights its path from the device down and fills a trail above it, where each step is a button that selects that level. The side cell reads the block's users, its share of its parent and its share of all users, and lists the blocks inside it as wide buttons for the ones too thin to press. It's built from Button, a native table for screen readers and Guides. For web analytics and compatibility planning.
FAQ
How do I fill it with my own breakdown?
Edit SLICES: each has an id written as its path (mobile/safari/ios18), a name, its parent's id, a tier (0 for devices, 1 for browsers, 2 for OS versions) and users in thousands. List them depth first so each row draws in order, and keep each block's users equal to the sum of the blocks inside it. The shares and the widths are worked out from them.
How do I pick a block too thin to press?
Select its parent, then press it in the Inside list of the side cell, where every block is a full-width button with its share of the parent. Blocks under 8% of all users carry no label in the icicle for lack of room; every block is named for assistive technology.
How do I use it from the keyboard?
The icicle is one tab stop. Arrow keys move along a row, Up goes to the parent, Down goes to the first block inside, and Home and End jump to the ends of the row. Enter or Space selects. The trail is a navigation of buttons, and a polite line reads the selection with both shares.
Is there a text version of the chart?
Yes. A table that is hidden from sight lists every block with its level, its users and its share of all users, so a screen reader gets the same facts as the drawing.