Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Multi Step Form Reviews Block for React

A four-step review wizard for a bike helmet: Rate, Write, Details and Confirm in one framed form, each step checked before Next, a confirm step that repeats the review as an article, and an honest thanks.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A review wizard for React with Base UI, for the Thwaitemill Crest, a fictional bike helmet. A centred header sits over one framed form with a + mark on each corner. The top band is the step list: Rate, Write, Details and Confirm, each a numbered step that opens only once you have reached it; on a phone the list folds to "Step 2 of 4: Write" with a progress bar. Step by step: a star rating you can set with the arrow keys, each star named (Poor to Excellent); a title and a text of at least 20 characters; a name to show and a Select for how long you have worn it. Next checks only its own step, writes each problem under its field and moves focus to the first one. Confirm repeats the review as an article, and Post review ends in a thanks that says nothing was sent. It's built from Steps, Rating, Field, Input, Textarea, Select, Progress, Frame, Guides, Button and Shine Button, with your theme's tokens for every colour.

FAQ

How does each step check its fields?

Next calls check(step), which runs problems(draft) and keeps only that step's fields (STEP_OF says which step each belongs to). A problem shows in a slot under its field ("Choose a rating to continue."), the field is marked invalid, and focus moves to the first one in ORDER. Editing a field clears its message. Post review checks everything once more and jumps back to the step that has a problem.

Can I jump between steps?

Back is always free. The step list only opens steps you have already reached, so you can go back to Rate from Confirm and forward again, but not skip ahead past an unanswered step. Each move puts focus on the new step's heading and says "Step 2 of 4: Write" in a polite line that only screen readers hear.

Is the review sent anywhere?

No. Post review shows a thanks that says "Nothing was sent in this demo" and repeats the review; "Write another review" starts again at step one. To keep reviews, post draft where submit says so and show the thanks when your endpoint answers.

Why doesn't the frame change size between steps?

An unseen copy of all four panels shares the live panel's grid cell, so the frame is as tall as the tallest one and Next never moves the buttons. The copy is inert and hidden from assistive technology.

How is the Select wired on each target?

The label's htmlFor points at the trigger's id.

How does it fit on a phone?

The numbered list gives way to one line, "Step 2 of 4: Write", with a progress bar, and the form fills the width. Back and the Shine Button stay on one row. Nothing scrolls sideways at 320 pixels.

  • Pro

    Full Write Form Reviews

    Ask and write

    The whole review form on one page for a cast-iron pan: a named star rating, a title and text with live counts, pro and con tag lists, a recommend choice, photo names, and a sticky checklist with a progress bar.

  • Pro

    One Tap Quick Rating Reviews

    Ask and write

    A one-tap star rating for a phone case: the tap rates at once, the product's average is worked out again with yours counted in, Undo takes it back, and Add a comment opens a text box with a real check.

  • Pro

    Docked Widget Collection Reviews

    Ask and write

    A docked review widget on a drawn product page for a baby monitor: a tab that folds open to two named star ratings, one line of text, an optional photo name and a progress bar, with the three steps for embedding it beside it.

  • Pro

    Checkout Prompt Reviews

    Ask and write

    The review prompt on an order page for a coffee subscription: a star rating for each of the two coffees in the box and one shared comment, beside the order drawn as a receipt, with the share of recent orders that were reviewed.

  • Pro

    Project Brief Wizard Contact

    Contact forms

    A design-studio brief in three steps, with Back and Next, a review of what was typed, and a confirmation that repeats the brief.

  • Pro

    Summary Header Reviews

    Score summaries

    The header of a product's reviews page: the product name, a Write a review button that opens a real form in a dialog, and a three-cell band with the score, the share that recommend it and five distribution rows.

All 100 reviews blocks