Getting started

Theming

Components use your shadcn theme. They install no global styles of their own.

Theme tokens

Every item is styled with Tailwind utilities on shadcn's semantic tokens, the CSS variables shadcn init writes to your stylesheet. Change a token and every component follows it.

Tokens	Used for
`background, foreground`	Surfaces and text, including viewer overlays
`muted, muted-foreground`	Secondary text, labels and hints
`primary, primary-foreground`	Selected regions, points and pairs
`accent, accent-foreground`	Hovered and selected options
`destructive`	Out-of-range values and errors
`border, ring`	Outlines and focus rings

:root {
  --primary: oklch(0.55 0.15 250);
  /* The ECG grid, red by default. */
  --ecg-grid: oklch(0.6 0.2 25);
}

.dark {
  --primary: oklch(0.7 0.13 250);
}

Dark mode

Components have no dark mode of their own: they follow the .dark values of your tokens, however you toggle them, for example with next-themes as shadcn recommends. On this site, press D or use the header button to switch.

Anatomy colours

Structure colours are data, not theme: each organ lists its structures with a color, which the viewer, the anatomy tree swatches and the blocks share. Edit them in the installed file.

// components/heart.tsx, as installed
structures: [
  { id: "right-atrium", label: "Right atrium", group: "Heart walls", color: "#a96d70" },
]

Per component

Every component takes className for its root, merged with cn, so sizing and spacing stay at the call site. For anything deeper, change the installed source; that is what it is there for.