@mantlz/nextjs

v0.6.2

Published

4 months ago

TypeScript-native form backend service for NextJS

Downloads

0High
0Medium
0Low

artistatbl

forms nextjs typescript zod validation

@mantlz/nextjs

A TypeScript-native form backend service for Next.js applications. Build beautiful, customizable forms with built-in validation, theming, and analytics.

Features

🎨 Multiple Themes: Built-in themes (default, modern, neobrutalism, simple)
🌙 Dark Mode: Automatic dark mode support
📱 Responsive: Mobile-first responsive design
🔧 TypeScript: Full TypeScript support with type safety
🎯 Form Types: Support for waitlist, contact, feedback, survey, application, order, and custom forms
📊 Analytics: Built-in form analytics and submission tracking
🔒 Validation: Zod-powered form validation
🎨 Customizable: Extensive theming and styling options
📁 File Uploads: Support for file uploads with drag-and-drop

Installation

npm install @mantlz/nextjs
# or
yarn add @mantlz/nextjs
# or
pnpm add @mantlz/nextjs

Quick Start

Set up the provider in your root layout:

import { MantlzProvider } from '@mantlz/nextjs';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <MantlzProvider apiKey="your-api-key">
          {children}
        </MantlzProvider>
      </body>
    </html>
  );
}

Use the Mantlz component:

import { Mantlz } from '@mantlz/nextjs';

export default function ContactPage() {
  return (
    <div className="container mx-auto p-4">
      <Mantlz formId="your-form-id" />
    </div>
  );
}

Form Examples

Basic Form

import { Mantlz } from '@mantlz/nextjs';

export default function BasicForm() {
  return <Mantlz formId="your-form-id" />;
}

Waitlist Form with User Count

import { Mantlz } from '@mantlz/nextjs';

export default function WaitlistForm() {
  return (
    <Mantlz
      formId="your-waitlist-form-id"
      showUsersJoined={true}
      usersJoinedCount={1250}
      usersJoinedLabel="developers have joined"
    />
  );
}

Themed Form

import { Mantlz } from '@mantlz/nextjs';

export default function ThemedForm() {
  return (
    <Mantlz
      formId="your-form-id"
      theme="neobrutalism"
    />
  );
}

Custom Styled Form

import { Mantlz } from '@mantlz/nextjs';

export default function CustomForm() {
  return (
    <Mantlz
      formId="your-form-id"
      appearance={{
        variables: {
          primaryColor: '#6366f1',
          backgroundColor: '#f8fafc',
          borderRadius: '12px',
        },
        elements: {
          container: 'max-w-lg mx-auto p-8 bg-white rounded-xl shadow-lg',
          title: 'text-3xl font-bold text-gray-900 mb-6',
          description: 'text-gray-600 mb-8',
          input: 'w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent',
          button: 'w-full bg-indigo-600 text-white py-3 px-6 rounded-lg hover:bg-indigo-700 transition-colors font-semibold',
        }
      }}
    />
  );
}

Theming and Customization

Built-in Themes

The SDK includes several built-in themes:

default: Clean, minimal design
modern: Contemporary styling with subtle shadows
neobrutalism: Bold, high-contrast design
simple: Minimal styling for maximum customization

<Mantlz
  formId="your-form-id"
  theme="neobrutalism"
/>

Custom Appearance

You can customize every aspect of your forms using the appearance prop:

<Mantlz
  formId="your-form-id"
  appearance={{
    variables: {
      primaryColor: '#6366f1',
      backgroundColor: '#ffffff',
      borderRadius: '8px',
      fontFamily: 'Inter, sans-serif',
    },
    elements: {
      container: 'max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg',
      title: 'text-2xl font-bold text-gray-900 mb-4',
      description: 'text-gray-600 mb-6',
      input: 'w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500',
      button: 'w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 transition-colors',
      error: 'text-red-600 text-sm mt-1',
      success: 'text-green-600 text-sm mt-1',
    }
  }}
/>

Form Types

Mantlz supports various form types that you can configure in your dashboard:

waitlist: Email collection with optional user count display
contact: Contact forms with customizable fields
feedback: Feedback collection with rating systems
survey: Multi-step surveys with conditional logic
application: Job applications and form submissions
order: Product ordering forms
analytics-opt-in: GDPR-compliant analytics consent
rsvp: Event RSVP forms
custom: Fully customizable forms

API Reference

Mantlz Component Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | formId | string | ✅ | Unique identifier for your form | | theme | 'default' \| 'modern' \| 'neobrutalism' \| 'simple' | ❌ | Built-in theme to use | | appearance | AppearanceConfig | ❌ | Custom styling configuration | | showUsersJoined | boolean | ❌ | Show user count for waitlist forms | | usersJoinedCount | number | ❌ | Custom user count (overrides API value) | | usersJoinedLabel | string | ❌ | Custom label for user count | | redirectUrl | string | ❌ | URL to redirect after successful submission |

MantlzProvider Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | apiKey | string | ✅ | Your Mantlz API key | | baseUrl | string | ❌ | Custom API base URL | | children | ReactNode | ✅ | Your app components |

Documentation

For detailed documentation and examples, visit: https://docs.mantlz.com

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@mantlz/nextjs

Features

Installation

Quick Start

Form Examples

Basic Form

Waitlist Form with User Count

Themed Form

Custom Styled Form

Theming and Customization

Built-in Themes

Custom Appearance

Form Types

API Reference

Mantlz Component Props

MantlzProvider Props

Documentation

Getting Help

License