Components
Loading preview...
This Review Filter Bars component offers a clear and interactive way to filter reviews by rating. Instead of simple text or star lists, each option is displayed as a horizontal bar that combines a star rating, a progress bar showing the proportion of reviews, and the total count for that rating. This makes it easy for users to quickly gauge distribution and choose the category they care about. The active selection is highlighted with accent styling and a glowing green dot for instant feedback, while hover states add interactivity. This design is especially effective on e-commerce sites, SaaS dashboards, or product review pages, where presenting both the numbers and their visual weight helps users make informed filtering decisions.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/review-filter-bars"use client";
import { ReviewFilterGroup, ReviewFilterItem } from "@/components/ui/review-filter-bars";
function DemoPage() {
const total = 12921;
return (
<div className="space-y-4">
<h2 className="text-lg font-semibold">Filter by rating</h2>
<p className="text-sm text-muted-foreground">Select a review group to filter results.</p>
<ReviewFilterGroup defaultValue="all">
<ReviewFilterItem value="5-stars" stars={5} count={5168} total={total} />
<ReviewFilterItem value="4-stars" stars={4} count={4726} total={total} />
<ReviewFilterItem value="3-stars" stars={3} count={3234} total={total} />
<ReviewFilterItem value="2-stars" stars={2} count={1842} total={total} />
<ReviewFilterItem value="1-star" stars={1} count={452} total={total} />
</ReviewFilterGroup>
<div className="mt-4 text-xs text-center text-muted-foreground">
Minimal design • Made by{" "}
<a href="https://www.ruixen.com" target="_blank" className="underline">
ruixen.com
</a>
</div>
</div>
);
}
export default DemoPage;