RPG Select
RPG selection pricing section with game UI aesthetics.
Main Features of RPG Select
How to Use RPG Select in Next.js
Installation Guide for RPG Select
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
title | string | Select Your Class | Section title text. |
roles | Array<{name: string, price: number, image?: string, speed?: number, power?: number}> | [] | Array of pricing roles with name, price, optional image, speed, and power stats. |
backgroundColor | string | #2d2a32 | Background color (hex, rgb, or hsl). |
titleColor | string | #ffd700 | Title text color. |
activeBorderColor | string | #ffd700 | Active role border color. |
activeBgColor | string | #3d3a42 | Active role background color. |
inactiveBorderColor | string | #4a4a52 | Inactive role border color. |
inactiveBgColor | string | #1e1c21 | Inactive role background color. |
inactiveHoverBgColor | string | #2a2830 | Inactive role hover background color. |
roleNameColor | string | #ffffff | Role name text color. |
activeRoleNameColor | string | #ffd700 | Active role name text color. |
priceColor | string | #ffffff | Price text color. |
priceSubtextColor | string | #9ca3af | Price subtext color. |
statLabelColor | string | #ffffff | Stat label text color. |
statBarBgColor | string | rgba(0,0,0,0.5) | Stat bar background color. |
speedBarColor | string | #3b82f6 | Speed stat bar color. |
powerBarColor | string | #ef4444 | Power stat bar color. |
buttonBgColor | string | #ffd700 | Button background color. |
buttonTextColor | string | #000000 | Button text color. |
buttonHoverBgColor | string | #ffffff | Button hover background color. |
buttonText | string | Equip | Button text. |
Related Components
When to Use
Ideal for gaming dashboards, community platforms, and Next.js sites that want a 'Class Selection' feel. Use this React component for a pricing section where plans are displayed as RPG character classes with dynamic stat bars.
Best Practices
Maintain consistent spacing within your design system by using it on dark, atmospheric backgrounds. Follow React best practices by pairing it with fantasy or high-tech character art. Optimize for performance by using width-based transitions for the stat bars.
Why This Component Matters in Modern UI Development
Stat bars and character classes make choosing a plan feel like part of a journey. This production-ready component helpsคุณ build an interface that feels interactive and rewarding, increasing user emotional connection to their selected tier.
Frequently Asked Questions
QWhat do the stat bars show?
The component includes 'Speed' and 'Power' bars that animate in based on the numerical values passed in the `roles` array.
QCan I add more stats?
Yes, the internal grid can be easily extended to include more stats like 'Defense', 'Luck', or 'Mana' to fit your project's gaming theme.
QIs the character image required?
The `image` prop is optional; if omitted, the component focuses on the role name, price, and stat breakdown.