# Veredito A customer reviews block with a star average, bars per rating, filters, sorting and a review form. > Veredito is an exclusive THM Componentes component for showing your customers' real reviews: an average with fractional stars, rating bars from 5 to 1 that filter the list, sorting, a helpful button, a verified purchase badge and an accessible form for new reviews. It suits product pages and online stores. - Category: Commerce and conversion - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard, Scroll - URL: https://vibecode.thmtecnologia.com/en/components/veredito/ ## What it looks like A white panel shows the average rating in large type next to five amber stars filled to the exact fraction, the total and a button to write a review; beside it, five amber bars from 5 to 1 star grow when the block enters the screen. Clicking a bar filters the list by that rating. Each review below shows initials in a circle, a name, a green verified purchase badge when it applies, a relative date, stars, a title, the text and a helpful button with a counter. A dropdown sorts the list. The demo uses fictional reviews marked with a badge. ## You may be looking for this if you asked for something like - “show customer reviews with stars on the product page” - “an average rating with stars and a bar for each rating” - “filter reviews by number of stars” - “let customers write a review on my site” - “a reviews section like the big marketplaces have” - “a helpful button on reviews and a verified purchase badge” - “social proof with real reviews for my store” - “sort reviews by newest or highest rating” ## Also known as product reviews, star rating, review section, rating summary, customer reviews, social proof, rating histogram ## When to use - Online store product pages that already collect buyer reviews - Landing pages that show the real rating of a product or service - Marketplaces and catalogs where the rating breakdown helps people decide - Stores that want to collect reviews right on the site ## When to avoid - Stores with no real reviews yet, since the sample texts must never pass as customer reviews - A production form without a backend, since a new review only appears on screen and is not saved - English interfaces as is, since labels and relative dates are in Brazilian Portuguese ## How to ask your AI ```text Build a reviews block for my product page that shows my store's real reviews: an average with fractional stars, rating bars that filter the list, sorting, a helpful button, a verified purchase badge, a keyboard accessible form and submission to my API. ``` 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 Veredito ### How do I show my customers' real reviews in Veredito? Pass the reviews prop with the reviews you already collect, each with a name, rating, title, text, date, whether the purchase was verified and its helpful votes. Veredito computes the average, breakdown and filters from them. Without the prop, it shows a fictional list, only for testing the layout; with real data, remove the demo badge from the header. ### Does Veredito's form save new reviews? Not on its own. Veredito's form checks for a rating from 1 to 5 and a text of at least 10 characters, places the new review at the top of the list on screen and emits submitReview with the data. Saving, moderating and publishing are up to your backend; the helpful button also just emits an event. ### Is Veredito accessible by keyboard and screen readers? Yes. In Veredito, the form stars are a radio group you pick with the arrow keys, each rating bar is a button that announces stars, count and percentage, the average has a text alternative and sorting uses a native select. With reduced motion, the bars appear full without animating. ## Related components - [Mostruário](https://vibecode.thmtecnologia.com/en/components/mostruario/): A main photo with a magnifier that enlarges details on hover, thumbnails below and a fullscreen view with zoom. - [Causo](https://vibecode.thmtecnologia.com/en/components/causo/): Customer photos stacked at slight angles, with the testimonial quote appearing word by word beside them. - [Pêndulo](https://vibecode.thmtecnologia.com/en/components/pendulo/): One testimonial at a time, with a round photo swinging in an arc on each change and the quote sliding into place. - [Sacola](https://vibecode.thmtecnologia.com/en/components/sacola/): A cart that slides in from the side of the store, with coupons, shipping by postal code and a free shipping bar. - [Pódio](https://vibecode.thmtecnologia.com/en/components/podio/): Plan cards side by side with a monthly and yearly switch, a featured plan and a full feature comparison. --- 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).