Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Account blocks

Pro

Your Reviews Account Block for Vue

The reviews a member wrote, each with its book, a read-only star score and a Shown as select for the name it carries, Delete behind an alert dialog and one button that makes every review anonymous.

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

Let members decide how their name shows on what they have written, with this reviews panel for Vue with Ark UI. Six reviews are rows with the book's title, a five-star score drawn in foreground and read out as "4 of 5 stars", the day and an excerpt. Each has a Shown as Native Select with three forms of the member's name (a short name, Anonymous or the full name) and a Delete button. Delete opens an Alert Dialog that says the review disappears for every member and can't be brought back, with focus starting on Keep it. The header's Shine Button is the only colored control: it makes every review anonymous in one press, and the sentence over the panel counts what is public and what is anonymous from the rows. Start over puts the sample back. An unseen copy of every row keeps the panel's height when a review is deleted, down to an Empty state. It's built from Native Select, Alert Dialog, Shine Button, Button, Empty and Guides, with a CSS entrance only. For account pages, forums, book clubs and any app where people write reviews. It is the author's own list: there is no score summary or helpful vote.

FAQ

How do I fill it with the member's reviews?

Edit REVIEWS. Each has an id, the title of what was reviewed, stars out of five, the ISO day it was written (on), an excerpt and the mode its name shows in now (short, anon or full). The three forms of the name are SHORT and FULL and the word Anonymous, so change those two constants to the member's. The public and anonymous counts are worked out from the rows, never typed.

What stays local, and how do I make it real?

Everything: changing a name or deleting a review changes this page's state and the status line says nothing changed in the product; Start over brings the sample back. To wire it, send the new mode to your server from show and allAnonymous and the delete from remove, updating the row only when it answers. Remember that making a review anonymous should also hide the name where the review is already published.

Why are the stars drawn and not an input?

This is a list of scores already given, so the stars are not a control. Five outlined stars with the earned ones filled sit in a decorative box and the score is read out in words, "4 of 5 stars", so a screen reader gets the number and keyboard users have no stop that does nothing.

How does deleting work?

Delete opens an alert dialog because it can't be undone. Focus starts on Keep it, Escape closes it and focus returns to the Delete button, and confirming moves focus to the next review's Delete button, or to Start over when none remain. The rows sit over an unseen copy of all six, so the panel keeps its height.

How does it look on a phone?

Each review is a card: the title, the stars and day, the excerpt, then the Shown as select beside Delete. The select keeps its full width of the space the button leaves, and the foot with the status line and Start over sits under the list.

Is it accessible?

Each select has a visible label that also names its book, each Delete button names the review it deletes, the stars are read out as a score and the date is a real time element. The status line is a polite live region present from the start.

All 100 account blocks