Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Goal Status Board Stats Block for React

A rail-to-rail status board for sales pace: four cells that lead with a state word and a glyph, Ahead, On pace, Behind or Missed, three figures each, and a legend row that defines the four glyphs.

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 status board for React with Base UI. A start-aligned header counts the targets missed and behind ("One target missed, one behind") with the quarter's week at its end. Under it one band, running from rail to rail, ends the block. Four cells, one for each of a sales team's segments (Enterprise, Mid-market, Small business and Partner channel), share vertical hairlines and meet at a cross on a phone. Each cell leads with its state as a word and a glyph: a solid disc for Ahead, a half disc for On pace, an outline for Behind and a crossed circle for Missed, so the state never relies on colour. Only the Missed cell also gets the destructive status dot, because its window really closed under target. Under the word, three figures: what has been won, what the plan says should be won by now and the gap, signed. A legend row at the foot of the band defines the four glyphs. The state, plan to date and gap are computed from each segment's target, window and amount won. It's built from Status and Guides.

FAQ

How do I change the segments and the week?

Edit WEEK and SEGMENTS at the top of the file: a segment has a name, a target in dollars, the value won so far and the weeks its window lasts. The plan to date is a straight line to the target (all of it once the window has closed); the state, the gap, the header's counts and the legend's order come from those.

How is each state decided?

Ahead is 5% or more over the plan to date and On pace is within 5% of it. Behind is more than 5% under. Missed is reserved for a window that has closed with less than its target, so it never appears on a segment that still has time. Change the thresholds in stateOf; the legend text in LEGEND says the same thing in words.

Why are only Missed cells coloured?

The four states are told apart by word and glyph, so the board works in a greyscale print and for readers who can't see colour. The destructive dot on Missed is the only token colour, a small flag for the one state that is final. A board with no missed segment has no colour at all.

Is it accessible?

Yes. Each cell is a list item with a heading for the segment, the state is plain text, and the figures are a description list ("Won $810K, Plan to date $738K, Gap +$71.5K"). The glyphs and the dot are decorative and hidden from assistive technology. The gap uses a true minus sign in its own direction box so a right-to-left page keeps its sign. The legend is a list with its own label.

How does it fit on a phone?

The four cells sit two by two, meeting at a cross of hairlines, and the legend becomes a stack of four short lines. The glyphs and words keep their size. Nothing scrolls sideways at 320 pixels.

What moves?

The header and the band fade up once on load. With reduced motion nothing moves.

  • 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

    Goal Ring Tiles Stats

    Goals and progress

    Four goal tiles for an OKR tool, each a thin ring with the part done drawn solid, the part today's pace will add drawn lighter after it and a tick for the target, with the projected finish in words.

  • Pro

    Status Tile Grid Stats

    KPI bands and tiles

    Six service tiles for a hosting company, each with a state word and a p95 latency, where healthy tiles are plain and only a degraded and an incident tile change, with their cause and how long they have lasted.

  • Pro

    Ratio Tile Grid Stats

    Goals and progress

    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.

  • Pro

    Threshold Target Cards Stats

    Goals and progress

    Four delivery-target tiles you can filter with a segmented control (All, Watch, At risk) that dims the others, each with a bar marked at its watch and at-risk thresholds and a state in a glyph and a word.

  • 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