Scoring Badge 1
A glowing verification badge that displays an overall score and category breakdowns with color-coded ratings from 1-10.
This is a scoring card with an animated gradient border that rotates around the edges.
The overall score gets a big, color-coded number (green for 9+, yellow for mid-range, red for low scores). Below that, you get a breakdown of individual category scores with matching color badges.
Pass in your scoring data through the scoringData prop and customize the explanation text that appears in the hover card. The component automatically color-codes everything based on the score values.
The border animation uses CSS keyframes for smooth rotation, and the hover card (via shadcn) explains your scoring methodology to users.
Install Component
Run Claude Code then copy and paste this command
Sign In to Build
Join with a free account
Claude Code will install this into the /src/components folder in your project
Tell Claude Code where you want to use this
Key Features
Animated glowing border with rotating gradient
Color-coded scores (green to red based on 1-10 scale)
Category breakdown with individual score badges
Hover card explaining your scoring methodology
Fully customizable scoring data and explanations
Use Cases
Displaying restaurant or business ratings with category breakdowns
Showing product quality scores across different attributes
Adding verified review scores to listing pages
Building trust with transparent scoring explanations
Frequently Asked Questions
Dependencies
These will be automatically installed when you add this component to your project.