Subject-centered
Start with one person and render the relatives that matter around them.
Family trees and org charts for React apps.
@memoir/tree renders subject-centered family neighborhoods from your profiles, your relationship facts, and your card component.
Built for React 19By Memoir Labs
Generation 1Grandparent
Generation 2Parent
Generation 2Parent
Generation 3Child
Bring your own cards
Use your app's data and card component instead of fighting a fixed UI.
Measured layout
Cards can be different sizes while the tree keeps relationships readable.
Drop it in. Pass your data. Ship the tree.
The package owns the measured layout, connectors, and pan surface. Your app owns the data, profile UI, permissions, and mutations.
Install
import { FamilyTree, rel } from "@memoir/tree";
const people = {
maren: { id: "maren", name: "Maren" },
june: { id: "june", name: "June" },
ellis: { id: "ellis", name: "Ellis" },
noa: { id: "noa", name: "Noa" },
sol: { id: "sol", name: "Sol" },
river: { id: "river", name: "River" },
};
const relationships = [
rel.parents("june", ["maren"]),
rel.parents("noa", ["june", "ellis"]),
rel.partner("noa", "sol", { relation: "spouse" }),
rel.children(["noa", "sol"], ["river"]),
];
export function Tree() {
return (
<FamilyTree
people={people}
relationships={relationships}
subject="noa"
/>
);
}