Read-only (locked):

Fractional (locked, showScore):

Interactive:

Selected: {value} star{value !== 1 ? "s" : ""}

) } `,children:(0,e.jsx)(n.code,{className:"language-tsx",children:`"use client" import * as React from "react" import StarRating from "@/delta/star-rating" export function StarRatingDemo() { const [value, setValue] = React.useState(3) const handleInteractiveChange = (val: number) => { setValue(val) alert("this would usually call backend api to update vote") } return (

Read-only (locked):

Fractional (locked, showScore):

Interactive:

Selected: {value} star{value !== 1 ? "s" : ""}

) } `})})}),` `,(0,e.jsx)(n.h2,{id:"installation",children:"Installation"}),` `,(0,e.jsxs)(u,{defaultValue:"cli",children:[(0,e.jsxs)(m,{children:[(0,e.jsx)(d,{value:"cli",children:"CLI"}),(0,e.jsx)(d,{value:"manual",children:"Manual"})]}),(0,e.jsx)(s,{value:"cli",children:(0,e.jsx)(n.pre,{__rawstring__:`npx shadcn@latest add https://deltacomponents.dev/r/star-rating.json `,__npmCommand__:`npx shadcn@latest add https://deltacomponents.dev/r/star-rating.json `,__yarnCommand__:`yarn dlx shadcn@latest add https://deltacomponents.dev/r/star-rating.json `,__pnpmCommand__:`pnpm dlx shadcn@latest add https://deltacomponents.dev/r/star-rating.json `,__bunCommand__:`bunx --bun shadcn@latest add https://deltacomponents.dev/r/star-rating.json `,children:(0,e.jsx)(n.code,{className:"language-bash",children:`npx shadcn@latest add https://deltacomponents.dev/r/star-rating.json `})})}),(0,e.jsx)(s,{value:"manual",children:(0,e.jsxs)(c,{children:[(0,e.jsx)(i,{children:"Install the following dependencies:"}),(0,e.jsx)(n.pre,{__rawstring__:`npm install [dependencies] `,__npmCommand__:`npm install [dependencies] `,__yarnCommand__:`yarn add [dependencies] `,__pnpmCommand__:`pnpm add [dependencies] `,__bunCommand__:`bun add [dependencies] `,children:(0,e.jsx)(n.code,{className:"language-bash",children:`npm install [dependencies] `})}),(0,e.jsx)(i,{children:"Copy and paste the following code into your project."}),(0,e.jsx)(l,{name:"star-rating",children:(0,e.jsx)(n.pre,{__src__:"registry/components/star-rating.tsx",__rawstring__:`"use client" import React, { useState } from "react" interface StarRatingProps { initialValue?: number // Initial rating value (optional) onChange?: (value: number) => void // Callback when rating changes (optional) locked?: boolean // Whether the rating is locked (default: true) showScore?: boolean // Show score in brackets (e.g., 4.2/5) } const StarRating: React.FC = ({ initialValue = 0, onChange, locked = true, // Default to locked showScore = false, }) => { const [rating, setRating] = useState(initialValue) const roundedScore = Math.round((rating + Number.EPSILON) * 10) / 10 const handleClick = (value: number) => { if (!locked) { setRating(value) if (onChange) { onChange(value) } } } // Calculate fill for each star const getFill = (index: number) => { if (index <= Math.floor(rating)) return 1 if (index === Math.ceil(rating) && rating % 1 !== 0) return rating % 1 return 0 } // Generate unique ID for this star rating instance const instanceId = React.useId() return (

{[1, 2, 3, 4, 5].map((index) => ( handleClick(index)} locked={locked} starIndex={index} instanceId={instanceId} /> ))} {showScore && ( ({roundedScore}/5) )}

) } interface StarProps { fill: number // 0 to 1, how much of the star is filled onClick: () => void locked: boolean starIndex: number instanceId: string } const Star: React.FC = ({ fill, onClick, locked, starIndex, instanceId, }) => { const gradientId = \`star-gradient-\${instanceId}-\${starIndex}\` return ( ) } export StarRating `,children:(0,e.jsx)(n.code,{className:"language-tsx",children:`"use client" import React, { useState } from "react" interface StarRatingProps { initialValue?: number // Initial rating value (optional) onChange?: (value: number) => void // Callback when rating changes (optional) locked?: boolean // Whether the rating is locked (default: true) showScore?: boolean // Show score in brackets (e.g., 4.2/5) } const StarRating: React.FC = ({ initialValue = 0, onChange, locked = true, // Default to locked showScore = false, }) => { const [rating, setRating] = useState(initialValue) const roundedScore = Math.round((rating + Number.EPSILON) * 10) / 10 const handleClick = (value: number) => { if (!locked) { setRating(value) if (onChange) { onChange(value) } } } // Calculate fill for each star const getFill = (index: number) => { if (index <= Math.floor(rating)) return 1 if (index === Math.ceil(rating) && rating % 1 !== 0) return rating % 1 return 0 } // Generate unique ID for this star rating instance const instanceId = React.useId() return (

{[1, 2, 3, 4, 5].map((index) => ( handleClick(index)} locked={locked} starIndex={index} instanceId={instanceId} /> ))} {showScore && ( ({roundedScore}/5) )}

) } interface StarProps { fill: number // 0 to 1, how much of the star is filled onClick: () => void locked: boolean starIndex: number instanceId: string } const Star: React.FC = ({ fill, onClick, locked, starIndex, instanceId, }) => { const gradientId = \`star-gradient-\${instanceId}-\${starIndex}\` return ( ) } export StarRating `})})})]})})]}),` `,(0,e.jsx)(n.h2,{id:"usage",children:"Usage"}),` `,(0,e.jsx)(n.pre,{__rawstring__:`"use client" import * as React from "react" import { StarRating } from "@/registry/components/star-rating" export function Component() { return } `,children:(0,e.jsx)(n.code,{className:"language-tsx",children:`"use client" import * as React from "react" import { StarRating } from "@/registry/components/star-rating" export function Component() { return } `})}),` `,(0,e.jsx)(n.h2,{id:"api-reference",children:"API Reference"}),` `,(0,e.jsx)(n.h3,{id:"parameters",children:"Parameters"}),` `,(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:"Name"}),(0,e.jsx)(n.th,{children:"Type"}),(0,e.jsx)(n.th,{children:"Description"})]})}),(0,e.jsx)(n.tbody,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"prop"}),(0,e.jsx)(n.td,{children:"type"}),(0,e.jsx)(n.td,{children:"description"})]})})]})]})}function v(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(f,{...t})}):f(t)}function r(t,n){throw new Error("Expected "+(n?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}return I(N);})(); ;return Component;

Star Rating

Installation

Usage

API Reference

Parameters