What it looks like
White cards with rounded corners, each with initials in a colored circle, the name in bold, the role below and a side stripe in the team color, linked by right-angle lines with soft corners. Anyone with a team shows a badge with their number of direct reports; clicking it makes the cards slide out from under the manager and settle below, and collapsing sends them back. Large groups at the bottom are stacked to save width. Searching for someone lights up, in the accent color, the line that connects that person to the top.
You may be looking for this if you asked for something like
- a company org chart where departments open and close
- show our department structure with roles and teams on the site
- a tree of people with names and roles that I can navigate
- search for an employee and see who they report to
- a polished org chart for a client proposal
- the project team hierarchy as cards connected by lines
- an accessible org chart that works with the keyboard
Also known as
- org chart
- organizational chart
- organization tree
- hierarchy tree
- reporting structure
- tree layout
When to use
- Institutional portals that present departments, boards and teams
- Sales proposals that show the structure of the project team
- Intranets and HR systems where people look up colleagues and managers
- Governance reports with the chain of responsibility for each area
When to avoid
- People with more than one manager, since each card has a single parent in the tree
- Relationship networks without hierarchy, which read more clearly as a graph
- Pages that need photos of people, since the cards show initials
How to ask your AI
Build an interactive org chart for our institutional portal: automatic tree layout with no overlap, branches that open and close with animation, search by name or role that highlights the path to the person, zoom and pan, colors by team and arrow key navigation with screen reader support.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Org Chart
How do I pass my team data to Org Chart?
Through the data prop, as a tree of people: each one has an id, name, role, team and a list of direct reports. Org Chart gives each team a color, opens the levels set in initialDepth and emits select and toggle; focusPerson and highlightPath center someone and show the path from your own code.
Does Org Chart work with the keyboard and screen readers?
Yes. Org Chart follows the accessible tree pattern, with level, position and group size for every card. Down arrow opens and enters a team, up arrow returns to the manager, left and right move across peers on the same level, Enter collapses or expands, and typing letters jumps to a name.
Does Org Chart work on phones?
Yes. On phones, one finger drags the chart, two fingers pinch to zoom and tapping a badge opens or closes a team. On narrow screens Org Chart moves the search below the title and hides the button labels, and the stacked cards help everything fit the width.
