DesignLayer
Stacked Share Bar
Back to components
What is this?
A white card with a title, one horizontal 100% stacked bar, and a four-row legend with percents. When the card comes into view, the bar fills from left to right, one segment after another, and each legend row fades in with its segment. Swap the title and segments, then drop it into a traffic report, a channel breakdown, or an analytics feature grid.
Component
Stacked Share Bar
A white card with a title, one horizontal 100% stacked bar, and a four-row legend with percents. When the card comes into view, the bar fills from left to right, one segment after another, and each legend row fades in with its segment. Swap the title and segments, then drop it into a traffic report, a channel breakdown, or an analytics feature grid.
Checking access…
Live PreviewVerified 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