Neon Arcade
Neon arcade pricing section with retro gaming aesthetics.
Main Features of Neon Arcade
How to Use Neon Arcade in Next.js
Installation Guide for Neon Arcade
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
plans | Array<{name: string, price: number}> | [] | Array of pricing plans with name and price. |
features | string[] | [] | Array of feature strings to display. |
backgroundColor | string | #090014 | Background color (hex, rgb, or hsl). |
topGlowColor | string | #ff00ff | Top glow effect color. |
bottomPatternColor | string | #ff00ff | Bottom pattern color. |
cardGradientFrom | string | #00ffff | Card gradient start color. |
cardGradientTo | string | #ff00ff | Card gradient end color. |
cardBgColor | string | #1a0b2e | Card background color. |
cardBorderColor | string | rgba(255,0,255,0.3) | Card border color. |
iconBorderColor | string | #00ffff | Icon border color. |
iconShadowColor | string | #00ffff | Icon shadow color. |
iconColor | string | #00ffff | Icon color. |
planNameColor | string | #ff00ff | Plan name text color. |
priceColor | string | #ffffff | Price text color. |
featureTextColor | string | #00ffff | Feature text color. |
featureCheckColor | string | #ff00ff | Feature check color. |
buttonBgColor | string | #ff00ff | Button background color. |
buttonHoverBgColor | string | #00ffff | Button hover background color. |
buttonHoverTextColor | string | #090014 | Button hover text color. |
buttonShadowColor | string | #ff00ff | Button shadow color. |
buttonText | string | PLAY NOW | Button text. |
Related Components
When to Use
Excellent for gaming communities, retro-themed apps, and Next.js experiences that want a high-impact 'Arcade' feel. Use this React component for a neon-drenched pricing section with retro-gaming aesthetics and glowing interaction states.
Best Practices
Maintain scalable component architecture by keeping foreground text bright and readable. Follow React best practices by pairing this with deep purple or black backgrounds. Optimize for performance by managed the glow filters for mobile views.
Why This Component Matters in Modern UI Development
Neon aesthetics create a sense of energy and playfulness that increases user engagement. This production-ready component helpsคุณ build an interface that feels energetic and nostalgic, turning standard pricing into a 'game start' screen.
Frequently Asked Questions
QHow does the glow handle hover?
The entire card border and the main action button intensify their neon pulse whenever a user interacts with the tier.
QCan I use custom icons?
The component is built to use Lucide-React icons, which are automatically wrapped in a glowing hexagonal or circular border to match the theme.
QIs the scanline pattern customizable?
Yes, the frequency and opacity of the retro-CRT scanline effect can be controlled to create anything from light nostalgia to heavy retro-vibes.