# antuikit / TanStack Motion

> 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-motion

## Install

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

## Import

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

## Demos

- [Staggered entrance](https://ui.antuikit.com/embed/tanstack-motion/entrance.md): Return a `delay` from a mark's `motion` function to grow each bar from the baseline in turn, with April and the target line on their own timing.
- [Spring lines](https://ui.antuikit.com/embed/tanstack-motion/spring-line.md): Switch the chart's `motion.transition` between a spring and a tween to see how two lines settle when their values change or reverse mid-flight.
- [Keyed updates](https://ui.antuikit.com/embed/tanstack-motion/updates.md): Give each bar a `key` so reordered, added and removed periods move, enter and exit, with spring `stiffness` and `damping` you can tune.
- [Axis motion](https://ui.antuikit.com/embed/tanstack-motion/definition.md): Set `motion` on an axis, its ticks and its tick labels so the guides animate on their own timing while the bars spring to new values.
- [Focus and crosshair](https://ui.antuikit.com/embed/tanstack-motion/focus-cursor.md): Add a spring `transition` to each focus `states` entry and to the `crosshair` so hovered points, series and the cursor glide between days.
- [Geometry morph](https://ui.antuikit.com/embed/tanstack-motion/geometry-morph.md): Draw each region with `createMark` as a shape of the same point count so a spring can morph it between bars, a rose, a donut and bubbles.

## 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-*)`.