Interactive Star Rating
A highly engaging rating component that goes beyond static icons. Features smooth animations, hover effects, and clear visual feedback for user interaction.
Neo-SaaS Style
Clean, modern stars with a smooth fill animation and a subtle "sizzle" pop effect on selection.
Installation
Legacy installation using the full registry URL:
pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/star-rating-neo-saas.json"Neo-Brutal Style
Bold, high-contrast stars with a hard "pop" selection animation and thick borders.
Installation
Legacy installation using the full registry URL:
pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/star-rating-neo-brutal.json"Glassomorphic Style
Glowing, neon-inspired stars with a soft bloom effect. Ideal for dark mode interfaces.
Installation
Legacy installation using the full registry URL:
pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/star-rating-glassomorphic.json"API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
rating | number | - | The current rating value. |
maxStars | number | 5 | The total number of stars to display. |
onRatingChange | (rating: number) => void | - | Callback function invoked when a star is clicked. |
disabled | boolean | false | If true, the rating component is read-only and non-interactive. |
className | string | - | Additional CSS classes to apply to the root container. |