Command Palette

Search for a command to run...

Docs
Review Filter Bars

Review Filter Bars

A radio group for filtering reviews by star rating with progress bars and counts.

Loading...

Installation

Usage

import {
  ReviewFilterGroup,
  ReviewFilterItem,
} from "@/components/ruixen/review-filter-bars";
 
export default function App() {
  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="5-stars">
        <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>
  );
}

Props

ReviewFilterGroup Props

PropTypeDefaultDescription
classNamestring-Additional CSS classes
defaultValuestring-Default selected value
valuestring-Controlled selected value
onValueChange(value: string) => void-Callback when value changes

ReviewFilterItem Props

PropTypeDefaultDescription
valuestring-Unique value for this filter
starsnumber-Number of stars (1-5)
countnumber-Number of reviews for this rating
totalnumber-Total number of reviews
classNamestring-Additional CSS classes

Features

  • Visual Progress: Progress bars show the distribution of ratings
  • Star Display: Clear 5-star rating system with filled/unfilled stars
  • Review Counts: Shows exact number of reviews for each rating
  • Percentage Calculation: Automatically calculates and displays percentages
  • Interactive Selection: Click to filter reviews by rating
  • Accessible: Built on Radix UI primitives with proper keyboard navigation

Progress Bar Calculation

The progress bar width is automatically calculated as:

const percentage = Math.round((count / total) * 100);

Customization

Custom Star Colors

// Modify the star colors in your CSS
.text-amber-500 {
  color: #f59e0b; /* Active star color */
}
 
.text-muted-foreground/30 {
  color: rgba(107, 114, 126, 0.3); /* Inactive star color */
}

Custom Progress Bar Colors

// Modify progress bar colors
.bg-primary {
  background-color: hsl(var(--primary)); /* Progress fill color */
}
 
.bg-muted {
  background-color: hsl(var(--muted)); /* Progress background color */
}

Use Cases

  • E-commerce: Filter product reviews by star rating
  • App Stores: Filter app reviews and ratings
  • Restaurant Reviews: Filter dining reviews by satisfaction level
  • Service Reviews: Filter service provider reviews
  • Content Rating: Filter user-generated content by rating