dental-tooth-chart

React FDI (International Dental Federation) tooth chart components for dental software. Pick a tooth by its standard two-digit FDI number (11–18, 21–28, 31–38, 41–48) inside a clean upper/lower arch.

Two chart styles are included:

| Component | Style | | ---------------------- | --------------------------------------------------------------------- | | <ToothChart /> | Anatomical SVG chart — detailed tooth shapes in a compressed arch. | | <AnimatedToothChart /> | Circular chart — teeth pop toward the arch center on hover so it is easy to click the exact tooth. |

Both are fully controlled components: you manage the selection state and pass it in, and they call onToggle when a tooth is clicked.

Installation

npm install dental-tooth-chart framer-motion

react and react-dom are peer dependencies (React >= 17). framer-motion is required (>= 10) but is not bundled — install it in your project.

Usage

Both components share the same props:

type Props = {
  /** Array of selected FDI tooth numbers, e.g. [16, 21] */
  selected: number[];
  /** Called with the toggled tooth number when a tooth is clicked */
  onToggle: (toothNumber: number) => void;
};

ToothChart (anatomical)

import { useState } from "react";
import { ToothChart } from "dental-tooth-chart";

function App() {
  const [selected, setSelected] = useState<number[]>([]);

  return (
    <ToothChart
      selected={selected}
      onToggle={(number) =>
        setSelected((prev) =>
          prev.includes(number) ? prev.filter((t) => t !== number) : [...prev, number],
        )
      }
    />
  );
}

AnimatedToothChart (circular / hover-pop)

import { useState } from "react";
import { AnimatedToothChart } from "dental-tooth-chart";

function App() {
  const [selected, setSelected] = useState<number[]>([]);

  return (
    <AnimatedToothChart
      selected={selected}
      onToggle={(number) =>
        setSelected((prev) =>
          prev.includes(number) ? prev.filter((t) => t !== number) : [...prev, number],
        )
      }
    />
  );
}

Tooth numbering (FDI)

| Quadrant | Range | Location | | -------- | ----- | ----------------------------------------- | | Q1 | 11–18 | Upper right (patient's right, screen left) | | Q2 | 21–28 | Upper left (patient's left, screen right) | | Q3 | 31–38 | Lower left (patient's left, screen right) | | Q4 | 41–48 | Lower right (patient's right, screen left) |

The charts render in the dentist's view: Q1/Q4 on the left, Q2/Q3 on the right, with the molars (18/28/38/48) at the outer corners of the arches.

Features

• Controlled component — you own the selection state.
• No Tailwind required — all styling is inline styles; drop into any project.
• Framer Motion hover/select animations (spring physics).
• No overlapping teeth — even the corner molars are clickable and hoverable.
• Hovering a tooth in AnimatedToothChart pops it toward the arch center while the click target stays in place.
• TypeScript type definitions included.

Styling / sizing

• ToothChart scales to its container width (width: 100%, max-width: 32rem).
• AnimatedToothChart renders at its natural size (307px wide chart) and centers itself.

Known limitations

• SVG gradient IDs inside AnimatedToothChart are static. If you render more than one instance on the same page, the gradient fills may render incorrectly. Use it once per page, or report the issue if you need multi-instance support.

Development

npm install
npm run build   # emits ES modules + .d.ts into dist/

License

MIT © 2026