# Rating

> Interactive or read-only star rating with half stars.

Component · Free · https://lodeui.com/components/rating

## When to use

- Collecting or showing star ratings.

## When not to use

- Precise satisfaction scores: use a radio group with labels.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/rating.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { Rating } from "@/components/ui/rating";

export function Review() {
  const [stars, setStars] = React.useState(0);
  return <Rating aria-label="Rating" value={stars} onValueChange={setStars} />;
}
```

## API reference

### Rating

Interactive stars, or read-only with half stars.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / onValueChange | `number` | – | Current rating. |
| max | `number` | `5` | Stars. |
| size | `number` | `18` | Star size in px. |
| readOnly | `boolean` | – | Display only; supports halves. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Change rating |

## Accessibility

- Interactive stars are a radiogroup; each star is labelled.

## Motion

- Stars pop on hover and select.

## Responsive behavior

- Fixed size; use 24px+ for touch.

## Performance

- Static markup.

## Notes for AI

- Use readOnly for averages like 4.6.

## Related

- [Product card](https://lodeui.com/components/product-card) — Product tile with swatches, wishlist, sale price and add-to-cart.