Rating
Allows users to submit ratings or view average customer scores using interactive star icons with half-star precision.
3.6 KB
•Updated on August 21, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-ratingUsage
Code
import { Rating } from '@/components/spaceui/rating'Code
<Rating rating={4.5} showValue editable />Examples
Decimal
Show Value
Editable
Size
API Reference
Rating
The main component for displaying and editing star ratings.
| Prop | Type | Default | Description |
|---|---|---|---|
rating | number | - | Required. The current rating value. Supports decimal values for partial stars. |
maxRating | number | 5 | Total number of stars to display. |
size | sm|default|lg | md | The size of the stars and spacing. |
showValue | boolean | false | Whether to show the numeric rating value next to the stars. |
editable | boolean | false | Whether the rating can be changed by clicking on stars. |
onRatingChange | (rating: number) => void | - | Callback fired when a star is clicked (if editable is true). |
starClassName | string | - | Additional CSS classes for the numeric value container. |
className | string | - | Additional CSS classes for the root container. |
All 9 variations
Rating with review summary
Interactive half-star rating
Emoji reaction rating
Rating with review text input
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.