Lumen Variant Documentation

Overview

The Lumen variant is a bright, vibrant payment component designed for DevFund. It features lively accent colors, rounded corners, and a modern layout optimized for clarity and engagement.

Features

• Bright and Vibrant Accents: Uses a luminous color palette for high visibility and energy.
• Rounded Corners: Soft, approachable design with smooth edges.
• Modern Layout: Clean, spacious arrangement for easy scanning and interaction.
• UPI QR Code Support: Displays a UPI QR code for instant payments.
• Responsive Design: Works well on both desktop and mobile devices.

Usage

To generate a Lumen payment component, use the CLI:

shCopy
npx devfund@latest lumen

Example

jsxCopy
<LumenPayment username="your-username" />

Props

Preview

Customization

• You can customize the accent color and text via the CLI or by editing the generated component.
• The QR code is automatically generated for your UPI ID.

Accessibility

• High contrast colors for readability
• Keyboard and screen reader friendly

Example Button

htmlCopy
<button class="inline-flex items-center gap-2 bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-semibold px-6 py-3 rounded-lg shadow-md hover:shadow-lg transition">
  💛 Support Username
</button>

Related Variants

• Card
• Glass
• Minimal
• Modern
• Modal
• Cherry Blossom
• Ocean Frutiger

---

For more details, see the DevFund Documentation.