Aki UI

Rating

A star rating that previews on hover, commits on click and walks with the arrow keys. Icons from Lucide↗↗ and Tailwind CSS.

Average

4.0 out of 5 · 128 reviews

Install the following dependencies:1

npm install lucide-react

Copy and paste the following code into a new component file:2

"use client"

import { StarIcon, type LucideProps } from "lucide-react"

import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from "react"

import {

Children,

cloneElement,

createContext,

useCallback,

useContext,

How to use it3

"use client"

import { useState } from "react"

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

export default function Page() {

const [value, setValue] = useState(3)

return (

Name	Default	Description
children	—	ReactNode RatingButton elements, one per step
value	—	number Controlled rating, pair it with onValueChange
defaultValue	0	number Initial rating when uncontrolled
onValueChange	—	(value: number) => void Called with the new rating
onChange	—	(event, value: number) => void Called with the originating event and the new rating
readOnly	false	boolean Disables hover preview and interaction
className	—	string Additional classes on the group

Name	Default	Description
icon	<StarIcon />	ReactElement Icon element cloned for each step
size	20	number Icon size in pixels
index	—	number Position in the group, injected by Rating
className	—	string Additional classes on the button, sets the filled colour