---
type: doc
title: Rating
description: Native Liquid rating with readable CSS and shared data-slot parts.
---

> Native Liquid and CSS. Install from `https://ui.full.dev/r/liquid/{name}.json`; see [layout setup](/liquid/docs/installation.md). No Tailwind or consuming build.

```liquid title="liquid/examples/rating.liquid"
<div data-slot='rating' aria-label='Example rating: 4 out of 5' role='img'>
  {% for number in (1..5) %}
    <span class='rating__star' aria-hidden='true'>
      <svg viewBox='0 0 24 24' fill='currentColor'>
        <path d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1Z"/>
      </svg>
      {% if number < 5 -%}
        <span class='rating__fill'>
          <svg viewBox='0 0 24 24' fill='currentColor'>
            <path d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1Z"/>
          </svg>
        </span>
      {%- endif %}
    </span>
  {% endfor %}
  <span>Example rating</span>
</div>
```

## Installation

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/rating.json
```

Follow the [one-time layout setup](/liquid/docs/installation/). A full `components` install already includes this item.

## Usage

After this install, render these once in the layout head before theme overrides and other modules. The full `ui` hook already includes them. The command also installs the parts used in this example.

```liquid
{% render 'ui-init' %}
{% render 'ui-rating' %}
```

The preview and its Usage tab render the same native Liquid source. Use `data-slot` for parts, `data-variant` for variants and `data-size` for sizes. Keep your store's labels, translations and Shopify data in your theme.

## Parts

`rating`.

[Component source](https://github.com/fulldotdev/ui/tree/main/liquid/components/rating.liquid) · [Theming](/liquid/docs/theming/)

## Install what this page shows

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/rating.json
```