Bar list cardPro
Ranked horizontal bar list of top pages or referrers with tinted fills that grow in, sort toggle, period tabs and show-more expansion.
About Bar List Card
Ranked horizontal bar list of top pages or referrers with tinted fills that grow in, sort toggle, period tabs and show-more expansion.
Bar List Card is a animated component for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 110 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- bar list
- ranking
- referrers
- horizontal
- analytics
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add bar-list-cardDependencies installed automatically: lucide-react, motion.
Uses: motion-presets, number-ticker, reveal, use-reduced-motion, utils.
Usage
import BarListCard from "@/components/chocolate/bar-list-card"
export default function Page() {
return <BarListCard />
}