Components
Rating
A hand-drawn star rating with hover fill and hachure.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/rating.jsonProps
PropTypeDefaultDescription
classNamestring—
Additional Tailwind classes applied to the component.
defaultValuenumber0Initial uncontrolled value.
disabledboolean—
Disables interaction.
idstring—
Optional stable id used for sketch seeding and accessibility.
labelstring—
Optional label text shown with the component.
maxnumber5Upper bound for the value.
onChange(value: number) => void—
Callback fired when the value changes.
sizenumber24Controls the visual size of the component.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
valuenumber—
Controlled value for the component.
Sizes
Read only
Disabled
Accessibility
Rating uses button elements for each star, so keyboard focus still works. Pair the stars with a visible label or nearby text so the scale meaning is clear before a user selects a value.
Examples
import { Rating } from "@/components/crumble/ui/rating";
<Rating defaultValue={3} />;