Overview Mantlz SDK includes four carefully designed built-in themes, each with automatic dark mode support. All themes are fully responsive and optimized for mobile-first design.
Default Clean, minimal design with subtle shadows and rounded corners
Modern Contemporary styling with soft shadows and refined aesthetics
Neobrutalism Bold, high-contrast design with sharp edges and prominent borders
Simple Minimal styling for maximum customization flexibility
Using Built-in Themes Apply a theme using the theme prop on the Mantlz component:
import { Mantlz } from '@mantlz/nextjs' ; export default function MyForm () { return ( < Mantlz formId = "your-form-id" theme = "modern" /> ); }
Theme Configurations Default
Modern
Neobrutalism
Simple
Default Theme The default theme provides a clean, professional appearance with subtle styling and smooth interactions. Key Features:
Rounded corners (10px border radius)
Subtle shadows and borders
Blue accent color (var(—blue-9))
Smooth transitions and hover effects
Backdrop blur effect
Visual Characteristics:
Container: White background with light gray border and soft shadowInputs: Medium border thickness (1.5px) with blue focus ringButtons: Blue background with lift animation on hoverTypography: Semi-bold titles (700 weight) with negative letter spacing < Mantlz formId = "your-form-id" theme = "default" />
Form Container
Input Fields
Submit Button
container : { maxWidth : "350px" , width : "100%" , margin : "0 auto" , padding : "16px" , borderRadius : "10px" , border : "1px solid var(--gray-4)" , boxShadow : "0 2px 8px rgba(0, 0, 0, 0.06)" , backgroundColor : "white" , backdropFilter : "blur(4px)" }
Dark Mode:
Background: #1a1a1a
Border: var(—gray-8)
Button: Light gray (#f5f5f5) with black text
Modern Theme Contemporary styling with soft shadows and a refined aesthetic, perfect for professional applications. Key Features:
Moderate border radius (8px)
Layered shadows for depth
Black primary color
Subtle hover animations
Box shadows on inputs
Visual Characteristics:
Container: Medium shadow (0 4px 12px) for elevated appearanceInputs: Light shadow with gray borders, ring shadow on focusButtons: Black background with vertical movement on interactionTypography: Medium-bold titles (600 weight) with tight spacing < Mantlz formId = "your-form-id" theme = "modern" />
Form Container
Input Fields
Submit Button
container : { maxWidth : "350px" , width : "100%" , margin : "0 auto" , padding : "16px" , borderRadius : "8px" , border : "1px solid var(--gray-5)" , boxShadow : "0 4px 12px rgba(0, 0, 0, 0.08)" , backgroundColor : "white" }
Dark Mode:
Background: #1a1a1a
Stronger shadows for better contrast
Button: Light gray (#f5f5f5) with black text
Neobrutalism Theme Bold, high-contrast design inspired by the neobrutalism aesthetic with sharp edges and prominent borders. Key Features:
No border radius (sharp corners)
Thick borders (2px)
Hard drop shadows (4px 4px 0)
Yellow accent color (var(—yellow-4))
Uppercase text transforms
Monospace typography
Press-down button effect
Visual Characteristics:
Container: Solid 2px black border with offset shadowInputs: Monospace font with 2px border and shadowButtons: Yellow background with uppercase text and press effectTypography: Extra bold (800 weight) with uppercase labels < Mantlz formId = "your-form-id" theme = "neobrutalism" />
Form Container
Input Fields
Submit Button
Label Styling
container : { maxWidth : "350px" , width : "100%" , margin : "0 auto" , padding : "12px" , border : "2px solid black" , borderRadius : "0" , boxShadow : "4px 4px 0 black" , backgroundColor : "white" , position : "relative" }
Dark Mode:
Border: 2px solid white
Box shadows: white instead of black
Background: #1a1a1a
Maintains bold, high-contrast aesthetic
Simple Theme Minimal styling that provides basic structure while giving you maximum flexibility for customization. Key Features:
Small border radius (4px)
Minimal padding and spacing
Thin borders (1px)
Simple hover states
No shadows
Compact sizing
Visual Characteristics:
Container: Basic white background with minimal paddingInputs: Simple border with subtle focus stateButtons: Gray background with basic hover effectTypography: Medium weight (500) with minimal styling < Mantlz formId = "your-form-id" theme = "simple" />
Form Container
Input Fields
Submit Button
Label Styling
container : { maxWidth : "350px" , width : "100%" , margin : "0 auto" , padding : "10px" , backgroundColor : "white" }
Dark Mode:
Background: #1a1a1a
Input background: #2a2a2a
Button: Light gray (#f5f5f5) with black text
Minimal contrast adjustments
Dark Mode Support All built-in themes include automatic dark mode support. The SDK detects the user’s system preference and applies the appropriate color scheme.
Dark Mode Features
Automatic detection of system color scheme
Seamless transitions between light and dark modes
Optimized contrast ratios for accessibility
Custom dark variants for all theme elements
Dark Mode Variations Each theme includes specific dark mode configurations:
Default Dark
Neobrutalism Dark
containerDark : { backgroundColor : "#1a1a1a" , border : "1px solid var(--gray-8)" , boxShadow : "0 2px 8px rgba(0, 0, 0, 0.3)" } buttonDark : { backgroundColor : "#f5f5f5" , color : "black" }
Theme Comparison Feature Default Modern Neobrutalism Simple Border Radius 10px 8px 0px 4px Border Width 1.5px 1px 2px 1px Shadow Style Soft Layered Hard offset None Font Weight 700 600 800 500 Accent Color Blue Black Yellow Gray Spacing Medium Medium Compact Minimal Animation Lift Vertical Press Basic Typography Standard Standard Uppercase/Mono Standard
Combining with Custom Appearance You can use a built-in theme as a base and override specific elements:
< Mantlz formId = "your-form-id" theme = "modern" appearance = { { variables: { colorPrimary: '#6366f1' , borderRadius: '12px' }, elements: { formButton: 'bg-indigo-600 hover:bg-indigo-700' } } } />
When both theme and appearance props are provided, the appearance settings will override the theme’s default styling.
Responsive Design All themes are built with mobile-first responsive design:
Max Width: 350px for optimal form readabilityFluid Width: 100% width within max-width constraintTouch-Friendly: Adequate padding and touch targetsFlexible Layout: Adapts to container size
Custom Themes Create your own custom themes from scratch
Appearance API Fine-tune styling with the appearance prop