Next.js + Mantine + Tailwind

A modern web application template combining the power of Next.js 15, Mantine UI components, and Tailwind CSS.

Features

• Next.js 15 with App Router and Turbopack
• Mantine 7 - Beautiful React components library
• Tailwind CSS - Utility-first CSS framework
• TypeScript - Type safety out of the box
• Custom theme with color palette based on #78c2ad
• Demo pages showcasing:
  • 20+ Mantine components
  • 10+ Mantine hooks with live examples

Getting Started

Installation

bun install

Development

Run the development server:

bun dev

Open http://localhost:3000 to see the application.

Project Structure

nextjs-mantine-tailwind/
├── app/
│   ├── components/     # Mantine components demo page
│   ├── hooks/          # Mantine hooks demo page
│   ├── globals.css     # Global styles with Tailwind
│   ├── layout.tsx      # Root layout with Mantine Provider
│   └── page.tsx        # Home page
├── theme.ts            # Mantine theme configuration
├── tailwind.config.ts  # Tailwind configuration
├── postcss.config.mjs  # PostCSS config for Mantine + Tailwind
└── next.config.ts      # Next.js configuration

Configuration

Mantine + Tailwind Integration

This project uses a special configuration to make Mantine and Tailwind work together seamlessly:

1. PostCSS Configuration: Uses postcss-preset-mantine alongside Tailwind
2. Tailwind Config: Disables preflight to avoid conflicts with Mantine's base styles
3. Theme System: Custom color palette matching #78c2ad

Custom Colors

The theme includes a custom teal color palette:

• Primary color: #78c2ad
• Configured in both theme.ts (Mantine) and tailwind.config.ts

Pages

Home (/)

Landing page with project overview and navigation

Components (/components)

Interactive showcase of Mantine components including:

• Buttons (variants, loading states)
• Form inputs (text, textarea, select)
• Toggles (checkboxes, switches, radios)
• Badges and avatars
• Progress bars and sliders
• Alerts and modals
• Tabs and accordions
• Action icons and menus

Hooks (/hooks)

Live demonstrations of Mantine hooks:

• useDisclosure - Boolean state management
• useToggle - Toggle between values
• useCounter - Counter with constraints
• useClipboard - Clipboard operations
• useLocalStorage - localStorage sync
• useViewportSize - Viewport dimensions
• useMediaQuery - Media query matching
• useHover - Hover detection
• useFocusWithin - Focus detection
• useInterval - Interval management
• useTimeout - Timeout management

Best Practices

This project follows Next.js and React best practices:

• Server Components by default (pages marked with "use client" only when needed)
• Optimized package imports for Mantine
• TypeScript for type safety
• ESLint for code quality
• Proper separation of concerns

Learn More

• Next.js Documentation
• Mantine Documentation
• Tailwind CSS Documentation

License

MIT