Rating
Rating is a neobrutalist React component from Cruise UI. Stars filled with --primary and outlined in ink, with the number next to them: read-only (halves) or pick-a-score. Install it with npx shadcn@latest add @cruiseui/rating.
Install
Terminal
npx shadcn@latest add @cruiseui/ratingFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
"use client";
import { useState } from "react";
import { CruiseRating } from "@/components/cruise/rating";
export default function RatingExample() {
const [mine, setMine] = useState(0);
return (
<div className="flex flex-col gap-6">
<CruiseRating value={4.5} count={120} label="Average rating" />
<CruiseRating value={mine} onChange={setMine} label="Your rating" />
</div>
);
}
<span class="rating">
<span class="rating-stars" role="img" aria-label="Average rating: 4.5 out of 5"><!-- 5 × <span class="rating-star"> with a filled layer clipped to the value --></span>
<span aria-hidden="true"><span class="rating-value">4.5</span> <span class="rating-count">· 120 reviews</span></span>
</span>
<fieldset class="rating rating-input">
<legend class="field-label">Your rating</legend>
<span class="rating-stars">
<label class="rating-option"><input class="visually-hidden" type="radio" name="score" value="1" aria-label="1 star"><span class="rating-star" aria-hidden="true"><!-- star svg --></span></label>
<!-- … 2 to 5 -->
</span>
</fieldset>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
When to use
Showing an average score (4.5 · 120 reviews), or asking for one.
When not to
Anything that isn't a score out of a few stars (use a Slider or a Select).
Props
CruiseRating
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | 0 to max; read-only ratings may have halves (4.5). |
max? | number | 5 | — |
count? | number | — | Number of reviews, shown as "· 120 reviews". |
label? | string | "Rating" | Accessible name, e.g. "Your rating". |
onChange? | ((value: number) => void) | — | Makes it interactive (whole stars). |
showValue? | boolean | true | — |
className? | string | — | — |
Accessibility
- Read-only: one image named "Average rating: 4.5 out of 5".
- Interactive: native radios in a fieldset, so arrow keys work; each star is named "4 stars".
- The number is shown, so the stars never carry the score alone.