Skip to main content

​
Overview

The Appearance configuration types allow you to customize the look and feel of Mantlz forms. This includes theme selection, CSS variables for colors and typography, and element-level CSS class customization.

​
Appearance Interface

interface Appearance {
  baseTheme?: 'light' | 'dark';
  variables?: AppearanceVariables;
  elements?: AppearanceElements;
}

​
Properties

​
baseTheme
'light' | 'dark'
Base theme mode for the form. Sets the default color scheme.
​
variables
AppearanceVariables
CSS variables for global styling properties like colors, typography, and spacing.
​
elements
AppearanceElements
CSS class names to apply to specific form elements for granular styling control.

​
AppearanceVariables Interface

interface AppearanceVariables {
  colorPrimary?: string;
  colorBackground?: string;
  colorInputBackground?: string;
  colorText?: string;
  colorInputText?: string;
  colorError?: string;
  colorSuccess?: string;
  borderRadius?: string;
  fontFamily?: string;
  fontSize?: string;
  fontWeight?: string;
}

​
Properties

​
colorPrimary
string
Primary brand color used for buttons, links, and accents. Accepts any valid CSS color value.Example: "#6366f1", "rgb(99, 102, 241)", "hsl(239, 84%, 67%)"
​
colorBackground
string
Background color for the form container.Example: "#ffffff", "#1f2937"
​
colorInputBackground
string
Background color for input fields.Example: "#f9fafb", "#374151"
​
colorText
string
Primary text color for labels, descriptions, and general text.Example: "#111827", "#f3f4f6"
​
colorInputText
string
Text color specifically for input field values.Example: "#1f2937", "#e5e7eb"
​
colorError
string
Color for error messages and validation states.Example: "#ef4444", "#dc2626"
​
colorSuccess
string
Color for success messages and positive states.Example: "#10b981", "#059669"
​
borderRadius
string
Border radius for form elements. Accepts any valid CSS border-radius value.Example: "0.375rem", "8px", "0" (for sharp corners)
​
fontFamily
string
Font family for all form text. Use system fonts or web fonts.Example: "Inter, sans-serif", "'Helvetica Neue', Arial, sans-serif"
​
fontSize
string
Base font size for form text.Example: "14px", "0.875rem", "16px"
​
fontWeight
string
Font weight for form text.Example: "400", "500", "normal", "medium"

​
AppearanceElements Interface

interface AppearanceElements {
  card?: string;
  formTitle?: string;
  formDescription?: string;
  formField?: string;
  formLabel?: string;
  formInput?: string;
  formButton?: string;
  formError?: string;
  usersJoined?: string;
}

​
Properties

All properties accept CSS class names as strings. These classes are applied to their respective elements.
​
card
string
CSS classes for the main form container/card element.Example: "shadow-xl rounded-lg p-8"
​
formTitle
string
CSS classes for the form title/heading.Example: "text-3xl font-bold mb-4"
​
formDescription
string
CSS classes for the form description text.Example: "text-gray-600 mb-6"
​
formField
string
CSS classes for individual form field containers.Example: "mb-4 space-y-2"
​
formLabel
string
CSS classes for form field labels.Example: "font-medium text-sm"
​
formInput
string
CSS classes for form input elements (text, email, textarea, etc.).Example: "border-2 focus:ring-2 focus:ring-blue-500"
​
formButton
string
CSS classes for form submit button.Example: "hover:scale-105 transition-transform duration-200"
​
formError
string
CSS classes for error message elements.Example: "text-sm text-red-600 mt-1"
​
usersJoined
string
CSS classes for the users joined counter display.Example: "text-xs text-gray-500 italic"

​
Usage Examples

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

function App() {
  return (
    <MantlzForm
      formId="form-id"
      appearance={{
        variables: {
          colorPrimary: '#6366f1',
          colorBackground: '#ffffff',
          borderRadius: '0.5rem',
          fontFamily: 'Inter, sans-serif'
        }
      }}
    />
  );
}
  • MantlzProps - Main component props including appearance

Build docs developers (and LLMs) love

Get started for freeTalk to us