Published on webcomponents.org

Star Rating (native) WebComponent

Webcomponent (native) for displaying star ratings without Polymer or other dependecies.


Demo and Playground Page here ...


Install with NPM for your local development environment.

npm i webcomponent-star-rating

OR: Paste the import link in your "head" section.

<link rel="import" href="https://davitmdesign.github.io/wc-star-rating/star-rating.html">


To display the stars, you must place the element to your "body section".

<star-rating width="280" score="50%" colors="#ddd,#f1cb1"></star-rating>

That's it.

Possible attributes

width="400" | score="50%" | colors="#aaa,#333"


<star-rating width="160" score="2.5"></star-rating>
<star-rating width="220" score="4" colors="grey,red"></star-rating>
<star-rating width="300" score="50%" colors="#BDBDBD,#B8860B"></star-rating>
attributes values
width 200 required
score 50%, 3, 4.5 required
colors name or hex (grey,#ffff00) optional


  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D


Link to this version
ImportedReleased 30 November 2018ISC License
Framework Support
Browser Independent
Install with
npm install webcomponent-star-rating"@2.0.5"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.0.5