Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Target Ratio Progress Stats Block for Vue

Five team rows led by a booked-over-quota ratio at display size, each with a bar along the row's floor and the share and the gap written at the end.

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

A target-ratio progress list for Vue with Ark UI. Attainly, a quota-tracking tool for sales desks, opens with how many teams have reached quota, then lists five teams in rows that run from rail to rail and end the block. The lead of a row is the ratio itself, booked over quota at display size (312 / 400), with the team's name above it and, at the end, the share and the gap in words: "88 to go", or a check and "Quota met, 18 over". The bar is the row's floor, full width under the figures. It is built from Progress, SlidingNumber and Guides, in the foreground colour only.

FAQ

How do I change the teams and their quotas?

Edit TEAMS at the top of the file. A team has a name, what it has booked and its quota, both in thousands of dollars. The shares, the gaps, the overall total, the count of teams at quota and the headline are computed from those numbers when the module loads, so nothing else needs editing.

What does a bar show when a team is over quota?

The bar stops at full, because a bar can't be more than whole. The row says so in words, with a check: "Quota met, 18 over". The share at the end still reads the true number, for example 107%.

Why isn't a missed quota red?

Whether a team is behind is written in the row ("88 to go"), and a team that has met quota gets a check, so no row relies on colour. The bars use the foreground colour on a muted track, which keeps the block clean in any theme.

Does the ratio animate?

The booked half of the ratio rolls up once, when the row scrolls into view, and shows the final figure straight away when motion is reduced. The quota half is plain text. The header fades up once on load.

How is it announced to a screen reader?

Each row is a list item with the team as its heading. The bar is a progress bar named with the team, the amount booked, the quota and the share. The ratio keeps its digits left to right in right-to-left layouts.

How does it fit on a phone?

The ratio stays at display size and the share and the gap stay beside it. Nothing scrolls sideways at 320 pixels.

All 122 stats blocks