Back to components
Rank Bar List React component

What is this?

A white ranked list of five rows: a rank number, a name, a count, and a thin bar under each. When the card comes into view, the bars grow to their relative widths from the top row down, and the counts fade in with them. Swap the title, column name, and items, then drop it into a top-pages report, a leaderboard, or an analytics feature grid.

Component

Rank Bar List

A white ranked list of five rows: a rank number, a name, a count, and a thin bar under each. When the card comes into view, the bars grow to their relative widths from the top row down, and the counts fade in with them. Swap the title, column name, and items, then drop it into a top-pages report, a leaderboard, or an analytics feature grid.

Checking access…
Live Preview

Verified Technical Spec

Animation
CSS / Tailwind
Reduced motion
Verified
Keyboard focus
Not detected in source
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Finished React · TypeScript · Tailwind CSS UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS

Version 1.0.0