Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

In-App Request Prompt Reviews Block for Vue

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 Vue with Ark 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 Field takes the select's id, so its label and the hidden native select share it, and focusing that select passes focus to the button.

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.

All 100 reviews blocks