---
title: "Rating Stars — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Mohd Qasim · Buttons. Beautiful animated star rating component"
canonical: "https://framer.elliotli.dev/component/rating-stars"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Rating Stars

# Rating Stars

Beautiful animated star rating component

[View on Framer](https://framer.com/marketplace/components/rating-stars/?via=elliot-li)

![Rating Stars preview image 1](https://framer.elliotli.dev/og/component/rating-stars/7fc9ccb0500fca20/1600x1200.jpg)

## Summary

Beautiful animated star rating component

## Description

## Use code NEW10 to receive 10% off on all my components.

## ⭐ Overview

A production-ready Framer code component that delivers a smooth, animated star rating interface with dark mode support and complete customization options.

## 🎨 Visual Features

-   **Dotted Star Outlines** - Empty stars display with elegant dotted borders
    
-   **Yellow Fill Color** - Bright golden stars (#fbbf24) on selection
    
-   **Dark Mode by Default** - Launches with sleek dark background (#1a1a1a)
    
-   **Smooth Animations** - 135% scale on hover, 125% on click with bouncy easing
    
-   **Shadow Effects** - Subtle golden glow on selected stars
    

## 🎯 Interactive Behavior

-   **Progressive Fill** - Hover to preview rating, all stars up to cursor fill
    
-   **Single-Line Layout** - Stars stay in one horizontal row at all sizes
    
-   **Fast Response** - 150ms animations for instant feedback
    
-   **Click to Select** - Rate with a click, click again to deselect
    
-   **Touch-Friendly** - Optimized for mobile devices
    

## 🌓 Dark Mode Toggle

-   **Built-in Switch** - Toggle button in top-right corner
    
-   **Sun/Moon Icons** - Clear visual indicators
    
-   **Show/Hide Option** - Removable via property controls
    
-   **Smooth Transitions** - 300ms background color fade
    

## 📱 Responsive Design

-   **Fully Adaptive** - Works on desktop, tablet, and mobile
    
-   **User Resizable** - Drag handles to adjust container size
    
-   **No Breakpoints Needed** - Automatically scales to any screen
    
-   **Flexible Layout** - Fills parent container perfectly
    

## 🎛️ Customization Controls

-   **Star Options** - Count (1-10), size (20-100px), spacing (4-40px)
    
-   **Colors** - Background, dark background, outline, fill, stroke
    
-   **Styling** - Border radius (0-50px), stroke width (1-4px), padding
    
-   **Defaults** - Pre-selected star index, dark mode toggle visibility
    

## ✨ Technical Highlights

-   **Framer Motion** - Buttery-smooth spring animations
    
-   **SVG Stars** - Crisp at any resolution
    
-   **TypeScript Ready** - Full type safety
    
-   **Property Panel** - All settings accessible in Framer UI
    
-   **Zero Dependencies** - Just React and Framer Motion
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #10130

## Details

- **Author**: Mohd Qasim
- **Price**: $3.00
- **Published**: 2025-11-25
- **Updated**: 2026-02-04
- **Added**: 2025-11-20
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything