Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Ratio Tile Grid Stats Block for React

Four goal tiles for a publishing house, each a ratio like 11 of 16, a progress bar and a pace tick that marks where the plan says the goal should stand today, with how many days ahead or behind it is.

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 goal tile grid for React with Base UI. A compact header counts the goals that are on pace or ahead ("2 of 4 goals are on pace or ahead"), with the day of the quarter at its end. Under it, four tiles for a publishing house's quarterly goals (titles published, copies sold, rights deals signed, reviews in print) sit a little apart, each in a frame of hairlines that run past its corners. A tile shows the ratio ("11 / 16"), a bar that fills to the share reached, and a short tick across the bar at the share the plan says is due today. Under the bar, the gap in words: "9 days ahead of plan", "On plan today" or "6 days behind plan". Each goal has its own plan, because releases bunch up at the end of a quarter and a launch sells early, so the ticks sit in different places. Every share, tick position and gap is computed from one typed list of goals and the day of the quarter. Four tiles in a row from lg, two by two below it. It's built from Progress, SlidingNumber and Guides, with the bar in your theme's foreground colour.

FAQ

How do I change the goals and the quarter?

Edit QUARTER (the day it is and how many days it has) and GOALS at the top of the file. A goal is a label, a target, the value reached so far and a shape. The share, the bar, the tick, the "days ahead" figure, the header's count and the quarter line are all computed from these, so nothing else needs touching. Set day from the real date when you wire the block to your data.

What does the tick mean, and how is it placed?

It marks the share of the goal that should be done by today. With a shape of 1 the plan is a straight line, so on day 58 of 91 the tick sits at 64%. A shape above 1 means the work comes late (releases), below 1 early (a launch): the due share is the share of the quarter gone, raised to the shape. The days ahead or behind are the days between today and the day at which the plan would have reached the value you actually have. The tick is positioned with a logical inset, so it keeps its place in a right-to-left page, where the bar fills from the other side.

Why are ahead and behind not green and red?

Whether behind is bad depends on the goal and the day. The block says it in words and with an arrow in the text colour, and keeps the bar in your theme's foreground tone, so it stays correct in every theme preset and readable without colour. If one goal needs an alarm, add a status icon to its tile rather than tinting the bar.

Is the block accessible?

Yes. Each tile is a list item with a heading for its goal. The bar is a progress bar named with the goal, the two numbers and the percentage ("Titles published: 11 of 16, 69%"). The tick is decorative and hidden from assistive technology, because the pace line says the same thing in text. Numbers sit in bdi elements so a right-to-left page doesn't reorder "11 / 16".

How does it fit on a phone?

The four tiles sit two by two, with lines running past their corners and a gap between them. The goal's name and the pace line each reserve two lines on a phone, so tiles in the same row stay level when one wraps. Nothing scrolls sideways at 320 pixels.

What moves?

The header and the tiles fade up once on load, and each ratio's digits roll up the first time the tile scrolls into view. With reduced motion everything simply appears. The bars are static: they show where the goals stand, not a progress.

  • Pro

    Goal Target Tile Grid Stats

    Goals and progress

    Four regional goal tiles for a sales team, each a count of targets met and a bar of five segments, solid for met, outlined for the next, with a hint row that names the next market and its value.

  • Pro

    Target Ratio Progress Stats

    Goals and progress

    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.

  • Pro

    Delta Pill KPI Tiles Stats

    KPI bands and tiles

    Four raised KPI tiles for a checkout analytics tool, each with its change as a pill: filled for a rise, outlined for a fall and muted for none, with an arrow or a dash and a sign.

  • Pro

    Quota Tile Grid Stats

    Goals and progress

    Six plan-quota tiles (seats, API calls, storage, projects, bandwidth, builds) with used against limit, a bar, what is left and a reset hint in days; a tile at 90% or more gets a solid bar and an Upgrade link badge.

  • Pro

    OKR Target Cards Stats

    Goals and progress

    Three objective cards for an OKR tool, each with a large completion percent that is the mean of its three key results, nested key-result bars with current and target, and a line naming the key result furthest from its goal.

  • Pro

    Connected KPI Bar Stats

    KPI bands and tiles

    Four headline figures for a subscription analytics tool in cells that share their hairlines from rail to rail, each with its change on the month before and a tiny sparkline of the last twelve months.

All 122 stats blocks