# Veredito Bloco de avaliações de clientes com nota média em estrelas, barras por nota, filtros, ordenação e formulário. > Veredito é um componente exclusivo do THM Componentes para exibir as avaliações reais dos seus clientes: nota média com estrelas fracionárias, barras de 5 a 1 que filtram por nota, ordenação, botão Útil, selo de compra verificada e formulário acessível para nova avaliação. Serve para páginas de produto e lojas virtuais. - Categoria: Comércio e conversão - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado, Rolagem - URL: https://vibecode.thmtecnologia.com/componentes/veredito/ ## Como ele é Começa com um painel branco: à esquerda, a nota média em número grande e cinco estrelas âmbar preenchidas na proporção exata, com o total e o botão Escrever avaliação; à direita, cinco barras âmbar, de 5 a 1 estrela, que crescem quando o bloco entra na tela. Clicar numa barra filtra a lista por aquela nota. Abaixo, cada avaliação mostra as iniciais num círculo, nome, selo verde de compra verificada quando houver, data relativa, estrelas, título, texto e o botão Útil com contador. Um seletor ordena a lista, e Ver mais carrega a próxima página. A demonstração usa avaliações fictícias, marcadas com um selo. ## Você pode estar procurando isto se pediu algo assim - “mostrar as avaliações dos clientes com estrelas na página do produto” - “nota média com estrelinhas e uma barra para cada nota” - “filtrar avaliações por número de estrelas” - “deixar o cliente escrever uma avaliação no site” - “seção de avaliações igual à dos marketplaces grandes” - “botão de útil nas avaliações e selo de compra verificada” - “prova social com avaliações reais para a minha loja” - “ordenar comentários pelos mais recentes ou pelas notas mais altas” ## Também chamado de avaliações de produto, estrelas de avaliação, prova social, product reviews, star rating, review section, social proof, rating summary ## Quando usar - Página de produto de loja virtual que já coleta avaliações de compradores - Landing pages que mostram a nota real de um produto ou serviço - Marketplaces e catálogos em que a distribuição de notas ajuda a decidir - Lojas que querem receber avaliações direto no site ## Quando evitar - Lojas ainda sem avaliações reais, já que os textos de exemplo não devem aparecer como se fossem de clientes - Formulário em produção sem backend, já que a avaliação nova só aparece na tela e não é salva ## Como pedir para a sua IA ```text Crie um bloco de avaliações para a página de produto que exiba as avaliações reais da minha loja: nota média com estrelas fracionárias, barras por nota que filtram a lista, ordenação, botão Útil, selo de compra verificada, formulário acessível pelo teclado e envio para a minha API. ``` 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 Veredito ### Como mostro as avaliações reais dos meus clientes em Veredito? Passe a prop reviews com as avaliações que você já coleta, cada uma com nome, nota, título, texto, data, se a compra foi verificada e o número de votos úteis. Veredito calcula média, distribuição e filtros a partir delas. Sem a prop, aparece uma lista fictícia, só para testar o layout; com dados reais, tire o selo de demonstração do cabeçalho. ### O formulário de Veredito salva a avaliação? Não sozinho. O formulário de Veredito valida a nota de 1 a 5 e um texto de pelo menos 10 caracteres, coloca a nova avaliação no topo da lista na tela e emite o evento submitReview com os dados. Salvar, moderar e publicar depois fica com o seu backend; o botão Útil também só emite um evento. ### Veredito é acessível por teclado e leitor de tela? Sim. Em Veredito, as estrelas do formulário formam um grupo de opções que se escolhe com as setas, cada barra de nota é um botão que anuncia estrelas, quantidade e porcentagem, a média tem texto alternativo e a ordenação usa um seletor nativo. Com movimento reduzido, as barras aparecem cheias, sem animar. ## Componentes relacionados - [Mostruário](https://vibecode.thmtecnologia.com/componentes/mostruario/): Foto principal com lupa que amplia o detalhe ao passar o mouse, miniaturas embaixo e tela cheia com zoom. - [Causo](https://vibecode.thmtecnologia.com/componentes/causo/): Fotos de clientes empilhadas e levemente inclinadas, com a frase do depoimento surgindo palavra por palavra ao lado. - [Pêndulo](https://vibecode.thmtecnologia.com/componentes/pendulo/): Um depoimento por vez, com a foto redonda girando em arco ao trocar e a frase deslizando para o lugar. - [Sacola](https://vibecode.thmtecnologia.com/componentes/sacola/): Carrinho que desliza pela lateral da loja, com cupom, cálculo de frete pelo CEP e barra de frete grátis. - [Pódio](https://vibecode.thmtecnologia.com/componentes/podio/): Cartões de planos lado a lado com troca entre mensal e anual, plano em destaque e comparação completa de recursos. --- 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.