Basic widget
Star Rating
A score shown as stars, with halves, an optional label and the number.
Build it with your AI
“Add a 4.8 out of 5 star rating with the label “Rated by 1,200 customers”.”
Live demo
See it working
Settings
19 settings in three tabs
Every setting below is in the editor — and available to your AI through get_widget_schema.
9 settings
Rating
Scale
Rating
Icon
Unmarked style
Title
Show number
Number format
Layout
Alignment
Design
10 settings
Stars
Size
Spacing
Marked color
Unmarked color
Corner roundness
Title & number
Title typography
Title color
Spacing
Number typography
Number color
Behaviour
shared
On every element
Spacing & position
Background & border
Animations
Motion & effects
Scroll & mouse effects
Visibility
Conditions
Interactions
Attributes & CSS
Build it with AI
Just describe what you want
Your AI looks up the Star Rating settings over MCP and writes the element for you — real, editable and on brand.
Claude · connected to your site
You
Add a 4.8 out of 5 star rating with the label “Rated by 1,200 customers”.
Claude · using Uncoder
Done — it’s on your site and fully editable.
What the AI writes
{ "type": "star-rating", "settings": { "rating": 5 } }More basic widgets
Works well with
Alert
A friendly notice for news, warnings and success messages.
Blockquote
A quote that stands out, with its author and source.
Button
A link that looks like a button, in your Design System’s styles: primary, secondary, outline, ghost or link.
Counter
A number that counts up when it scrolls into view — and stays readable for search engines.
Divider
A line between sections, plain or with a word or icon in the middle.
Heading
Titles from h1 to h6, sized by your text styles, with a second font for words in italics.