Installing Mantlz SDK

Mantlz SDK is a modern, customizable React component library for building beautiful dynamic forms with automatic form configuration and dark mode support.

Prerequisites

Before installing Mantlz SDK, make sure you have:

• A React project (Next.js, More soon...)
• Node.js (v14 or newer)
• npm, yarn, or pnpm package manager

Setup for Next.js

For Next.js applications, install our package:

npm install @mantlz/nextjs

Adding the Provider

Wrap your application with the MantlzProvider to enable form functionality:

// In your _app.tsx or layout.tsx file
import { MantlzProvider } from "@mantlz/nextjs";

export default function RootLayout({ children }) {
  return (
    <MantlzProvider apiKey={process.env.MANTLZ_KEY}>
      {children}
    </MantlzProvider>
  );
}

Basic Usage Example

Once installed, you can import and use the mantlz component:

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

function MyFormPage() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Get in Touch</h1>
      
      <mantlz 
        formId="your-form-id"

      />
    </div>
  );
}

The form's fields and behavior will be automatically configured based on your form settings in the Mantlz dashboard. You can create and configure your forms through the dashboard, then use them in your code by simply providing the form ID.