# C treemap 3

> Disk usage — click a cell to select it

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/c-treemap-3).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/c-treemap-3
- Screenshot: https://shadcn.exchange/shot/cnippet/c-treemap-3/light.png
- Registry item: https://ui.cnippet.dev/r/c-treemap-3.json
- Categories: treemap
- Listed: 2026-10-27, source last changed 2026-10-27

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet/c-treemap-3.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/treemap`, `@cnippet/chart-card`

## Files

### `registry/default/chart-variants/c-treemap-3.tsx`

```tsx
"use client";

import { useState } from "react";
import { ChartCard } from "@/registry/default/charts/chart-card";
import { Treemap } from "@/registry/default/charts/treemap";

const gb = (value: number) => `${value} GB`;

const data = [
  {
    children: [
      { name: "Raw footage", value: 182 },
      { name: "Exports", value: 64 },
    ],
    name: "Video",
  },
  {
    children: [
      { name: "RAW", value: 88 },
      { name: "JPEG", value: 31 },
    ],
    name: "Photos",
  },
  {
    children: [
      { name: "node_modules", value: 42 },
      { name: "Docker", value: 58 },
    ],
    name: "Dev",
  },
  { children: [{ name: "Mail & docs", value: 19 }], name: "Documents" },
];

export default function DiskUsage() {
  const [selected, setSelected] = useState("Click a folder");

  return (
    <ChartCard
      className="max-w-2xl"
      description="Disk usage by folder on a 512 GB drive"
      footer={selected}
      title="Disk usage"
      value="484 GB used"
    >
      <Treemap
        className="h-48"
        data={data}
        onValueClick={(item) =>
          setSelected(`${item.group} / ${item.name}: ${gb(item.value)}`)
        }
        valueFormatter={gb}
      />
    </ChartCard>
  );
}
```