Syncfusion React Treemaps

If you need to visualize hierarchical data with drill-down exploration, this is Syncfusion's React TreeMap component. It renders nested rectangles where area represents data values, supporting multiple hierarchy levels and three color mapping strategies (range, equal value, and desaturation). The setup is straightforward with familiar React patterns, and you get four layout algorithms to choose from depending on your data structure. Most useful when you're working with organizational charts, file systems, or category hierarchies where users need to explore nested data. The component handles the spatial layout math so you don't have to figure out how to pack rectangles efficiently. Includes the expected features like tooltips, legends, and accessibility support out of the box.

Install to Claude Code

npx -y skills add syncfusion/react-ui-components-skills --skill syncfusion-react-treemaps --agent claude-code