Rating

Display a rating or let people select a score using labelled stars.

CoreAdvanced Inputs@gaudi/design-system/core/RatingView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Rating } from '@gaudi/design-system/core/Rating';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/rating-display-options.json.

import { Rating } from '@gaudi/design-system/core/Rating';
<Rating aria-label='Rate this article' value={rating} onValueChange={setRating} />

Props

rating3

maxRatingdefault 5

editable

showValue

sizedefault default

Rating.jsx

import { Rating } from '@gaudi/design-system/core/Rating';
<Rating rating={3} />

8 props

Editable ratings expose keyboard-operable controls. Include enough text to explain the score and its range.