Installing Mantlz SDK

Mantlz SDK is a modern, customizable React component library for building beautiful forms including feedback, contact, and waitlist forms with dark mode support.

Prerequisites

Before installing Mantlz SDK, make sure you have:

• A React project (Next.js, Create React App, Vite, etc.)
• Node.js (v14 or newer)
• npm, yarn, or pnpm package manager

Setup for Next.js

For Next.js applications, we recommend using our specialized 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 any of our form components:

import { FeedbackForm } from 'mantlz-sdk';

function MyFeedbackPage() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">We value your feedback</h1>
      
      <FeedbackForm 
        formId="my-feedback-form"
        onSubmitSuccess={(data) => console.log('Feedback submitted:', data)}
      />
    </div>
  );
}