Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

SEO Metrics Dashboard Block for Vue

Keyword rankings in four bands (top 3, 4 to 10, 11 to 20, dropped) with position, four-week change and volume, and a 12-week position line on an inverted axis for the keyword you pick.

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 which keywords are climbing and which have fallen out of view with this SEO metrics dashboard for Vue with Ark UI. Tabs for Top 3, 4–10, 11–20 and Dropped open a hairline frame with a plus mark on each corner, each tab counting its keywords. Under them a table lists the band's keywords with their position, the change over four weeks as an arrow and a number of places, and the searches a month. Choosing a keyword draws its last 12 weeks of position as a line on an inverted axis, with position 1 at the top, and says "Best 3, now 5" beside the title. The sentence above gives domain authority, organic visits and how many tracked keywords sit in the top 20. It's built from Tabs, Badge and Guides. For SEO reports and content reviews.

FAQ

How do I fill it with my keywords?

Edit KEYWORDS: a text, its monthly monthly searches and positions, the position at the end of each of the last 12 weeks, oldest first. A keyword's band comes from its latest position: 1 to 3, 4 to 10, 11 to 20, or beyond 20 for Dropped. The counts, the changes, the chart and the header sentence are worked out from the positions.

Why does the line go up when the position number goes down?

The axis is inverted on purpose: position 1 is the best place, so it sits at the top and a climbing keyword climbs on the chart. The axis labels are the position numbers, and a hidden table under the chart lists every week.

What does the change column mean?

It's the places gained or lost against four weeks ago: an up arrow with a count of places for a keyword that moved closer to position 1, a down arrow for one that fell back, and a dash for no change.

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

Everything: the positions are typed and nothing is crawled. Feed them from your rank tracker's weekly export, set the date in AS_OF, and take domain authority and organic visits from your own reports.

How does it look on a phone?

The tabs share the width and drop their counts on the narrowest screens, the volume column is hidden, and the chart sits under the table.

All 200 dashboard blocks