# Review Filter Bars

> 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.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: @remixicon/react, @radix-ui/react-radio-group
- Live preview: https://21st.dev/@ruixen.ui/components/review-filter-bars

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/review-filter-bars?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt