Inline Email Form

Installation

Run the following command

npx vibes@latest add inline-email-form

Usage

import { InlineEmailForm } from '@/vibes/soul/sections/inline-email-form';import { parseWithZod } from '@conform-to/zod';import { z } from 'zod';function Usage() {  return (      <InlineEmailForm action={async (lastResult, formData) => {          'use server';                    const schema = z.object({              email: z.string().email(),          });          const submission = parseWithZod(formData, { schema });          if (submission.status !== 'success') {              return { lastResult: submission.reply({ formErrors: ['Boom!'] }) };          }          return { lastResult: submission.reply(), successMessage: 'Subscribed!' };      }} />  );}

API Reference

InlineEmailFormProps

PropTypeDefault
className
string
placeholder
string
submitLabel
string
action
Action<{ lastResult: SubmissionResult | null; successMessage?: string }, FormData>

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --inline-email-form-focus: var(--primary);  --inline-email-form-background: var(--background);  --inline-email-form-placeholder: var(--contrast-500);  --inline-email-form-text: var(--foreground);  --inline-email-form-border: var(--black);  --inline-email-form-error: var(--error);}