Rating

Code

import { Rating } from "@fadymondy/nasaq/web";export function AppRating() {  return <Rating value={4.8} count={2140} countLabel="workspaces" />;}

Storefront · beta

Live examples and controls: Rating in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/rating.json

Shows an average score as a single star, the number, and optionally how many people rated or use the thing: "★ 4.8 · 2.1K workspaces". It is one star, not five, because a row of part-filled stars is hard to read at small sizes and says nothing the number does not. It is read-only.

When to useCopy Anchor Link

• A store listing, product card or app detail header.
• An average score with an optional count.

When not to useCopy Anchor Link

• Collecting a rating from the user: build it with buttons or a radio group; Rating is display only.
• A status or state: use Status.
• A label such as "New" or "Pro": use Badge.

ImportCopy Anchor Link

import { Rating, type RatingProps } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { Rating } from "@fadymondy/nasaq/web";

export function AppRating() {
  return <Rating value={4.8} count={2140} countLabel="workspaces" />;
}

AnatomyCopy Anchor Link

Rating                  data-slot="rating"   <span>
├─ sr-only text         full sentence for screen readers
├─ star                 lucide Star, aria-hidden
├─ score                <bdi>, one decimal
└─ count (optional)     "·", <bdi> compact count, countLabel; aria-hidden

APICopy Anchor Link

RatingCopy Anchor Link

RatingProps extends Omit<ComponentProps<"span">, "children">. Remaining props go to the outer <span>.

ExamplesCopy Anchor Link

Score onlyCopy Anchor Link

import { Rating } from "@fadymondy/nasaq/web";

export function Score() {
  return <Rating value={4.6} />;
}

Arabic listingCopy Anchor Link

import { NasaqProvider, Rating } from "@fadymondy/nasaq/web";

export function ArabicRating() {
  return (
    <NasaqProvider locale="ar" dir="rtl">
      <Rating value={4.8} count={2140} countLabel="مساحة عمل" />
    </NasaqProvider>
  );
}

AccessibilityCopy Anchor Link

• A sr-only sentence carries the meaning: "Rated 4.8 out of 5, 2.1K workspaces". The visible star, score and count are aria-hidden so they are not read twice.
• Without a NasaqProvider the sentence is English. With an ar locale it reads in Arabic ("التقييم 4.8 من 5").
• No keyboard interaction; it is not focusable.
• Localise countLabel yourself.

RTL & i18nCopy Anchor Link

• Layout uses inline-flex and logical spacing (me-1.5), so the star stays on the inline start in both directions.
• The score and count are wrapped in <bdi>, so digits keep their order inside Arabic text.
• Numbers go through the Nasaq number formatter (useFormatNumber), so the numeral set and compact notation follow the active locale.
• Built-in strings: the screen reader sentence in English and Arabic. countLabel is yours.

Styling & tokensCopy Anchor Link

• Tokens: text-nq-accent (star, filled), text-muted-foreground (count), text-foreground (score), text-caption.
• Target with [data-slot=rating].
• Extend with className. The count truncates when space is tight.

Do / Don'tCopy Anchor Link

• Do pass a countLabel when you pass count, so the number means something.
• Do keep the star single; it reads at every size.
• Don't use it as an input.
• Don't show a score without saying what it averages when it is not obvious.

RelatedCopy Anchor Link

• Price · ProductCard · Badge

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-storefront-rating--docs