Org Chart
BS
Beste SözenDesign lead
Mini org-chart card with a manager node branching down into three direct-report avatars.
Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Card24 } from "@/components/beste/component/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"}]}
/>The import and the props worth knowing about, in one place.
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"
}
]}
/>Card with a label, headline value, and a row of vertical bars scaled to the data.
Directory row with an avatar carrying a presence dot, name, title, department, and a message button.
Designing the tooling that ships millions of components every week.
User profile card with a gradient avatar, role, location, a short bio, and a trailing social icon button.
