export const title = "Rating badge and stars"
export const description = "Free and open-source React rating badge and star components built for modern applications and websites. These rating badge and stars are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/blob/main/components/foundations/rating-badge.tsx",
}

import { RatingStars } from "@/components/foundations/rating-stars";
import { RatingBadge } from "@/components/foundations/rating-badge";

<PreviewAndCode title="Rating badge example">
    <ResizablePreview id="preview" className="flex items-center justify-center px-4 md:px-8 py-32 rounded-[20px] ring-1 ring-secondary bg-primary">
        <RatingBadge rating={5} title="Best Design Tool" subtitle="2,000+ reviews" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { RatingBadge } from "@/components/foundations/rating-badge";

        <RatingBadge rating={5} title="Best Design Tool" subtitle="2,000+ reviews" />
        ```
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this rating badge and stars component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add rating-badge
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="foundations/rating-badge" filepath="rating" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the illustrations components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Rating badge and stars examples

Below are examples and variations of this rating badge and stars component:


### Rating stars

Rating stars are used to display the rating of a product, service, or anything else. You can change the rating (between 0 and 5) of the rating stars component by passing the `rating` prop.

<PreviewAndCode title="Rating stars example">
    <ResizablePreview id="preview" className="flex items-center justify-center px-4 md:px-8 py-32 rounded-[20px] ring-1 ring-secondary bg-primary">
        <RatingStars rating={3.5} />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { RatingStars } from "@/components/foundations/rating-stars";

        <RatingStars rating={3.5} />
        ```
    </TabPanel>
</PreviewAndCode>

### Rating badge

This rating badge is especially useful for displaying awards, ratings, and reviews. 

You can customize the rating badge by passing the `rating` prop. In addition, you can also change the title and subtitle of the rating badge by passing the `title` and `subtitle` props.

<PreviewAndCode title="Rating badge example">
    <ResizablePreview id="preview" className="flex items-center justify-center px-4 md:px-8 py-32 rounded-[20px] ring-1 ring-secondary bg-primary">
        <RatingBadge rating={4.7} title="Best Design Tool" subtitle="2,000+ reviews" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```tsx
        import { RatingBadge } from "@/components/foundations/rating-badge";

        <RatingBadge rating={4.7} title="Best Design Tool" subtitle="2,000+ reviews" />
        ```
    </TabPanel>
</PreviewAndCode>