Star Rating
A star-based rating display component with configurable size and value, perfect for guest reviews and property ratings.
Preview
Sizes
Interactive
Your rating: 0/5
Usage
tsx
import { StarRating } from "zostel-ui";
<StarRating value={4} max={5} size="md" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current rating value |
max | number | 5 | Maximum number of stars |
size | "sm" | "md" | "lg" | "md" | Size of the star icons |
color | string | "#F1563F" | Fill color of active stars |
readOnly | boolean | true | Whether the rating is read-only |
valueType:
numberDefault: 0
Current rating value
maxType:
numberDefault: 5
Maximum number of stars
sizeType:
"sm" | "md" | "lg"Default: "md"
Size of the star icons
colorType:
stringDefault: "#F1563F"
Fill color of active stars
readOnlyType:
booleanDefault: true
Whether the rating is read-only