Yami UI

A star rating input and display with keyboard navigation.

Installation

Add the rating component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/rating.json

Usage

import { Rating } from "@/components/ui/rating"

// Interactive
<Rating defaultValue={3} onChange={(v) => console.log(v)} />

// Read-only
<Rating value={4} readOnly />

Examples

Interactive

Code

import { Rating } from "@/components/ui/rating"

<Rating defaultValue={3} onChange={(v) => console.log(v)} />

Read-only

Display a fixed score

5.0

4.0

3.0

Code

import { Rating } from "@/components/ui/rating"

<Rating value={5} readOnly />
<Rating value={4} readOnly />
<Rating value={3} readOnly />

Custom icon

Replace stars with any icon

Code

import { Rating } from "@/components/ui/rating"

<Rating
  defaultValue={2}
  icon={(filled) => (
    <span className={filled ? "text-rose-500" : "text-muted-foreground"}>♥</span>
  )}
/>

Sizes

Code

import { Rating } from "@/components/ui/rating"

<Rating value={4} readOnly iconSize="size-3.5" />
<Rating value={4} readOnly iconSize="size-5" />
<Rating value={4} readOnly iconSize="size-7" />