@mantlz/nextjs) is a TypeScript-native React component library that enables developers to embed beautiful, customizable forms into their Next.js applications with minimal configuration.
Architecture
The SDK is built with a modern, modular architecture designed for performance and developer experience:Core Components
Provider SystemMantlzProvider- Context provider that initializes the SDK clientuseMantlz- React hook for accessing the SDK client instance- Automatic client instantiation with API key validation
Mantlz- Main form component that renders all form types- Dynamic form schema fetching from the Mantlz API
- Built-in validation using Zod and react-hook-form
- Automatic error handling and user feedback
- 4 built-in themes:
default,modern,neobrutalism,simple - Automatic dark mode support with system preference detection
- Clerk-inspired appearance API for deep customization
- RESTful API client with automatic caching
- Form submission with redirect handling
- Users joined count tracking for waitlist forms
- Stripe checkout integration for order forms
Key Features
Type-Safe
Full TypeScript support with comprehensive type definitions exported from the SDK
Zero Config
Works out of the box with just an API key and form ID
Performance
Request caching, code splitting, and optimized bundle size
Accessible
Built with Radix UI primitives for WCAG compliance
Technical Stack
The SDK is built on top of industry-standard libraries:Package Information
@mantlz/nextjs0.6.1MIT
Browser Support
The SDK supports all modern browsers:- Chrome/Edge (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)
- iOS Safari (latest 2 versions)
- Chrome Android (latest version)
Bundle Size
The SDK is optimized for minimal bundle impact:- Main bundle: ~45KB gzipped
- With Radix UI themes: ~85KB gzipped
- Tree-shakeable: Import only what you need
Philosophy
The Mantlz SDK is designed with these principles:- Developer Experience First - Simple API, comprehensive types, helpful errors
- Production Ready - Built-in caching, error handling, and performance optimizations
- Customizable - Deep theming support without sacrificing ease of use
- Framework Aligned - Built specifically for Next.js App Router and Server Components
Next Steps
Installation
Install and configure the SDK in your Next.js app
Basic Usage
Learn the fundamental patterns for using Mantlz forms
Form Types
Explore all supported form types and their features
Theming
Customize the appearance with themes and dark mode