DevFund Component Registry

Payment QR code components with multiple beautiful variants

Installation

npm install @devfund/component-registry

CLI Usage (Recommended)

Generate payment QR components directly in your project with a simple command.

Generate a Component

npx devfund <variant>

Available variants:

• card - Classic card-style modal with rounded corners and shadow
• minimal - Clean and minimal design with dark button
• glass - Modern glassmorphism design with backdrop blur
• modern - Modern dark-themed design with gradient background
• modal - Standard modal with centered layout

Example

# Generate a card variant component
npx devfund card

This will create a file at components/devfund/CardPaymentQR.tsx in your project.

Using the Generated Component

import CardPaymentQR from '@/components/devfund/CardPaymentQR';

export default function Page() {
  return (
    <div>
      <h1>Support Me</h1>
      <CardPaymentQR username="zaid" />
    </div>
  );
}

The component will automatically:

1. Fetch user data from https://devfund.app/api/profile/{username}
2. Display the user's QR code in a beautiful modal
3. Show loading and error states
4. Handle all interaction logic

Component Props

All generated components accept a single required prop:

• username (string, required): The DevFund username to fetch payment details for

Programmatic Usage

You can also use the registry programmatically in your code.

Get all variants

import { componentVariants, getVariantNames } from '@devfund/component-registry';

// Get all available variant names
const variants = getVariantNames();
// ['card', 'minimal', 'glass', 'modern', 'modal']

// Get specific variant
const cardVariant = componentVariants.card;
console.log(cardVariant.name); // "Card Variant"
console.log(cardVariant.code); // Full component code

Generate component with user data

import { generateComponent } from '@devfund/component-registry';

const code = generateComponent('card', {
  displayName: 'John Doe',
  upiId: 'john@okaxis',
  qrCodeUrl: 'https://example.com/qr.png'
});

// Returns complete React component with user data injected

Access variant metadata

import { componentVariants } from '@devfund/component-registry';

const variant = componentVariants.glass;

console.log(variant.name);        // "Glass Morphism"
console.log(variant.description); // "Modern glassmorphism design..."
console.log(variant.tags);        // ["modal", "glass", "modern", "blur"]
console.log(variant.code);        // Full React component code

Available Variants

Card

Classic card-style modal with rounded corners and shadow.

Minimal

Clean and minimal design with dark button.

Glass

Modern glassmorphism design with backdrop blur.

Modern

Modern dark-themed design with gradient background.

Modal

Standard modal with centered layout.

API Reference

CLI Commands

npx devfund <variant>

Generates a component file in components/devfund/ directory.

componentVariants

Object containing all component variants with their metadata.

getVariant(name: VariantType)

Get a specific variant by name.

getVariantNames()

Get array of all available variant names.

generateComponent(variantName, userData)

Generate component code with user data injected.

Parameters:

• variantName: One of: 'card', 'minimal', 'glass', 'modern', 'modal'
• userData: Object with displayName, upiId, qrCodeUrl

Returns: String containing the complete React component code.

Requirements

• React 18+
• Next.js 13+ (for "use client" directive)
• Tailwind CSS (for styling)

Backend API

Components automatically fetch data from the DevFund API. See API.md for complete API documentation.

TypeScript Support

Full TypeScript support with type definitions included.

import { VariantType, ComponentVariant } from '@devfund/component-registry';

License

MIT