Org Chart

Mini org-chart card with a manager node branching down into three direct-report avatars.

Kian Okafor
Kian OkaforVP Engineering
Andrea Kim
Andrea KimStaff eng
BS
Beste SözenDesign lead
Jules Park
Jules ParkSr. PM

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Card24 } from "@/components/beste/piece/card24";

<Card24
  manager={{
    "name": "Kian Okafor",
    "role": "VP Engineering",
    "initials": "KO",
    "image": "https://images.unsplash.com/photo-1611695434369-a8f5d76ceb7b?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjQ3fHxwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
  }}
  reports={[
    {
      "name": "Andrea Kim",
      "role": "Staff eng",
      "initials": "AK",
      "image": "https://images.unsplash.com/photo-1558507652-2d9626c4e67a?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjU5fHxwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
    },
    {
      "name": "Beste Sözen",
      "role": "Design lead",
      "initials": "BS"
    },
    {
      "name": "Jules Park",
      "role": "Sr. PM",
      "initials": "JP",
      "image": "https://images.unsplash.com/photo-1674932668403-33398b81c92f?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjYzfHxwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
    }
  ]}
/>