How do I add this to my project?

Copy the install command and paste it into Claude Code. It handles everything - downloads the component, installs dependencies, and adds it to your project.

Can I customize the styling?

Yes! Just tell Claude Code what you want. Example: 'Change the gradient to blue' or 'Make the buttons rounded'. It will update the component for you.

How do I change the score colors?

The getScoreColor function at the top of the component maps scores to colors. Tell Claude Code what color scheme you want (like 'use blue for high scores instead of green') and it'll update the hex values for you.

Data Display

MemberPopular

Scoring Badge 1

A glowing verification badge that displays an overall score and category breakdowns with color-coded ratings from 1-10. Component used in Best Dubai.

Installation 30s

Run Claude Code then copy and paste this command

@5ds/framework

Locked for Members Only

Setup your account to install

Claude Code will install this into the /src/components folder in your project

Tell Claude Code where you want to use this

Description

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.

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

Join Dan, Zehra and 0 others building AI businesses in days with video tutorials and 1 on 1 support.

Used In

Best Dubai

Dependencies

@tabler/icons-reactshadcn/hover-card

These will be automatically installed when you add this component to your project.

AppWebsiteSaaSE-commDirectoryIdeaAI Business, In Days

Join 0 others building with AI