# antuikit / TanStack Networks

> TanStack Charts' SVG chart with its tooltip, painted with the theme's chart colors, grid and axes, with labels sized from the theme.

Docs: https://antuikit.com/docs/components/tanstack-networks

## Install

npx antuikit@latest init
npx antuikit@latest add tanstack-chart

## Import

import { Chart, chartColors } from "@/components/ui/tanstack-chart";

## Demos

- [Tidy tree](https://ui.antuikit.com/embed/tanstack-networks/tree.md): Pass `treeLayout` dotted name paths to get node and link positions, then draw them with `link`, `dot` and `text` marks.
- [Treemap](https://ui.antuikit.com/embed/tanstack-networks/treemap.md): Use the `treemap` mark to size each class by its `value` as nested rectangles, colored by package and labeled inside each cell.
- [Sunburst](https://ui.antuikit.com/embed/tanstack-networks/sunburst.md): Put a `sunburst` mark inside `polar` to draw the same hierarchy as rings, with each package and its classes as arcs.
- [Drillable sunburst](https://ui.antuikit.com/embed/tanstack-networks/drillable-sunburst.md): Change `rootId` from `onSelect` to open a package on click, with a `motion()` renderer animating the rings and a center button to go back.
- [Force-directed network](https://ui.antuikit.com/embed/tanstack-networks/force.md): Run `forceLayout` over nodes and links to place characters by who shares scenes, then color each one by its `group`.
- [Sankey](https://ui.antuikit.com/embed/tanstack-networks/sankey.md): Give `sankeyDiagram` nodes and weighted links to draw flows whose width follows their value, here orders splitting between two warehouses and merging into deliveries.
- [Income statement](https://ui.antuikit.com/embed/tanstack-networks/income-sankey.md): Color each `sankeyDiagram` flow by profit or cost and label every node with its amount, tracing revenue down to net profit.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/tanstack-chart`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.