Radar chart

A spider chart whose shape grows out from the centre before each point pops in.

Radar chart preview
Make one like it

npm install motion clsx tailwind-merge or npx programmable-cli add radar-chart

MP4 and GIF exports are for sites that are not on React. Each counts as this month’s download of the component.

What it’s for

  • Results and metrics sections on a homepage
  • Case studies and launch posts that need a number to land
  • Reports and investor updates on the web

How to use it

  1. Download the file. RadarChart.tsx is one self-contained React component. Pick a brand colour above and the file comes in it, where the component has a main colour to replace. Sites not on React can take it as an MP4 or GIF.
  2. Install what it uses. npm install motion clsx tailwind-merge, with Tailwind CSS set up in your project.
  3. Drop it in. import { RadarChart } from "./RadarChart"; then render <RadarChart /> where you want it.

React + Tailwind CSS. Use downloads in your own sites and products; please don’t resell them as a component library. Repeat downloads of the same component in a month don’t count.