---
title: Star Ratings
page-header: Star Ratings
description:
  The star ratings HTML admin panel component is a user interface element that
  allows users to rate items using a star rating system. This component is
  commonly used in applications that allow users to rate products, services, or
  other items.
page-libs: [tabler-flags, star-rating.js]
menu: base.stars-rating
---

<div class="row row-cards">
	<div class="col-md-4">
		<div class="row row-cards">
			<div class="col-12">
				<div class="card">
					<div class="card-body">
						<div class="h3 card-title">Basic</div>
						<div>{% include "ui/rating.html" value=4 %}</div>
					</div>
				</div>
			</div>
			<div class="col-12">
				<div class="card">
					<div class="card-body">
						<div class="h3 card-title">Different icon</div>
						<div class="space-y">
							{% include "ui/rating.html" value=4 %}
							{% include "ui/rating.html" icon="heart-filled" value=4 color="red" %}
							{% include "ui/rating.html" icon="ghost-filled" value=4 color="azure" %}
							{% include "ui/rating.html" icon="circle-filled" value=4 color="green" %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="card">
			<div class="card-body">
				<div class="h3 card-title">Custom colors</div>
				<div class="space-y">
					{% include "ui/rating.html" id="color" value=3 %}
					{% include "ui/rating.html" id="color-primary" color="primary" value=3 %}
					{% include "ui/rating.html" id="color-red" color="red" value=3 %}
					{% include "ui/rating.html" id="color-lime" color="lime" value=3 %}
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="card">
			<div class="card-body">
				<div class="h3 card-title">Custom sizes</div>
				<div class="space-y">
					{% include "ui/rating.html" id="size-sm" value=3 size="sm" %}
					{% include "ui/rating.html" id="size-primary" value=3 %}
					{% include "ui/rating.html" id="size-red" value=3 size="md" %}
					{% include "ui/rating.html" id="size-lime" value=3 size="lg" %}
				</div>
			</div>
		</div>
	</div>
</div>