4.5
via Verified BuyerSolid build quality and the battery genuinely lasts the full week they claim. Only gripe is the companion app is a bit clunky.
Daniel Osei
VerifiedCards & Expandables
Review Rating Card
A compact, star-first review tile for a review-wall grid or product page — rating, review text, reviewer identity and a verified-buyer marker. A single-review primitive (not a section), distinct from Marketing & Social Proof's aggregate review-card and quote-led testimonial-card.
Subscription Included with the Velocity Components subscription.
$ velocityx add review-rating-card
Built for react.
Needs react already installed
as a peer dependency.
An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.
Full docs for Review Rating Card →
Needs a licence key —
subscribe here, then
velocityx loginonce.
react
v1.0.1 react
Review Rating Card
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| rating | number | Yes | 0–5, half-points supported | |
| reviewText | string | Yes | ||
| reviewerName | string | Yes | ||
| reviewerAvatar | string | Yes | falls back to initials | |
| dateISO | string | Yes | rendered via <time datetime> | |
| dateLabel | string | Yes | e.g. "2 weeks ago" | |
| verified | boolean | No | false | |
| source | string | Yes | e.g. "Google", "Verified Buyer" | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/review-rating-card/ReviewRatingCard.jsxUsing the Review Rating Card component
Install it with velocityx add review-rating-card.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Cards & Expandables.
Accordion Card GroupPro
A stack of independent cards where opening one smoothly expands its detail and closes any other open card, while every card's summary stays legible whether open or closed. Height animates off the panel's real measured content, so there's never a layout jump.
reactCard Grid SkeletonPro
The loading shape for a grid of cards — media block, title line, sub line, sized to match real card dimensions so the grid doesn't shift when data arrives. Ships media, list and stat variants; static (not faster) under reduced motion and hidden from screen readers.
reactContact Person CardPro
A directory entry — avatar, name, role, a short list of real tel/email/location contact methods, and one primary action. Built for a staff directory or "your account manager" block, not a hover-reveal bio tile.
reactExpandable CardFree
Card that expands into a focused overlay on desktop and a draggable bottom sheet on mobile, with three snap points. Portal-rendered, focus-trapped, scroll-locked and reduced-motion aware.
react