Tailwind CSS Heatmap Chart Components

Dev Design Library indexes 19 Tailwind CSS heatmap chart components from 10 open-source UI libraries, with the most coming from Spectrum UI, beUI, Amicro Micro Transitions, OpenSourceUI and Panel UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes. Heatmap chart components belong to the Data display group.

• Activity Dither HeatmapAmicro Micro Transitions · ReactGitHub-style activity heatmap with interactive dither dots.
• Heat CalendarbeUI · ReactCompose Grid, Tooltip and Legend, or omit children for the complete chart.
• GitHub ActivityRare UI · ReactA contribution heatmap with a footer panel that expands over the grid to rank your top repositories.
• Calendar HeatmapSpectrum UI · ReactA year of daily values as week columns — the contributions grid, with five quantised intensity steps, streak stats…
• Heatmap ChartPanel UI · React NativeContribution grid with a themed colour ramp and a readout.
• Daily Activity Calendar WidgetOpenSourceUI · React
• Github CalendarComponentry · ReactGitHub-style contribution calendar heatmap.
• Activity GraphSona UI · ReactA keyboard-accessible calendar heatmap with normalized intensity levels and an interruptible shared focus surface.
• Contribution HeatmapUI Lab · ReactA year of activity at a glance, sweeping in week by week.
• Github ActivitySpaceUI · ReactAn interactive GitHub ecosystem showcase featuring pure 52-week contribution heatmap matrix content with live fetch…
• Mono Activity HeatmapAmicro Micro Transitions · React
• Liquidity HeatmapbeUI · ReactAnimated liquidity bands across price and time, with a price trace and depth tooltips.
• Cohort RetentionSpectrum UI · ReactThe retention triangle: cohorts down, periods across, intensity by share retained, with a row and column crosshair and…
• Web Heatmap ChartPanel UI · React NativeA calendar heatmap for a year of activity such as commits, deploys or spending.
• Github ContributionOpenSourceUI · React
• Mono Rounded Heatmap ChartAmicro Micro Transitions · React
• Returns CalendarbeUI · ReactCompose Grid and Tooltip, or omit children for the complete chart.
• GitHub Profile CardSpectrum UI · ReactA GitHub profile card with account stats, a contribution graph, and social links.
• Market HeatmapSpectrum UI · ReactA squarified treemap sized by market cap and coloured on a diverging change ramp — the market map.

Libraries with Tailwind CSS heatmap chart components

• Spectrum UI
• beUI
• Amicro Micro Transitions
• OpenSourceUI
• Panel UI

Related categories

• Heatmap Chart Components
• React Heatmap Chart Components
• Animated Heatmap Chart Components
• Tailwind CSS Data Display Components
• Tailwind CSS Card Components
• Tailwind CSS Chart Components
• Tailwind CSS Table Components
• Tailwind CSS Avatar Components
• Tailwind CSS Stat Components
• Tailwind CSS List Components
• Tailwind CSS Calendar Components
• Tailwind CSS Accordion Components
• Tailwind CSS Data Table Components
• Tailwind CSS Carousel Components
• Tailwind CSS Collapsible Components
• Tailwind CSS Avatar Group Components
• Tailwind CSS Stat Card Components
• Tailwind CSS Bar Chart Components
• Tailwind CSS Tree View Components