@vaidik2473/kern-contact

Contact form addon for KERN (Next.js + Payload CMS).

Installation

bun add @vaidik2473/kern-contact

Usage

Forms (Client)

import { Variant1, Variant2, Variant3 } from '@vaidik2473/kern-contact';

// Standard form (name, email, message)
<Variant1 action="/api/contact" />

// Two-column layout (first/last name, email/phone, subject, message)
<Variant2 action="/api/contact" />

// Minimal (email + message only)
<Variant3 action="/api/contact" />

Send Functions (Server)

// app/api/contact/route.ts
import { resend_send } from '@vaidik2473/kern-contact/send';

export async function POST(req: Request) {
  const { name, email, message } = await req.json();

  await resend_send({
    apiKey: process.env.RESEND_API_KEY!,
    from: '[email protected]',
    to: '[email protected]',
    subject: `New message from ${name}`,
    html: `<p>${message}</p><p>From: ${email}</p>`,
  });

  return Response.json({ success: true });
}

SMTP

import { smtp_send } from '@vaidik2473/kern-contact/send';

await smtp_send({
  host: 'smtp.example.com',
  port: 587,
  user: 'username',
  pass: 'password',
  from: '[email protected]',
  to: '[email protected]',
  subject: 'Contact Form',
  html: '<p>Message here</p>',
});

Nodemailer

import { nodemailer_send } from '@vaidik2473/kern-contact/send';

await nodemailer_send({
  host: 'smtp.example.com',
  port: 587,
  user: 'username',
  pass: 'password',
  from: '[email protected]',
  to: '[email protected]',
  subject: 'Contact Form',
  html: '<p>HTML message</p>',
});

Form Props

| Prop | Type | Description | |------|------|-------------| | action | string | API endpoint to POST to | | className | string | Custom class for styling | | onSuccess | () => void | Called on successful submit | | onError | (err) => void | Called on error |

Styling

Forms use shadcn/ui compatible CSS variables. If your project has shadcn configured, forms inherit your theme automatically.

Variables used: --background, --foreground, --primary, --primary-foreground, --input, --border, --ring, --muted-foreground

Override with className prop if needed.

License

MIT