Rate

free

Rate captures a star or symbol score for reviews, feedback, and quality ratings.

How was your experience?

Your rating helps us improve future orders.

3 out of 5

import { useState } from 'react';
import Rate from '@/components/ui/rate';

export default function UsageDemo() {

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Rate

pnpm dlx nateui@latest add Rate

yarn dlx nateui@latest add Rate

Examples

Basic

import Rate from '@/components/ui/rate';

export default function BasicDemo() {
  return <Rate defaultValue={3} />;

Half Ratings

3.5 stars

import { useState } from 'react';
import Rate from '@/components/ui/rate';

export default function HalfRatingsDemo() {

Count

import Rate from '@/components/ui/rate';

export default function CountDemo() {
  return <Rate count={10} defaultValue={7} />;

Custom Character

import Rate from '@/components/ui/rate';
import { PiHeart } from 'react-icons/pi'

const sentiments = ['Poor', 'Fair', 'Good', 'Very Good', 'Excellent'];

States

Read only

4.0 average

Disabled

import Rate from '@/components/ui/rate';

export default function StatesDemo() {
  return (

Controlled

Current rating: 2

import { useState } from 'react';
import Rate from '@/components/ui/rate';
import Button from '@/components/ui/button';

API

Rate renders a single div with role="slider" and full keyboard support: arrow keys adjust the value by one step, and Home / End jump to the minimum and maximum.

Prop	Description	Type	Default
`value`	Current rating for controlled usage.	`number`	-
`defaultValue`	Initial rating for uncontrolled usage.	`number`	`0`
`count`	Number of rating items rendered.	`number`	`5`
`allowHalf`	Enables half-step precision by splitting each item into two halves.	`boolean`	`false`
`allowClear`	Clicking the current value again resets the rating to `0`.	`boolean`	`true`
`disabled`	Dims the control and blocks all interaction.	`boolean`	`false`
`readOnly`	Displays the value at full opacity but blocks interaction.	`boolean`	`false`
`name`	Renders a hidden input so the value submits with a native form.	`string`	-
`character`	Custom rating symbol, either a node or a render function per item.	`RateCharacter`	`StarIcon`
`tooltips`	Native `title` text per item, indexed from the first item.	`string[]`	-
`label`	Trailing content rendered after the last item, such as a live readout.	`ReactNode`	-
`size`	Control size.	`ControlSize`	`'md'`
`classNames`	Class name overrides for the item, icon, and label slots.	`RateClassNames`	-
`onChange`	Called with the next value when the rating is committed.	`(value: number) => void`	-
`onHoverChange`	Called with the previewed value as the pointer moves across items.	`(value: number) => void`	-
`className`	Class names applied to the root element.	`string`	-
`ref`	Ref forwarded to the root `div`.	`Ref<HTMLDivElement>`	-
`...nativeDivProps`	Native props for the root `div`.	`NativeRateDivProps`	-

Types

type ControlSize = 'sm' | 'md' | 'lg';
 
type RateCharacter =
  | ReactNode
  | ((props: {
      index: number;
      value: number;
      active: boolean;
    }) => ReactNode);
 
type RateClassNames = {
  item?: string;
  icon?: string;
  label?: string;
};
 
type NativeRateDivProps = Omit<
  ComponentPropsWithRef<'div'>,
  'children' | 'onChange'
>;