Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Content Performance Dashboard Block for Vue

Eight articles ranked by views with read time, bounce, shares and an SEO score, and a greyscale page for the chosen article with the share of readers who reach each of five sections, for Desktop or Mobile.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See how far people read with this content dashboard for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a table of Readmark's eight most-read articles of October, most viewed first, with a bar for views and columns for average read time, bounce, shares and an SEO score written as a word and a number. Pressing an article draws it in the side cell as a greyscale page of five sections, with the share of readers who reach each section as a bar down its edge. A ToggleGroup switches between Desktop and Mobile readers, and a polite line reads the result, such as "77% of desktop readers reach the third section, and 47% reach the end." It's built from ToggleGroup, a native table and Guides. For editors and growth teams.

FAQ

How do I fill it with my own articles?

Edit ARTICLES: a title, views, read (seconds), bounce, shares, an seo score and two depth lists, desktop and mobile, each with the share of readers still on the page at 0, 25, 50, 75 and 100% of the way down. The bars, the clock times, the SEO words and the section figures are worked out from them.

How is the share for each section worked out?

Section n starts (n - 1) fifths of the way down the page. The share who reach it is read from the typed quarter points in a straight line between the two nearest, then rounded. So the third section sits at 40% of the page, between the 25% and 50% points. It is arithmetic on the typed lists, not a measurement.

What do the SEO words mean?

Strong is 80 and over, Fair is 60 to 79 and Weak is below 60. Change seoWord to match your own scale. The number is always shown beside the word.

How do I use it from the keyboard?

Each article title is a button that you reach with Tab and press with Enter or Space; the pressed one is marked and its page is drawn. The Desktop and Mobile toggle uses the arrow keys. The drawn page is hidden from assistive technology, and each section's share is also written for it, as in "Section 3: 77% reach it".

What stays local, and how do I wire it for real?

Everything is typed and nothing is measured. Feed ARTICLES from your analytics export, with scroll depth bucketed into the five points, and keep the Desktop and Mobile split if your tool has one.

How does it look on a phone?

The table keeps the title, views and SEO score, with read time and bounce moved under the title. The drawn page sits under the table with its toggle.

All 200 dashboard blocks