shadcn registry component
Family trees that know who everyone is to you.
A vertical, generation-layered tree built from shadcn cards. Pick a person and every other card tells you how they are related.
npx shadcn@latest add https://shadcn-family-tree.ryck.dev/r/family-tree.json20 people across 4 generations. Select a person to see how everyone is related to them, then use the arrow keys to move between parents, children and siblings.
Drag to pan, scroll to zoom, click a card to view the family through their eyes.
Generation-layered
Every person is placed on the row their generation belongs to, and each couple sits centred over the children hanging below them.
Relationships, calculated
Click anyone and the whole tree re-labels itself around them — second cousin twice removed, step-mother, brother-in-law, all derived from the graph.
Colour-coded lines
The four grandparent lines of whoever you are viewing as get their own hue, so the palette always answers: which side of the family is this?
Zero dependencies
The layout, the kinship calculus and the pan/zoom are all in the source you install. No graph library, no canvas runtime.