Skip to main content

​
Overview

The MantlzProps interface defines the main configuration properties for Mantlz form components. It provides options for form identification, styling, user engagement features, and redirect handling.

​
Type Definition

interface MantlzProps {
  formId: string;
  className?: string;
  showUsersJoined?: boolean;
  usersJoinedCount?: number;
  usersJoinedLabel?: string;
  redirectUrl?: string;
  theme?: 'default' | 'modern' | 'neobrutalism' | 'simple';
  appearance?: Appearance;
}

​
Properties

​
formId
string
required
Unique identifier for the form. This is required to connect the component to your Mantlz form configuration.
​
className
string
Optional CSS class name to apply custom styles to the form container.
​
showUsersJoined
boolean
Enable display of the number of users who have joined/submitted the form. Useful for social proof on waitlist forms.
​
usersJoinedCount
number
Manually set the initial count of users joined. If not provided, the SDK will fetch this from the API.
​
usersJoinedLabel
string
Custom label text to display alongside the users joined count. Default format is typically “X users joined”.
​
redirectUrl
string
URL to redirect users to after successful form submission. This is only available for STANDARD/PRO plans. Free plan users are redirected to Mantlz’s hosted thank-you page.
​
theme
'default' | 'modern' | 'neobrutalism' | 'simple'
Pre-built theme to apply to the form. Choose from:
  • default - Classic Mantlz styling
  • modern - Contemporary, clean design
  • neobrutalism - Bold, brutalist aesthetic
  • simple - Minimal, stripped-down styling
​
appearance
Appearance
Advanced appearance customization object. Provides granular control over colors, typography, and element-level CSS classes.See the Appearance documentation for detailed configuration options.

​
Usage Example

import { MantlzForm } from '@mantlz/react';

function App() {
  return (
    <MantlzForm
      formId="your-form-id"
      theme="modern"
    />
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us