# Star Rating Collection with Half Stars, a Pure CSS Radio Version and a Review Summary in React and HTML
> Free star rating components: read-only quarter stars, half-star input, a pure CSS radio version, numbered tiles and a review summary with bars. React and HTML.
A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/star-rating-collection-with-half-stars-pure-css-radio-version-and-review-summary-in-react-and-html).
- Page, with a live preview: https://shadcn.exchange/r/weinc/star-rating-collection-with-half-stars-pure-css-radio-version-and-review-summary-in-react-and-html
- Screenshot: https://shadcn.exchange/shot/weinc/star-rating-collection-with-half-stars-pure-css-radio-version-and-review-summary-in-react-and-html/light.png
- Registry item: https://we.inc/r/star-rating-collection-with-half-stars-pure-css-radio-version-and-review-summary-in-react-and-html.json
- Listed: 2026-10-28, source last changed 2026-10-28
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/weinc/star-rating-collection-with-half-stars-pure-css-radio-version-and-review-summary-in-react-and-html.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Files
### `components/we-inc/star-rating-collection-with-half-stars-pure-css-radio-version-and-review-summary-in-react-and-html.tsx`
```tsx
import { Fragment, useEffect, useRef, useState, type KeyboardEvent, type ReactElement } from "react";
/*
Every piece below is written once: the function renders the live demo and the
string next to it is that same source file, so the code you copy is the code you see.
*/
type Lang = "react" | "html";
type Piece = {
id: string;
name: string;
blurb: string;
group: string;
Demo: () => ReactElement;
react: string;
html?: string;
stage: string;
};
const s1Demo = (() => {
const STAR = "M12 2.6l2.8 6 6.5.7-4.9 4.4 1.4 6.4L12 16.8l-5.8 3.3 1.4-6.4-4.9-4.4 6.5-.7z";
const items = [
{ name: "Walnut serving board", rating: 4.3, reviews: 218 },
{ name: "Enamel camping mug", rating: 3.75, reviews: 64 },
{ name: "Wool picnic blanket", rating: 2.5, reviews: 12 },
];
// Rounds to the nearest quarter star, then clips a row of filled stars to that width.
function Stars({ value, size = "h-5 w-5" }: { value: number; size?: string }) {
const shown = Math.round(value * 4) / 4;
const row = (cls: string) =>
Array.from({ length: 5 }, (_, i) => (
));
return (
{row("fill-stone-200")}
{row("fill-amber-500")}
);
}
function StarReadOnly() {
return (
{value ? LABELS[value - 1] : \"Pick a score from 1 to 5\"}
\n {value > 0 && (\n \n )}\n
\n
\n );\n}\n";
const PIECES: Piece[] = [
{ id: "s1", name: "Read-only score, quarter-star fill", blurb: "A clipped row of filled stars over an empty row, labelled once as an image.", group: "display", Demo: s1Demo, react: s1React, html: s1Html, stage: "bg-[#faf8f4] ring-1 ring-inset ring-stone-200/80" },
{ id: "s5", name: "Review summary with bars", blurb: "Average worked out from the counts, with bars that filter by star level.", group: "display", Demo: s5Demo, react: s5React, stage: "bg-[#faf8f4] ring-1 ring-inset ring-stone-200/80" },
{ id: "s2", name: "Star input on native radios", blurb: "Hover preview, a word for each level and real radio keyboard behaviour.", group: "input", Demo: s2Demo, react: s2React, stage: "bg-[#faf8f4] ring-1 ring-inset ring-stone-200/80" },
{ id: "s3", name: "Half-star input", blurb: "Two hit areas per star give scores from 0.5 to 5.", group: "input", Demo: s3Demo, react: s3React, stage: "bg-[#faf8f4] ring-1 ring-inset ring-stone-200/80" },
{ id: "s4", name: "Pure CSS radio rating", blurb: "No state or script. Radios in their natural order coloured with :has().", group: "input", Demo: s4Demo, react: s4React, html: s4Html, stage: "bg-[#faf8f4] ring-1 ring-inset ring-stone-200/80" },
{ id: "s6", name: "Numbered score tiles", blurb: "A custom radio group with roving focus and a clear button.", group: "input", Demo: s6Demo, react: s6React, stage: "bg-[#faf8f4] ring-1 ring-inset ring-stone-200/80" }
];
const GROUPS: { key: string; label: string }[] = [{"key":"display","label":"Display only"},{"key":"input","label":"Rating inputs"}];
const TEXT: { eyebrow: string; title: string; lead: string; refTitle: string; refNote: string } = {"eyebrow":"React · pure CSS · HTML","title":"Star ratings you can read and set","lead":"Six rating pieces: a read-only score with quarter-star fill, a review summary with filter bars, a radio-based star input, a half-star input, a version with no script at all and a numbered score picker.","refTitle":"Which markup to use","refNote":"Roles and keys follow the radio group pattern in the WAI-ARIA Authoring Practices Guide. Support for :has() and CSS masks is per MDN's compatibility data."};
const REF_HEAD: string[] = ["Case","Markup","Keyboard"];
const REF_ROWS: string[][] = [
[
"Showing a score",
"One element with role=\"img\" and aria-label=\"Rated 4.3 out of 5\". The drawn stars are aria-hidden.",
"Not focusable; nothing to operate."
],
[
"Choosing a score",
"Native radio inputs in a fieldset with a legend; each label holds a star and hidden text.",
"Tab enters the group, arrow keys move and select, as with any radio set."
],
[
"Half stars",
"Ten radios, two per star, each label covering one half.",
"Arrow keys step by half a point."
],
[
"No JavaScript",
"Radios plus :has() to colour the stars before the checked one. Needs a browser with :has() support.",
"Native radio keys."
],
[
"Custom buttons",
"role=\"radiogroup\" with role=\"radio\" buttons, aria-checked and a roving tabindex.",
"Arrows move, check and wrap; only one button is in the tab order."
],
[
"Summary bars",
"Buttons with aria-pressed to filter reviews by star level.",
"Tab and Enter or Space."
]
];
const COPY_ICON = "M9 9h10v10H9zM5 15V5h10";
const CHECK_ICON = "M5 12.5l4.5 4.5L19 7.5";
const CODE_ICON = "M8 7l-5 5 5 5M16 7l5 5-5 5";
export default function StarRatingCollection() {
const [group, setGroup] = useState("all");
const [langs, setLangs] = useState>({});
const [open, setOpen] = useState(null);
const [copied, setCopied] = useState(null);
const [announce, setAnnounce] = useState("");
const timer = useRef | null>(null);
useEffect(
() => () => {
if (timer.current) clearTimeout(timer.current);
},
[]
);
const shown = group === "all" ? PIECES : PIECES.filter((p) => p.group === group);
const langOf = (p: Piece): Lang => (p.html ? langs[p.id] ?? "react" : "react");
const codeOf = (p: Piece) => (langOf(p) === "html" && p.html ? p.html : p.react);
const langName = (l: Lang) => (l === "html" ? "HTML, CSS and JS" : "React and Tailwind");
async function copy(p: Piece) {
let ok = false;
try {
await navigator.clipboard.writeText(codeOf(p));
ok = true;
} catch {
ok = false;
}
if (!ok) setOpen(p.id);
setCopied(ok ? p.id : null);
setAnnounce(ok ? `${p.name}: ${langName(langOf(p))} copied` : "Copy was blocked, so the code is shown under the demo for you to select");
if (timer.current) clearTimeout(timer.current);
timer.current = setTimeout(() => setCopied(null), 1600);
}
const ring = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-600 focus-visible:ring-offset-2";
const chip = `inline-flex min-h-[40px] items-center gap-1.5 whitespace-nowrap rounded-full px-4 text-[13px] font-medium transition-colors ${ring}`;
return (