Rating

Renders a star rating component with interactive buttons. It allows users to select a rating using mouse or keyboard. It shows hover effects and focuses on selected stars. Use it to collect user ratings in forms or reviews.

byShadcnblocks.com from Kibo UI

Installation

terminal

pnpm dlx layro-cli add @shadcnblocks/rating

npx layro-cli add @shadcnblocks/rating

npx layro-cli add @shadcnblocks/rating

bunx layro-cli add @shadcnblocks/rating

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { useControllableState } from "@radix-ui/react-use-controllable-state";
import { type LucideProps, StarIcon } from "lucide-react";
import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from "react";
import {
  Children,
  cloneElement,
  createContext,
  useCallback,
  useContext,
  useEffect,
  useRef,
  useState,