Shadcn.io is not affiliated with official shadcn/ui
Stats Okr Target Cards
An OKR target stats card grid for React and Next.js with three objective tiles, nested key-result progress bars, threshold-aware bar colors, and an overall completion percentage per objective built with shadcn/ui and Tailwind CSS
Track quarterly objectives and their key results with this OKR target cards grid for React and Next.js. Features a three-column grid of objective tiles, each with an eyebrow objective label, a large current/target completion percentage, nested key-result progress bars with threshold-aware emerald, amber, and red fills, role=progressbar with aria-valuenow on each bar, and a motion/react staggered entrance. Built with TypeScript, motion/react parent entrance with useReducedMotion, semantic dl/dt/dd structure where relevant, Lucide React icons, and Tailwind CSS. Perfect for quarterly OKR dashboards, team goal tracking boards, leadership review pages, and project health summaries.
Related Components
React Stats Block Goal Target Tile Grid
Goal target tile grid
React Stats Block Goal Target With Status
Goal target with status
React Stats Block Goal Ring Tiles
Goal ring tile grid
React Stats Block Threshold Target Cards
Threshold target cards
React Stats Block Progress Grouped Sections
Grouped progress sections
React Stats Block Progress Bar List
Progress bar list card
FAQ
Was this page helpful?
Sign in to leave feedback.
Metric Card Tabbed
A tabbed metric stats card for React and Next.js with four switchable metrics, inline tab navigation with border-b-2 active indicator, NumberFlow animated value transitions, per-metric sparkline, and semantic delta indicators built with shadcn/ui and Tailwind CSS
Pareto Chart Card
A Pareto chart stats card for React and Next.js with Recharts ComposedChart combining descending-sorted bars and a cumulative percentage line, a ReferenceLine at the 80% threshold, NumberFlow animated top-contributor callout, and dual Y-axes built with shadcn/ui and Tailwind CSS