shadcn.io is not affiliated with official shadcn/ui
Album Review Music Block for Vue
An album review scored track by track: a star rating that is the mean of nine track scores, score bars with a tick at the album mean, a highest-first sort, the review under a collapsible, and a Helpful toggle that counts once.
Installation
Overview
Show why an album scored what it did, with this review for Vue with Ark UI. It sets out one Critbook review in a hairline frame with a plus mark on each corner. A head band holds the album's drawn cover, its title, artist and label, the reviewer's initials and publication, a read-only Rating whose figure is the mean of the nine track scores, and the best track, both worked out from the scores. The scores column lists the tracks as ruled rows with a bar from 0 to 5, the number, a star outline at 4.5 or more, and a tick across every bar at the album mean; a Toggle Group re-sorts the rows between album order and highest first without changing the panel's height. The review column holds the opening lines and the rest of the review under a Collapsible, and a Helpful Toggle that adds one once and takes it back. On a phone the scores come first and the review follows. It's built from Rating, Toggle Group, Collapsible, Toggle, Avatar and Guides, with a CSS entrance only. For review sites, music magazines and store pages.
FAQ
How do I add my own review?
Edit TRACKS (an id, the album number, a title and a score from 0 to 5 in halves), the reviewer and publication constants, and the text in LEDE and MORE. The rating, the best track, the star marks and the mean tick are worked out from the scores, so the headline number can never disagree with the rows. The stars only draw the mean to the nearest half; the figure beside them gives the exact mean to one decimal.
How do I read the bars?
Every bar runs from 0 to 5. A bar for a score of 4.5 or more is solid and carries a star outline; the others are lighter, so the standouts read without colour. The short vertical tick across each bar is the album mean, so every row shows at a glance whether it sits above or below it. Each score is also written as a number, and a screen reader hears "out of 5" and "a standout" where it applies.
What does the order group do?
Album order lists the tracks as sequenced; Highest first sorts by score and keeps album order for ties. The rows have the same height either way, so nothing below them moves, and the status line says which order is shown. Each row keeps its album number, so you can still see where a track sat on the record.
How does the Helpful toggle work, and what stays local?
It starts at 142, adds one when pressed and takes it back when pressed again, and the status line says so. The count is only held in the tab: nothing is sent and the next visitor sees 142. To make it real, post the vote from the toggle's handler and replace the starting count with the stored one.