# Linhagem An org chart that lays itself out as a tree, with teams that open and close and search that traces the path to anyone. > Linhagem is an exclusive THM Componentes component that builds an interactive org chart from a tree of people: the layout arranges itself with no overlapping cards, branches collapse and expand with animation, and search by name, role or team opens and highlights the path to that person. It has zoom, panning and full keyboard navigation. - Category: Apps and productivity - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/linhagem/ ## 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 ```text 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 Linhagem ### How do I pass my team data to Linhagem? Through the data prop, as a tree of people: each one has an id, name, role, team and a list of direct reports. Linhagem 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 Linhagem work with the keyboard and screen readers? Yes. Linhagem 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 Linhagem 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 Linhagem moves the search below the title and hides the button labels, and the stacked cards help everything fit the width. ## Related components - [Ipê](https://vibecode.thmtecnologia.com/en/components/ipe/): A central idea in the middle and colored curved branches you create with Tab and Enter, drag and collapse. - [Constelação](https://vibecode.thmtecnologia.com/en/components/constelacao/): Thousands of colored dots linked by threads that arrange themselves into clusters, with search and zoom to any node. - [Gaveteiro](https://vibecode.thmtecnologia.com/en/components/gaveteiro/): A list of folders and files that opens and closes with a click, like the explorer in a code editor. - [Azulejo](https://vibecode.thmtecnologia.com/en/components/azulejo/): Photos cut into diamonds that interlock like a mosaic and open into full squares on hover. - [Engenhoca](https://vibecode.thmtecnologia.com/en/components/engenhoca/): An infinite board where you wire boxes together to build automations and watch the flow run with pulses of light. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).