# Linhagem

Organograma que se monta sozinho em árvore, com equipes que abrem e fecham e busca que mostra o caminho até a pessoa.

> Linhagem é um componente exclusivo do THM Componentes que monta um organograma interativo a partir de uma árvore de pessoas: o layout se organiza sozinho, sem cartões sobrepostos, os ramos recolhem e expandem com animação, e a busca por nome, cargo ou equipe abre e destaca o caminho até a pessoa. Tem zoom, arrastar e navegação por teclado.

- Categoria: Aplicações e produtividade
- Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo
- Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção
- Tecnologia: Vue 3, TypeScript
- Interação: Mouse, Toque, Teclado
- URL: https://vibecode.thmtecnologia.com/componentes/linhagem/

## Como ele é

Cartões brancos de cantos arredondados, cada um com as iniciais num círculo colorido, o nome em negrito, o cargo abaixo e um filete lateral na cor da equipe, ligados por linhas em ângulo reto com cantos suaves. Quem tem equipe mostra um selo com o número de subordinados diretos; clicar nele faz os cartões saírem de dentro do chefe e se encaixarem embaixo, e recolher os faz voltar. Grupos grandes da base aparecem empilhados para economizar largura. Buscar alguém acende, na cor de destaque, a linha que liga essa pessoa ao topo.

## Você pode estar procurando isto se pediu algo assim

- “organograma da empresa que abre e fecha os setores”
- “mostrar a estrutura da secretaria com cargos e equipes no site”
- “árvore de pessoas com nome e cargo que dê para navegar”
- “buscar um funcionário e ver a quem ele responde”
- “organograma bonito para a proposta comercial do cliente”
- “hierarquia da equipe do projeto em cartões ligados por linhas”
- “organograma acessível que funcione com o teclado”

## Também chamado de

organograma, org chart, organizational chart, árvore hierárquica, hierarchy tree, estrutura organizacional, tree layout

## Quando usar

- Portais institucionais que apresentam secretarias, diretorias e equipes
- Propostas comerciais que mostram a estrutura da equipe do projeto
- Intranets e sistemas de RH em que as pessoas procuram colegas e gestores
- Relatórios de governança com a cadeia de responsáveis por área

## Quando evitar

- Pessoas com mais de um gestor, já que cada cartão tem um só chefe na árvore
- Redes de relacionamento sem hierarquia, que se leem com mais clareza num grafo
- Páginas que precisam de fotos das pessoas, já que o cartão mostra iniciais

## Como pedir para a sua IA

```text
Crie um organograma interativo para o portal institucional: layout automático em árvore sem sobreposição, ramos que abrem e fecham com animação, busca por nome ou cargo que destaca o caminho até a pessoa, zoom e pan, cores por equipe e navegação por setas com leitor de tela.
```

Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.

## Perguntas sobre Linhagem

### Como passo os dados da minha equipe para Linhagem?

Pela prop data, com uma árvore de pessoas: cada uma tem id, nome, cargo, equipe e a lista de subordinados. Linhagem dá uma cor a cada equipe, abre os níveis definidos em initialDepth e emite select e toggle; focusPerson e highlightPath centralizam alguém e mostram o caminho a partir do seu código.

### Linhagem funciona com teclado e leitor de tela?

Sim. Linhagem segue o padrão de árvore acessível, com nível, posição e tamanho de cada grupo. Seta para baixo abre e entra na equipe, seta para cima volta ao chefe, as laterais passam pelos colegas do mesmo nível, Enter recolhe ou expande e digitar letras pula para o nome.

### Linhagem funciona no celular?

Funciona. No celular, um dedo arrasta o organograma, dois dedos dão zoom em pinça e tocar no selo abre ou fecha a equipe. Em telas estreitas, Linhagem coloca a busca abaixo do título e esconde os rótulos dos botões, e as pilhas de cartões ajudam a caber na largura.

## Componentes relacionados

- [Ipê](https://vibecode.thmtecnologia.com/componentes/ipe/): Ideia central no meio e ramos coloridos em curvas que você cria com Tab e Enter, arrasta e recolhe.
- [Constelação](https://vibecode.thmtecnologia.com/componentes/constelacao/): Milhares de pontos coloridos ligados por fios que se organizam sozinhos em grupos, com busca e zoom até cada nó.
- [Gaveteiro](https://vibecode.thmtecnologia.com/componentes/gaveteiro/): Lista de pastas e arquivos que abre e fecha com um clique, como o explorador de um editor de código.
- [Azulejo](https://vibecode.thmtecnologia.com/componentes/azulejo/): Fotos recortadas em losango que se encaixam como um mosaico e viram quadrado inteiro ao passar o mouse.
- [Engenhoca](https://vibecode.thmtecnologia.com/componentes/engenhoca/): Quadro infinito em que você liga caixas por fios para montar automações e vê o fluxo rodar com pulsos de luz.

---
THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.