Chart Card 22 - Contribution heatmap calendarPro

About Chart Card 22

GitHub-style contribution calendar of daily activity in five intensity steps with month labels, a less-to-more legend and a hover readout.

Chart Card 22 is a chart card block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 152 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.

• chart
• heatmap
• calendar
• contributions
• activity

Installation

1. Set up your project with npx chocolateui init and npx chocolateui login (see the installation guide).
2. Run the Chocolate UI CLI:

npx chocolateui add chart-card-22

Uses: card, reveal, utils.

Usage

import ChartCard22 from "@/components/blocks/chart-card-22"

export default function Page() {
  return <ChartCard22 />
}

FAQ