Getting Started
App Providerglobal.d.tsThemesTypes
cn(...args)Text ParserUnits Converters
AnchorAvatarBreadcrumbBurgerButtonCardCarouselCheckerCodeColor PickerCommandConfettiCopyButtonDouble Helix WordsFloating IndicatorGroupHighlight TextIndicatorInputKbdLabelLoaderPaginationPassword RequirementPolymorphic SlotProgressProseRatingRunning AreaScroll AreaSheetsSkeletonSliderStackSvgTableTabsTextareaTimelineTimesToasterTooltipTyping WordsTypography
useClickOutsideuseClipboarduseDeviceInfouseDialoguseDidUpdateuseDirectionuseDisclosureuseDocumentTitleuseDocumentVisibilityuseElementInfouseEyeDropperuseFetchuseFullscreenuseGeoLocationuseHotkeysuseHoveruseIduseImagePopupuseInputStateuseIntersectionuseIntervaluseIsomorphicEffectuseListStateuseLocalStorageuseMeasureScrollbaruseMediaQueryuseMergedRefuseMouseuseMoveuseMutationObserveruseNetworkuseOpenStateuseOrientationuseOSusePaginationusePWAInstalleruseRandomColorsuseReducedMotionuseReloaduseResizeObserveruseScrollIntoViewuseStateHistoryuseTimeoutuseTouchuseTriggeruseUncontrolleduseValidatedStateuseViewportSizeuseWindowEventuseWindowScroll
Docs
Web
Components
Rating
Prose

A content wrapper that applies beautiful and readable typographic styling to its children.

Running Area

A looping motion container for creating continuous scrolling effects like marquees.

Edit this page on GitHub
  • Started
  • Utilities
  • Configuration
  • Components
  • Hooks
  • Examples
  • Github
  • Contributing
⌘+J

© 2025 oeri rights MIT

Designed in Earth-616

Built by oeri

Rating

A visual component for capturing or displaying rating values, usually represented by stars or other icons.

Usage

Basic usage example to quickly see how the Rating component works. This example gives a quick overview of how to implement the Rating component in a simple use case.

"use client";
import { useState } from "react";
import { Rating } from "@/ui/rating";

export function RatingDemo() {
  const [rating, setRating] = useState(2);
  return <Rating value={rating} onChange={setRating} />;
}

Properties

Interactive configurator to explore customization options for the Rating component. Adjust visual and behavioral properties such as maximum value, fractions, and symbols to see how the component responds.

Size
Count
Color
import { Rating } from "@/ui/rating";

export function RatingDemo() {
  return <Rating defaultValue={3} />;
}

Custom Symbol

Demonstration of using custom icons or elements as rating symbols. Instead of default stars, you can define your own icons or any React nodes for the rating items.

Custom Icon
Custom State Icon
import { Rating } from "@/ui/rating";
import { Stack } from "@/ui/stack";
import { rem } from "xuxi";
import { SunIcon, MoonStarIcon, MoodCryIcon, MoodSadIcon, MoodSmileIcon, MoodCrazyHappyIcon, MoodHappyIcon } from "@/icons/*";

function getIconStyle(color: string = "#666", size: number = 24) {
  return {
    style: {
      color,
      width: rem(size),
      height: rem(size)
    }
  };
}

const getEmptyIcon = (value: number) => {
  switch (value) {
    case 1:
      return <MoodCryIcon {...getIconStyle()} />;
    case 2:
      return <MoodSadIcon {...getIconStyle()} />;
    case 3:
      return <MoodSmileIcon {...getIconStyle()} />;
    case 4:
      return <MoodHappyIcon {...getIconStyle()} />;
    case 5:
      return <MoodCrazyHappyIcon {...getIconStyle()} />;
    default:
      return null;
  }
};

const getFullIcon = (value: number) => {
  switch (value) {
    case 1:
      return <MoodCryIcon {...getIconStyle("red")} />;
    case 2:
      return <MoodSadIcon {...getIconStyle("orange")} />;
    case 3:
      return <MoodSmileIcon {...getIconStyle("yellow")} />;
    case 4:
      return <MoodHappyIcon {...getIconStyle("lime")} />;
    case 5:
      return <MoodCrazyHappyIcon {...getIconStyle("green")} />;
    default:
      return null;
  }
};

export function RatingCustomSymbolDemo() {
  return (
    <Stack gap={32} align="center" className="m-auto size-full max-w-96">
      <Rating emptySymbol={<MoonStarIcon {...getIconStyle()} />} fullSymbol={<SunIcon {...getIconStyle("#ffd000")} />} />

      <Rating emptySymbol={getEmptyIcon} fullSymbol={getFullIcon} highlightSelectedOnly />
    </Stack>
  );
}

Custom Fractions

Demonstration of configuring fractional steps for rating values. This example shows how to allow partial ratings, like half-stars or custom fractions.

Fractions: 2
Fractions: 3
Fractions: 4
import { Rating } from "@/ui/rating";
import { Stack } from "@/ui/stack";

export function RatingFractionsDemo() {
  return (
    <Stack gap={32} align="center" className="m-auto size-full max-w-96">
      <Rating fractions={2} defaultValue={1.5} />
      <Rating fractions={3} defaultValue={2.33333333} />
      <Rating fractions={4} defaultValue={3.75} />
    </Stack>
  );
}

Controlled

Example of a fully controlled Rating component. The rating value is stored in a local state and updated manually through the onChange handler.

"use client";
import { useState } from "react";
import { Rating } from "@/ui/rating";
 
function RatingDemo() {
  const [value, setValue] = useState(0);
  return <Rating value={value} onChange={setValue} />;
}

Read only

Example of a read-only Rating component. The rating is fixed and cannot be changed by user interaction, useful for displaying existing review scores.

import { Rating } from "@/ui/rating";
 
function RatingDemo() {
  return <Rating value={3.5} fractions={2} readOnly />;
}

API References

Styles API

Styles APITypeDefaultAnnotation
unstyled?booleanfalseif true, all default styles will be removed
classNames?{ wrap?: string; inner?: string }undefinedclassNames={{ wrap: "", inner: "" }}
styles?{ wrap?: CSSProperties; inner?: CSSProperties }undefinedstyles={{ wrap: {}, inner: {} }}

Props API

Props APITypeDefaultAnnotation
rating?number0initial rating
totalStars?number5total number of stars
onRatingChange?(rating: number) => voidundefinedcallback to receive ratings from users
interactive?booleanfalseif true, the star can be clicked to give a rating

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

rating.tsx