Rating

Usage

"use client";

import { Rating } from "@thenamespace/uikit";

const Items = () => (

Anatomy

Import the Rating component and access all parts using dot notation.

import { Rating } from "@thenamespace/uikit";

<Rating>
  <Rating.Item />
</Rating>;

Controlled

"use client";

import { useState } from "react";

import { Rating } from "@thenamespace/uikit";

Custom Color

"use client";

import { Rating } from "@thenamespace/uikit";

const Items = () => (

Custom Icon Heart

"use client";

import { Rating } from "@thenamespace/uikit";

import { Icon } from "@/demos/icon";

Custom Icon Per Item

"use client";

import { Rating } from "@thenamespace/uikit";

import { Icon } from "@/demos/icon";

Disabled

"use client";

import { Rating } from "@thenamespace/uikit";

const Items = () => (

Product Review

"use client";

import { Rating } from "@thenamespace/uikit";

const Items = () => (

Read Only

"use client";

import { Rating } from "@thenamespace/uikit";

const Items = () => (

Read Only Fractional

"use client";

import { Rating } from "@thenamespace/uikit";

const Items = () => (

Render Function

"use client";

import { useState } from "react";

import { Rating, StarIcon } from "@thenamespace/uikit";

Sizes

"use client";

import { Rating } from "@thenamespace/uikit";

const Items = () => (

With Label

"use client";

import { useState } from "react";

import { Rating } from "@thenamespace/uikit";

CSS Classes

Base & Size Classes

• .rating - Base rating group container
• .rating--sm - Small size (no gap, smaller icons)
• .rating--md - Medium size (1px gap, default)
• .rating--lg - Large size (2px gap, larger icons)

Element Classes

• .rating__item - Individual rating option
• .rating__item--sm / .rating__item--md / .rating__item--lg - Item size variants
• .rating__icon - Icon wrapper (star, heart, etc.)
• .rating__icon-partial - Overlay for fractional read-only display

Interactive States

• Active: [data-active="true"] on .rating__item (icon turns active color)
• Read-only: [data-readonly="true"] on .rating__item (default cursor, no press scale)
• Focus visible: [data-focus-visible="true"] on .rating or .rating__item (focus ring)
• Pressed: :active or [data-pressed="true"] on .rating__item (scale down to 0.8)
• Disabled: [data-disabled="true"] on .rating or :disabled / [aria-disabled="true"] on .rating__item (reduced opacity)

CSS Variables

• --rating-active-color - Color for active/selected stars (default: var(--color-warning))
• --rating-inactive-color - Color for inactive stars (default: var(--color-surface-tertiary))
• --rating-partial - Width of the partial overlay for fractional display (set via inline style)

API Reference

Rating

The root component. Wraps RAC RadioGroup in horizontal orientation.

Also supports all RAC RadioGroup props except defaultValue, onChange, orientation, and value.

Rating.Item

An individual rating option. Wraps RAC Radio.

Also supports all RAC Radio props except children and value.

RatingItemRenderProps

When using the render prop pattern on Rating.Item: