Ratings

The ratings component allows users to view and/or set a star rating for a product or a service.

Customer reviews

4.1 out 5based on 147 user ratings75%11275%1775%1275%275%4

Variations

Basic

Customer reviews

4.1 out 5based on 42 user ratings
copydone

Customer reviews

4.1 out 5 based on 42 user ratings
copydone

List

Service

Price

Quality

Availability

Location

copydone

Best UI library I've ever tried!

Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.

Best UI library I've ever tried!

Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.

Best UI library I've ever tried!

Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.

copydone

Detailed

Customer reviews

4.1 out 5based on 147 user ratings75%112 75%17 75%12 75%2 75%4
copydone

Customer reviews

4.1 out 5 based on 42 user ratings75%112 75%17 75%12 75%2 75%4
copydone

Brand

4.1 out 5based on 42 user ratings
copydone
4.1 out 5 based on 42 user ratings
copydone

Card

Customer reviews

4.1 out 5based on 42 user ratings
copydone

Customer reviews

4.1 out 5 based on 42 user ratings
copydone

Card List

Servive

Price

Quality

Availability

Location

copydone

Best UI library I've ever tried!

Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.

Best UI library I've ever tried!

Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.

Best UI library I've ever tried!

Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.

copydone

Card Detailed

Customer reviews

4.1 out 5based on 147 user ratings75%11275%1775%1275%275%4
copydone

Customer reviews

4.1 out 5 based on 42 user ratings75%11275%1775%1275%275%4
copydone

Card Brand

4.1 out 5based on 42 user ratings
copydone
4.1 out 5 based on 42 user ratings
copydone

Usage

Use the rating component to:

  • To display a user's rating for a product, app, service etc, and thus notify other users about the product's quality.
  • To provide details on how the product or service is rated (with the detailed variation) and also feedback on what's the total number of rates.

Specs

The rating component include the following elements:

  • Star icon: 1.5rem (24px) in width and heigh (or 1rem (16px) for the list variation)t. Star ratings have 5 available stars. This shouldn’t be increased or decreased to fit various containers.
  • Feedback: additional text that provides more information about the rating (exact score, number of rates etc). Text can be 0.875rem (14px) or 0.75rem (12px).
  • Progress bars: see progress bars.

Accessibility notes

For more accessible ratings:

  • Use aria-label on the wrapper <span> to notify screen readers on the exact rating.
  • Use aria-hidden=”true” on the star svgs to indicate that the element is not exposed to the accessibility API.

Check out the latest release!