Activity Graph

A keyboard-accessible calendar heatmap with normalized intensity levels and an interruptible shared focus surface.

Library

Sona UI

Framework

React

Type

ui

License

MIT

Dependencies

@base-ui/react, motion

Install

npx shadcn@latest add @sona-ui/activity-graph

Files

• src/registry/sonaui/activity-graph/activity-graph.tsx
• src/registry/sonaui/sona-utils/sona-utils.ts
• src/lib/sona-utils.ts

Source

https://github.com/Dinil-Thilakarathne/sona-ui

Categories

• Chart Components
• React Chart Components
• Tailwind CSS Chart Components
• Animated Chart Components
• Contribution Graph Components
• Tailwind CSS Contribution Graph Components
• Animated Contribution Graph Components
• Data Display Components
• React Data Display Components
• Tailwind CSS Data Display Components
• Animated Data Display Components
• Heatmap Chart Components

More from Sona UI

• Github Star History
• Accordion
• Animated Checkbox
• Animated Dialog
• Animated Dropdown
• Animated Segmented Control
• Animated Switch
• Animated Tabs
• Assignment Cluster
• Avatar Showcase
• BubbleUpButton
• Button