# Gaveteiro Lista de pastas e arquivos que abre e fecha com um clique, como o explorador de um editor de código. > Gaveteiro é um componente do THM Componentes que mostra a estrutura de pastas e arquivos de um projeto, como o painel lateral de um editor de código. As pastas abrem e fecham com um clique, os arquivos podem ser selecionados e linhas-guia marcam cada nível. É leve, segue o tema do projeto e serve para documentação e tutoriais. - Categoria: Aplicações e produtividade - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/gaveteiro/ ## Como ele é Lembra a barra lateral de um editor de código. Cada linha tem um ícone pequeno e um nome em texto miúdo: pasta fechada, pasta aberta ou folha de arquivo. Ao clicar numa pasta, o conteúdo aparece logo abaixo, recuado, com uma linha vertical fina ligando os itens do mesmo nível. O arquivo selecionado ganha um fundo suave, e itens bloqueados ficam esmaecidos, com cursor de proibido. As cores vêm das variáveis de tema, então acompanham o modo claro e o escuro do projeto. Árvores longas rolam dentro da própria caixa, e há a opção de direção da direita para a esquerda. ## Você pode estar procurando isto se pediu algo assim - “mostrar a estrutura de pastas do projeto na documentação” - “árvore de arquivos igual à do editor de código” - “lista de pastas que abre e fecha para um tutorial de programação” - “explicar onde fica cada arquivo do meu template” - “menu lateral com pastas e arquivos clicáveis” - “mostrar diretórios num artigo técnico sem usar print da tela” ## Também chamado de árvore de arquivos, file tree, tree view, explorador de arquivos, file explorer, árvore de diretórios, folder tree ## Quando usar - Documentação técnica que explica a estrutura de um projeto - Tutorial ou curso de programação com passo a passo por arquivo - Página de template ou kit à venda, mostrando o que vem dentro - Painel interno que lista documentos em pastas ## Quando evitar - Árvores enormes, com milhares de itens abertos: a lista não é virtualizada - Quando a navegação só pelo teclado é obrigatória, sem antes transformar as pastas em botões ## Como pedir para a sua IA ```text Crie uma árvore de pastas e arquivos para a documentação do projeto, com pastas que abrem e fecham, ícones, linhas-guia e destaque do arquivo selecionado. Use as cores e a tipografia do meu tema, garanta navegação completa pelo teclado e bom funcionamento no celular. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Gaveteiro ### Gaveteiro funciona com teclado? Em parte. Em Gaveteiro, os arquivos são botões nativos, então recebem foco e são selecionados com Enter ou Espaço. As pastas, porém, abrem só com clique ou toque, porque a linha da pasta não é um botão no código original. Se o teclado for essencial, peça à IA que troque essa linha por um botão com aria-expanded. ### Como monto a estrutura de Gaveteiro? Você monta Gaveteiro direto no template, aninhando componentes Folder e File, cada um com id e nome, dentro de um Tree. As props initialExpandedItems e initialSelectedId definem o que começa aberto e selecionado, e a lista elements serve para abrir o caminho até o item escolhido. Os ícones também podem ser trocados por props. ### Gaveteiro segue o modo escuro? Sim, desde que o projeto tenha as variáveis de tema. Gaveteiro usa as cores de fundo e de destaque do tema em vez de cores fixas, por isso acompanha o claro e o escuro. O prompt do THM Componentes orienta a IA a usar os tokens de cor e tipografia do seu projeto. ## Componentes relacionados - [Ateliê](https://vibecode.thmtecnologia.com/componentes/atelie/): Editor de código com cores por linguagem, números de linha, busca e blocos que recolhem, direto na sua página. - [Caldeira](https://vibecode.thmtecnologia.com/componentes/caldeira/): Janela de terminal escura em que a pessoa digita comandos, vê respostas coloridas e acompanha um deploy de demonstração. - [Biombo](https://vibecode.thmtecnologia.com/componentes/biombo/): Tela dividida em áreas que você aumenta, diminui ou recolhe arrastando as linhas entre elas, como num editor de código. - [Errata](https://vibecode.thmtecnologia.com/componentes/errata/): Mostra o que mudou entre duas versões de um código ou texto, em vermelho e verde, para aceitar ou rejeitar cada trecho. - [Linhagem](https://vibecode.thmtecnologia.com/componentes/linhagem/): Organograma que se monta sozinho em árvore, com equipes que abrem e fecham e busca que mostra o caminho até a pessoa. --- 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.