Browse components
Peek Rating
Star rating with a little character that peeks over the card, rising and grinning wider the higher you hover. Arrow keys, Home/End and digits work too.
Installation
npx shadcn@latest add @glint-ui/peek-ratingFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/peek-rating.json
Usage
import { PeekRating } from "@/components/ui/peek-rating";
const [stars, setStars] = useState(0);
<PeekRating value={stars} onChange={setStars} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | number | 0 | Initial rating when uncontrolled. |
| max | number | 5 | Number of stars. |
| color | string | "#facc15" | Star fill color. |
| characterColor | string | "#fb923c" | Color of the peeking character. |
| label | string | "Rating" | Accessible name of the rating. |
| labels | string[] | ["Awful","Meh","Okay","Good","Love it!"] | One word per rating step. |
| value | ReactNode | — | Controlled rating, pair with onChange. |
| onChange | ReactNode | — | Called with the new rating. |
| className | string | — | Extra classes for the root element. |