# Esteira Quadro de colunas com cartões que você arrasta entre etapas, com limite por coluna, prazos e prioridades. > Esteira é um componente exclusivo do THM Componentes que coloca um quadro de tarefas estilo Trello dentro do seu sistema: os cartões se arrastam entre colunas com animação suave, cada coluna pode ter limite WIP com alerta, e os cartões mostram etiquetas, responsável, prazo e prioridade. Funciona com mouse, toque longo e teclado, com anúncios para leitores de tela. - 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/esteira/ ## Como ele é Colunas lado a lado, cada uma com uma bolinha colorida, o título, a contagem de cartões e o limite, no formato 3/4. Os cartões são brancos, com etiquetas coloridas no alto, o título e uma linha com prazo, barrinhas de prioridade e as iniciais do responsável; prazos vencidos ganham um alerta. Ao pegar um cartão, ele sai levemente inclinado e com sombra, e os outros deslizam para abrir o espaço onde ele vai cair. Uma coluna que passa do limite ganha um aviso. No pé de cada coluna, um campo cria cartões na hora. ## Você pode estar procurando isto se pediu algo assim - “um quadro tipo Trello para arrastar tarefas entre colunas” - “colunas a fazer, fazendo e feito com cartões que eu movo” - “quadro de chamados para o atendimento com prioridade e prazo” - “limitar quantos cartões cabem em cada etapa do processo” - “kanban que funcione no celular arrastando com o dedo” - “gestão de sprint dentro do meu sistema com etiquetas e responsáveis” - “mover cartões pelo teclado para o quadro ficar acessível” ## Também chamado de quadro kanban, kanban board, quadro de tarefas, task board, drag and drop board, arrastar e soltar, limite WIP ## Quando usar - Gestão de sprints e de demandas de produto dentro do seu sistema - Esteiras de atendimento e triagem de chamados com prioridade e prazo - Fluxos de aprovação em ERPs e sistemas de governo, com uma coluna por etapa - Funis de vendas ou de recrutamento em que cada cartão avança por fases ## Quando evitar - Projetos que dependem de datas e de dependências entre tarefas, que pedem um gráfico de Gantt - Colunas com centenas de cartões, já que todos ficam na página ao mesmo tempo ## Como pedir para a sua IA ```text Crie um quadro kanban para a triagem de chamados do meu sistema: arrastar e soltar animado entre colunas, toque longo no celular, limite WIP com alerta, cartões com etiqueta, responsável, prazo e prioridade, criação rápida de cartão e arrasto completo pelo teclado com anúncios para 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 Esteira ### Esteira funciona no celular? Funciona. No celular, Esteira só começa a arrastar depois de um toque longo de 280 milissegundos, com uma vibração curta onde o aparelho permite, para não atrapalhar a rolagem. Em telas estreitas as colunas viram um carrossel com encaixe, e o quadro rola sozinho perto das bordas enquanto você arrasta. ### Como funciona o limite WIP em Esteira? Cada coluna de Esteira pode ter um wipLimit. Por padrão, passar do limite só alerta: a contagem fica em destaque, aparece um aviso e o evento wip-exceeded é disparado. Com strictWip ligado, Esteira recusa soltar o cartão numa coluna que já está no limite. ### Dá para mover cartões de Esteira pelo teclado? Dá. Em Esteira, Espaço pega o cartão em foco, as setas o movem entre posições e colunas, Espaço ou Enter soltam e Esc cancela. Cada passo é anunciado para leitores de tela, inclusive o aviso quando o destino vai passar do limite WIP. ## Componentes relacionados - [Canteiro](https://vibecode.thmtecnologia.com/componentes/canteiro/): Cronograma de barras que você arrasta para mudar datas, com setas entre as tarefas e o caminho crítico em vermelho. - [Expediente](https://vibecode.thmtecnologia.com/componentes/expediente/): Agenda semanal de consultas em que você cria, move e estica horários arrastando, com uma cor por profissional. - [Balancete](https://vibecode.thmtecnologia.com/componentes/balancete/): Tabela que rola milhares de linhas sem travar, com filtros, ordenação, edição e copiar e colar com planilhas. - [Baralho](https://vibecode.thmtecnologia.com/componentes/baralho/): Avisos que surgem no canto da tela, empilhados como cartas, e somem sozinhos ou com um arraste para o lado. - [Comitiva](https://vibecode.thmtecnologia.com/componentes/comitiva/): Setinhas coloridas com o nome de cada colega andando pelo documento, com trechos selecionados e recados no cursor. --- 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.