Uilora
Uilora.
Uilora
Uilora.
Content Blocks
Playground

RPG Select

RPG selection pricing section with game UI aesthetics.

pricingrpggameui

Props

Customize the component with these props

PropertyTypeDefaultDescription
title
stringSelect Your ClassSection 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#2d2a32Background color (hex, rgb, or hsl).
titleColor
string#ffd700Title text color.
activeBorderColor
string#ffd700Active role border color.
activeBgColor
string#3d3a42Active role background color.
inactiveBorderColor
string#4a4a52Inactive role border color.
inactiveBgColor
string#1e1c21Inactive role background color.
inactiveHoverBgColor
string#2a2830Inactive role hover background color.
roleNameColor
string#ffffffRole name text color.
activeRoleNameColor
string#ffd700Active role name text color.
priceColor
string#ffffffPrice text color.
priceSubtextColor
string#9ca3afPrice subtext color.
statLabelColor
string#ffffffStat label text color.
statBarBgColor
stringrgba(0,0,0,0.5)Stat bar background color.
speedBarColor
string#3b82f6Speed stat bar color.
powerBarColor
string#ef4444Power stat bar color.
buttonBgColor
string#ffd700Button background color.
buttonTextColor
string#000000Button text color.
buttonHoverBgColor
string#ffffffButton hover background color.
buttonText
stringEquipButton text.
RPG Select - Content Blocks Component | UILora