Lumina
Luminous dashboard with glowing effects and light-based design elements.
Main Features of Lumina
How to Use Lumina in Next.js
Installation Guide for Lumina
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
glowColor | string | #fbbf24 | Luminous glow color (gold/yellow). |
glowIntensity | number | 1 | Intensity of glow effects (0-2). |
backgroundColor | string | #0a0a0a | Dark background for glow contrast. |
enableGlow | boolean | true | Enable luminous glow effects. |
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QHow does the 'Glow' work?
The component uses layered box-shadows and CSS filters (`glowColor`) to simulate localized environmental lighting around primary modules.
QCan I adjust the brightness?
Yes, the `glowIntensity` prop (0-2) allows you to control the 'Heat' of the luminous effects across the entire dashboard.
QIs it accessible?
While glowy, the primary text remains high-contrast against the `backgroundColor` to ensure legibility is never sacrificed for aesthetics.