nili/ui
enfaartr
All components

Rating

Overview
28 exports5 variant axes58 props5 files
import { Rating, RatingAlignment, RatingBar, RatingBarArea, RatingBarLabels, RatingBarType } from '@nili/ui';

This is the library’s own overview page, rendered live. Switch the language or the theme in the header and it follows.

Interactive

A set of radios under the glyphs, so arrow keys work and the value submits with the form. name ties it to a native submission.

4
import { Rating } from "@nili/ui"

export function Example() {
  const [score, setScore] = useState(4)

  return (
    <Rating
      value={score}
      onValueChange={setScore}
      name="score"
      labels={{
        root: "Rate this article",
        item: (score) => `${score} stars`,
      }}
    />
  )
}

Read-only

Display only — an average, a review score. Renders a single image role instead of a set of radios, and accepts fractional values, so 4.5 draws half a star.

5
4.5
3.2
1
4.5 (128 reviews)
import { Rating } from "@nili/ui"

export function Example() {
  return (
    <>
      <Rating readOnly value={4.5} showValue />
      <Rating
        readOnly
        value={4.5}
        valueLabel={t('reviews')}
        labels={{ summary: (value, max) => `${value} out of ${max}` }}
      />
    </>
  )
}

Glyph and empty state

type picks star or heart and drives the colour. empty chooses between the outline and a filled grey glyph — the second reads better on a busy surface.

star · heart
empty: line · filled
max=10
import { Rating } from "@nili/ui"

export function Example() {
  return (
    <>
      <Rating type="star" defaultValue={3} />
      <Rating type="heart" defaultValue={3} />
      <Rating type="star" empty="filled" defaultValue={3} />
      <Rating max={10} defaultValue={7} />
    </>
  )
}

Rating & Review

alignment is Figma’s Rating & Review block: ratings is the bare row, vertical puts the description under it, horizontal beside it.

vertical
4.5Based on 128 reviews from verified buyers.Read reviews
horizontal
128 reviews
import { Rating, LinkButton } from "@nili/ui"

export function Example() {
  return (
    <>
      <Rating
        readOnly
        value={4.5}
        alignment="vertical"
        showValue
        description="Based on 128 reviews from verified buyers."
        linkButton={<LinkButton href="#" size="sm">Read reviews</LinkButton>}
      />

      <Rating
        readOnly
        value={4.5}
        alignment="horizontal"
        description="128 reviews"
      />
    </>
  )
}

Rating Bar

A five-point satisfaction scale — the survey control, not the star row. Four types, and the digits follow the locale.

emoji
number
star
heart
import { RatingBar } from "@nili/ui"

export function Example() {
  return (
    <>
      <RatingBar type="emoji" labels={{ root: "How was it?" }} />
      <RatingBar type="number" labels={{ root: "How was it?" }} />
      <RatingBar type="star" labels={{ root: "How was it?" }} />
      <RatingBar type="heart" labels={{ root: "How was it?" }} />
    </>
  )
}

Rating Bar with a comment

The whole survey block: the scale plus a free-text field. commentLabel is required when the comment is shown — a bare textarea has nothing to name it.

import { RatingBarArea } from "@nili/ui"

export function Example() {
  return (
    <RatingBarArea
      type="emoji"
      labels={{ root: "How was your experience?" }}
      commentLabel="Tell us more"
      commentPlaceholder="Tell us why!"
    />
  )
}