rokle

Personality

20
40
70
15

Active brand: Meridian

Adjust sliders to see every component on the page respond in real time.

RatingGroup

Star or icon rating input allowing users to select a score from a defined range.

Examples

Interactive

Click to rate with star indicators.

Read Only

Non-interactive display rating.

Different Sizes

Small, medium, and large star ratings.

Custom Count

Rating with 10 star indicators instead of 5.

Installation

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

Usage

import { RatingGroup } from "@rokle/components";
import { RatingGroup } from "@rokle/components";

export function Example() {
  return <RatingGroup />;
}

API Reference

PropTypeDefaultDescription
valuenumber-Current rating value.
maxnumber5Maximum rating value.
onValueChange(value: number) => void-Called when rating changes.