NexoreUI
InstallationComponentsNexore MakeGitHub
GitHub
NexoreUIv0.1.2

Getting Started

Installation

Components

ButtonInputCardBadgeAlertAvatarAccordionModal / DialogTooltipTabsProgressSkeletonSliderSwitchRatingCommandTableStepperScroll AreaFile UploadNavigationIconsDock

Pro

ChartsData DisplayDark Mode ToolkitCommerceCookie ConsentSocialPremium EffectsLoaders

Animated

MarqueeNumber TickerAnimated NumberTyping AnimationBlur FadeBox RevealFile Preview CardImage Compare
MIT License
DocsRating

Rating

Star rating components for feedback.

Next ComponentCommand

Rating

Premium rating indicator supporting custom shapes (Stars, Hearts, Thumbs), sizes, keyboard navigation, and micro-interactions.

When to use

star ratingGathering or displaying qualitative feedback (product reviews, app store ratings, item reviews)
heart ratingMarking items as favorites, adding to wishlists, or showcasing popularity indices
thumb ratingBinary liking/disliking systems or quick satisfaction scoring layouts
read-only modeDisplaying aggregated feedback stats where user input is not permitted (e.g. historical average scores)

Interactive Playground

Rating Playground
nexoreui
Live Preview
Props Panel
number

Maximum scale score rating

select

Custom icon symbol structure

select

Sizing multiplier dimensions

boolean

Disables interaction and mouse effects

Generated Code
Open in GitHub
import { Rating } from "nexoreui"

<Rating />

Interactive Star Rating

Score: 3 / 5
component.tsx

Heart Favorites Scoring

Score: 3 / 10
component.tsx

Thumbs Up Like Counter

Score: 3 / 5
component.tsx

Read-Only Fixed Display

component.tsx

Large Custom Star Score

Score: 3 / 7
component.tsx

API Reference (Props)

PropTypeDefaultDescription
value*number—Selected active rating score count.
maxnumber5Maximum scoring slots count.
onChange(value: number) => void—Callback fired when a rating icon is selected.
readonlybooleanfalseDisables pointer event hooks and transforms to read-only.
size"sm" | "md" | "lg""md"Visual dimensions of the rating icons.
icon"star" | "heart" | "thumb""star"Selection symbol rendering variant.
classNamestring—Additional custom class names.

♿ Accessibility (a11y)

  • Keyboard Focus: Focusable using standard Tab navigation. Use arrow keys Right Arrow / Left Arrow to increase or decrease rating active value.
  • Roles & Labels: Each button maps to a descriptive rating label representing its specific value (e.g. "Rate 4 out of 5").