Stays Star Rating

Star Rating

Five stars in Warm Orange — to show a rating (halves too) or to give one.

Preview

Show a rating — sm, md, lg (4.5 shows half a star)

Give one

Tap a star.

Usage

tsx

import { StarRating } from "zostel-ui";

<StarRating rating={4.5} size="sm" />
<StarRating rating={mine} interactive onRatingChange={setMine} size="lg" />

Props

Prop	Type	Default	Description
`rating`	`number`	—	0 to maxRating; fractions fill part of a star.
`maxRating`	`number`	`5`	How many stars.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	14, 20 or 28 px.
`interactive`	`boolean`	`false`	A radio group: tap, click or Tab + Enter to rate.
`onRatingChange`	`(rating: number) => void`	—	Called with 1…maxRating.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

rating

Type: number

Default: —

0 to maxRating; fractions fill part of a star.

maxRating

Type: number

Default: 5

How many stars.

size

Type: "sm" | "md" | "lg"

Default: "md"

14, 20 or 28 px.

interactive

Type: boolean

Default: false

A radio group: tap, click or Tab + Enter to rate.

onRatingChange

Type: (rating: number) => void

Default: —

Called with 1…maxRating.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).