Family Data - Copy this React, Tailwind Component to your project

With example data like that const exampleData: Node[] = [ { id: '1', gender: Gender.male, parents: [], children: [ { id: '2', type: RelType.blood }, { id: '3', type: RelType.blood }, ], siblings: [], spouses: [{ id: '4', type: RelType.married }], placeholder: false, }, { id: '2', gender: Gender.male, parents: [ { id: '1', type: RelType.blood }, { id: '4', type: RelType.blood }, ], children: [], siblings: [{ id: '3', type: RelType.half }], spouses: [], placeholder: false, }, { id: '3', gender: Gender.female, parents: [ { id: '1', type: RelType.blood }, { id: '4', type: RelType.blood }, ], children: [], siblings: [{ id: '2', type: RelType.half }], spouses: [], placeholder: false, }, { id: '4', gender: Gender.female, parents: [], children: [ { id: '2', type: RelType.blood }, { id: '3', type: RelType.blood }, ], siblings: [], spouses: [{ id: '1', type: RelType.married }], placeholder: false, }, ]; Design family tree