Country Sessions Card
What is this?
A white card of five country rows: a two-letter code chip, a name, a session count, and a soft bar behind each row. When the card comes into view, the bars grow from the left starting with the top row, and the counts fade in with them. The header shows the total. Swap the title and items, then drop it into a traffic report, a geo breakdown, or an analytics feature grid.
Country Sessions Card
A white card of five country rows: a two-letter code chip, a name, a session count, and a soft bar behind each row. When the card comes into view, the bars grow from the left starting with the top row, and the counts fade in with them. The header shows the total. Swap the title and items, then drop it into a traffic report, a geo breakdown, or an analytics feature grid.
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