Theming

Mantlz includes four carefully crafted built-in themes and supports automatic dark mode. Each theme is designed with specific aesthetics and use cases in mind.

Built-in Themes

Select a theme using the theme prop:

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

export default function ThemedForm() {
  return (
    <Mantlz
      formId="your-form-id"
      theme="modern" // 'default' | 'modern' | 'neobrutalism' | 'simple'
    />
  );
}

Theme Previews

Default
Modern
Neobrutalism
Simple

Default Theme

Clean, minimal design with subtle shadows and rounded corners. Perfect for most applications.Characteristics:

10px border radius
Soft shadows (0 2px 8px rgba(0, 0, 0, 0.06))
Blue accent color (var(—blue-9))
1.5px borders
Smooth transitions

<Mantlz formId="form-id" theme="default" />

Best for: SaaS products, professional sites, business applications

Modern Theme

Contemporary styling with refined aesthetics and elegant interactions.Characteristics:

8px border radius
Elevated shadows (0 4px 12px rgba(0, 0, 0, 0.08))
Black button background
Compact spacing
Subtle hover effects

<Mantlz formId="form-id" theme="modern" />

Best for: Design-focused sites, portfolios, modern web apps

Neobrutalism Theme

Bold, high-contrast design with hard shadows and sharp edges.Characteristics:

0px border radius (sharp corners)
2px solid black borders
Hard box shadows (4px 4px 0 black)
Yellow accent color (var(—yellow-4))
Uppercase text transforms
Monospace font for inputs

<Mantlz formId="form-id" theme="neobrutalism" />

Best for: Creative projects, landing pages, bold statements

Simple Theme

Minimal styling for maximum customization flexibility.Characteristics:

4px border radius
No shadows
Minimal spacing
Gray color scheme
Lightweight styling

<Mantlz formId="form-id" theme="simple" />

Best for: Custom designs, embedded forms, minimal interfaces

Dark Mode

All themes include automatic dark mode support. The SDK detects the user’s system preference and applies the appropriate styles.

Automatic Dark Mode

// Dark mode is automatically applied based on system preference
<Mantlz formId="form-id" theme="default" />

The SDK uses the useDarkMode hook to detect preferences:

src/components/form/hooks/useAppearance.ts:11-13

const shouldUseDarkMode = appearance?.baseTheme 
  ? appearance.baseTheme === 'dark'
  : isDarkMode; // System preference

Force Dark Mode

Override system preference with the appearance prop:

<Mantlz
  formId="form-id"
  theme="default"
  appearance={{
    baseTheme: 'dark' // Force dark mode
  }}
/>

Force Light Mode

<Mantlz
  formId="form-id"
  theme="default"
  appearance={{
    baseTheme: 'light' // Force light mode
  }}
/>

Dark Mode Variants

Each theme includes dark mode variants for all components:

src/components/form/themes/types.ts:1-32

interface Theme {
  form: {
    container: CSSProperties;
    containerDark?: CSSProperties;     // Dark mode variant
    title: CSSProperties;
    titleDark?: CSSProperties;         // Dark mode variant
    description: CSSProperties;
    descriptionDark?: CSSProperties;   // Dark mode variant
  };
  field: {
    container: CSSProperties;
    label: CSSProperties;
    labelDark?: CSSProperties;         // Dark mode variant
    input: ExtendedCSSProperties;
    inputDark?: ExtendedCSSProperties; // Dark mode variant
    error: CSSProperties;
  };
  button: ExtendedCSSProperties;
  buttonDark?: ExtendedCSSProperties;  // Dark mode variant
}

Theme Anatomy

Each theme defines styles for these components:

Form Container

src/components/form/themes/index.ts:4-26

form: {
  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)',
  },
  containerDark: {
    // Dark mode styles
    backgroundColor: '#1a1a1a',
    border: '1px solid var(--gray-8)',
    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
  }
}

Title Styles

src/components/form/themes/index.ts:27-42

title: {
  fontSize: '22px',
  fontWeight: '700',
  color: 'black',
  marginBottom: '12px',
  lineHeight: '1.3',
  letterSpacing: '-0.02em',
},
titleDark: {
  fontSize: '22px',
  fontWeight: '700',
  color: 'white',
  marginBottom: '12px',
  lineHeight: '1.3',
  letterSpacing: '-0.02em',
}

Input Fields

src/components/form/themes/index.ts:76-96

input: {
  width: '100%',
  padding: '8px 12px',
  borderRadius: '8px',
  border: '1.5px solid var(--gray-6)',
  fontSize: '14px',
  backgroundColor: 'white',
  color: 'black',
  transition: 'all 0.2s ease',
  '&:focus': {
    borderColor: 'var(--blue-8)',
    outline: 'none',
    boxShadow: '0 0 0 3px var(--blue-3)',
  },
  '&:hover': {
    borderColor: 'var(--gray-8)',
  },
  '&::placeholder': {
    color: 'var(--gray-9)',
  },
}

Button Styles

src/components/form/themes/index.ts:129-163

button: {
  padding: '8px 14px',
  backgroundColor: 'var(--blue-9)',
  color: 'white',
  border: 'none',
  borderRadius: '8px',
  fontWeight: '600',
  fontSize: '14px',
  cursor: 'pointer',
  transition: 'all 0.2s ease',
  boxShadow: '0 2px 4px rgba(0, 0, 0, 0.08)',
  width: '100%',
  marginTop: '8px',
  '&:hover': {
    backgroundColor: 'var(--blue-10)',
    transform: 'translateY(-1px)',
    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.12)',
  },
  '&:active': {
    transform: 'translateY(0)',
    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.08)',
  },
  '&:disabled': {
    opacity: 0.6,
    cursor: 'not-allowed',
    transform: 'none',
    boxShadow: 'none',
  },
}

