# Star ratings > The average and how the stars split. Sample data: reviews averaging 4.3, 1,412 five-star and 82 one-star. - Type 093 ยท Distribution - Component: ``, the same name as the Figma component - Install: `npx shadcn add @chartory/star-ratings` (free in Hearth: the public registry, no token; Signal with Code and Complete) - Type page: https://usechartory.com/charts/star-ratings ## Installation 1. **Set up the registry once.** This chart is free in Hearth and MIT licensed: no token. Add @chartory to components.json once (the URL alone, no headers), or skip this when another chart is already installed. [Installation guide](https://usechartory.com/docs/installation) 2. **Add the chart.** One command adds the Star ratings component to your project. ```bash npx shadcn add @chartory/star-ratings ``` 3. **Use it.** Pass your rows. The props are the Figma properties. usage.tsx: ```tsx import { StarRatings } from "@/components/chartory/star-ratings" ``` ## Props ### `` Every prop but data is a Figma property with the same name and values. | Prop | Type | Default | Note | | --- | --- | --- | --- | | data | StarRatingsData | Required | The chart's data. The tables below list every field. | | size | "xs" \| "s" \| "m" \| "l" | "m" | The size class. Each one is laid out again from the data. | ### StarRatingsData The data prop: one object for the whole chart. | Prop | Type | Default | Note | | --- | --- | --- | --- | | avg | number | Required | The average. | | rows | [number, number][] | Required | One entry per row. | ## Star ratings chart: a React and Figma chart in four sizes ### What does a star ratings chart show? A star ratings chart shows the average rating with a bar for each star level and its count, so a 4.3 made of many fives and a few ones reads differently from one made of fours. Use it for reviews, app ratings and feedback scores. Chartory ships it as a Figma component and a React component with the same name. The code installs from the shadcn registry with one command and lands in your project as a file you own. ### What is the Star ratings component? It is one **** component. Its props are the Figma properties with the same names and values, and the props table above lists them. The data is a count per star level. Sizes **XS**, **S**, **M** and **L** re-lay the chart out from the data instead of scaling it, so labels stay readable at every size. ### When should I use it? - **Is it a rating scale?** Yes means the star ratings fit. - **Is it one product?** Yes means the star ratings fit. - **Is the split the point?** Yes means the star ratings fit. ### When does another type fit better? - **Agree and disagree answers.** Use Likert instead. - **Several products' ratings.** Use Horizontal bars instead. - **Just the average over time.** Use Line chart instead. ## Star ratings questions ### Does the Star ratings chart work with shadcn/ui? Yes. It installs through the shadcn registry with the shadcn CLI, and the file lands in your project. ### How do I install it? It is free in Hearth and MIT licensed: add the @chartory registry URL once, no token, then run npx shadcn add @chartory/star-ratings. The Installation guide has the steps. ### Can my coding agent install it? Yes. Connect the Chartory MCP server and ask for the star ratings chart; the agent runs the same command and you review the diff. ### What data does it expect? A count per star level. The sample data comes with the component, and the props table lists every field. ### Which sizes does it ship in? XS, S, M and L, in Figma and in code. Each size is laid out again from the data, so text and lines keep their size. ### Is it in the Figma file too? Yes. chart/093-ratings-reviews has the same properties as the component. ### Does it follow light and dark mode? Yes. Every paint is a token, so the chart follows light and dark mode and the collection you pick. ### Which plan has the code? None for Hearth: it is free in the public registry, no token. The Signal collection (@chartory/signal) comes with Code and Complete.