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 applicationsModern 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 appsNeobrutalism 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 statementsSimple 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 interfacesDark 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:
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' , }
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)' , }, }
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+)
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 injectionDark 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.
Next Steps
Customization Deep dive into the appearance API for advanced styling
Form Types Learn about different form types and their features