Theme Comparison

Feature	Default	Modern	Neobrutalism	Simple
Border Radius	10px	8px	0px	4px
Shadow	Subtle	Medium	Hard	None
Border Width	1.5px	1px	2px	1px
Accent Color	Blue	Black	Yellow	Gray
Font Weight	600-700	600	800	400-500
Transitions	Smooth	Smooth	Snappy	Basic
Spacing	Comfortable	Compact	Minimal	Minimal

Radix UI Color System

All themes use the Radix UI color system for consistent, accessible colors:

/* Radix UI Color Variables */
var(--blue-3)   /* Light blue background */
var(--blue-8)   /* Medium blue (focus states) */
var(--blue-9)   /* Primary blue (buttons) */
var(--blue-10)  /* Dark blue (hover) */
var(--blue-11)  /* Text on blue background */

var(--gray-4)   /* Light borders */
var(--gray-6)   /* Input borders */
var(--gray-8)   /* Dark borders */
var(--gray-9)   /* Placeholder text */
var(--gray-20)  /* Body text */

var(--red-2)    /* Error background */
var(--red-6)    /* Error border */
var(--red-9)    /* Error text */
var(--red-11)   /* Error text on colored background */

var(--green-9)  /* Success color (order buttons) */
var(--yellow-4) /* Neobrutalism accent */

Accessing Themes

Import and use theme objects directly:

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

// Access theme styles
const defaultTheme = themes.default;
const modernTheme = themes.modern;
const neobrutalistTheme = themes.neobrutalism;
const simpleTheme = themes.simple;

// Use theme styles
console.log(defaultTheme.form.container);
console.log(defaultTheme.field.input);

Custom Theme Colors

While you can’t add new themes, you can customize existing themes with the appearance prop:

<Mantlz
  formId="form-id"
  theme="default"
  appearance={{
    variables: {
      colorPrimary: '#8b5cf6',      // Purple buttons
      colorBackground: '#fafafa',    // Light gray background
      borderRadius: '16px',          // Larger radius
    }
  }}
/>

See the Customization guide for more details on the appearance API.

Theme Selection Guide

Choose Default if:

Building a professional SaaS product
Need broad appeal and familiarity
Want a polished, trustworthy appearance
Targeting business users

Choose Modern if:

Creating a design-forward application
Want a contemporary, sleek look
Building a portfolio or creative site
Targeting design-conscious users

Choose Neobrutalism if:

Making a bold statement
Want to stand out from competitors
Building a creative or artistic project
Targeting a younger, trend-aware audience

Choose Simple if:

Planning extensive customization
Embedding forms in existing designs
Need minimal styling overhead
Want complete control over appearance

Responsive Design

All themes are mobile-first and fully responsive:

src/components/form/themes/index.ts:5-6

container: {
  maxWidth: '350px',  // Constrains width on large screens
  width: '100%',      // Fluid on small screens
  // ...
}

Forms automatically adapt to:

Mobile devices (320px+)
Tablets (768px+)
Desktops (1024px+)

Performance

Themes are loaded synchronously with the SDK and don’t impact initial bundle size:

Theme data: ~3KB gzipped (all 4 themes)
CSS-in-JS: No runtime style injection
Dark mode: No flash of unstyled content (FOUC)

Best Practices

Start with a built-in theme - Use themes as a foundation before customizing. They’re carefully designed for accessibility and usability.

Respect dark mode preferences - Don’t force light/dark mode unless you have a compelling reason. Users appreciate respect for their system settings.

Test dark mode - Always test your forms in both light and dark mode if you’re using custom appearance variables.

Radix UI colors are accessible - All color combinations in the built-in themes meet WCAG AA contrast requirements.

Getting Started

Platform

SDK

Guides

Pricing & Plans

Built-in Themes

Theme Previews

Default Theme

Modern Theme

Neobrutalism Theme

Simple Theme

Dark Mode

Automatic Dark Mode

Force Dark Mode

Force Light Mode

Dark Mode Variants

Theme Anatomy

Form Container

Title Styles

Input Fields

Button Styles

Theme Comparison

Radix UI Color System

Accessing Themes

Custom Theme Colors

Theme Selection Guide

Choose Default if:

Choose Modern if:

Choose Neobrutalism if:

Choose Simple if:

Responsive Design

Performance

Best Practices

Next Steps

Customization

Form Types

Getting Started

Platform

SDK

Guides

Pricing & Plans

Documentation Index

​Built-in Themes

​Theme Previews

​Default Theme

​Modern Theme

​Neobrutalism Theme

​Simple Theme

​Dark Mode

​Automatic Dark Mode

​Force Dark Mode

​Force Light Mode

​Dark Mode Variants

​Theme Anatomy

​Form Container

​Title Styles

​Input Fields

​Button Styles

​Theme Comparison

​Radix UI Color System

​Accessing Themes

​Custom Theme Colors

​Theme Selection Guide

​Choose Default if:

​Choose Modern if:

​Choose Neobrutalism if:

​Choose Simple if:

​Responsive Design

​Performance

​Best Practices

​Next Steps

Customization

Form Types

Built-in Themes

Theme Previews

Default Theme

Modern Theme

Neobrutalism Theme

Simple Theme

Dark Mode

Automatic Dark Mode

Force Dark Mode

Force Light Mode

Dark Mode Variants

Theme Anatomy

Form Container

Title Styles

Input Fields

Button Styles

Theme Comparison

Radix UI Color System

Accessing Themes

Custom Theme Colors

Theme Selection Guide

Choose Default if:

Choose Modern if:

Choose Neobrutalism if:

Choose Simple if:

Responsive Design

Performance

Best Practices

Next Steps