Rating Bar

An interactive star or number rating input.

Preview

Installation

Usage

import { RatingBar, RatingBarItem } from "@/components/ui/rating-bar"
<RatingBar defaultValue="3">
  {[1, 2, 3, 4, 5].map((n) => (
    <RatingBarItem key={n} value={String(n)}>
      {n}
    </RatingBarItem>
  ))}
</RatingBar>

API Reference

RatingBar

Root component. Wraps RadioGroup with rating-specific styling.

RatingBarItem

Individual rating option. Wraps RadioGroupItem from the radio component.

Examples

Custom data

Heart Styling

Small Size

Large Size