Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

In-App Request Prompt Reviews Block for React

A review request drawn as a phone notification for a candle maker: five named stars, a Remind me select (tomorrow, in 3 days, next week) and Not now, each answering in a polite line that keeps the choice.

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

An in-app review request for React with Base UI, for Cinderfold, a fictional maker of hand-poured candles. A split behind a divider. At the start, a headline and three rules the prompt follows (sent after delivery, asked once, a snooze is kept). At the end, in a frame, the prompt itself drawn as a phone notification: the app mark and name, a Delivered badge, "Your candles arrived. How are they?", five named stars you can set with the arrow keys, a Remind me select with three delays, and Not now. Choosing a star, a snooze or Not now answers in a polite line and keeps the choice on screen; a star and a snooze exclude each other, and "Change my answer" takes the choice back. Nothing is sent. On a phone the notification sits under the rules. It's built from Rating, Select, Field, Badge, Frame, Guides and Button, with your theme's tokens for every colour.

FAQ

Is the answer sent anywhere?

No. The three answers are local state and the polite line says what was chosen ("Thanks. 4 stars, Very good.", "Reminder set: in 3 days."). The rules beside the notification describe how an app would behave; nothing here schedules anything. To act on the answers, post answer, stars and snooze from the handlers.

Why do a star and a snooze exclude each other?

They answer the same question differently: "here is my rating" against "ask me later". Choosing one clears the other so the prompt never shows both. Not now clears both too. The line under the controls always matches what is shown.

How does it work from the keyboard?

Tab through the stars (arrow keys rate), the Remind me select (open it with Enter or the arrow keys, pick a delay) and Not now. "Change my answer" appears after any answer and puts the prompt back as it started.

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 notification is narrow already, so it keeps its width and sits under the three rules; the select and Not now wrap if they need to. Nothing scrolls sideways at 320 pixels.

  • 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

    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

    Inline Rating Widget Reviews

    Ask and write

    Rate in place in a list of recipes: each ruled row shows its community average and a Rate button that opens a popover with named stars, an optional line and Save; after saving, the row shows your stars with Edit.

  • 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

    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

    Top Bar Rating Banner

    Store bars

    A centred rating strip: five stars drawn filled to 4.8, the score with its review count, and a link to leave a review.

All 100 reviews blocks