Build Responsive Themes and Components with Mantine

Understanding Mantine's Responsive Design Philosophy

Mantine takes a pragmatic approach to responsive design, recognizing that modern web applications require sophisticated adaptation strategies beyond simple media queries. The library provides multiple layers of responsive functionality, allowing developers to choose the approach that best fits their specific use case and existing codebase architecture.

At its core, Mantine's responsive system is built around a configurable breakpoint system that aligns with common device categories. These breakpoints serve as the foundation for all responsive features, from simple visibility toggles to complex component sizing adjustments. Our web development services team regularly implements these patterns in production applications.

The philosophy emphasizes developer experience, ensuring that responsive behaviors can be implemented with minimal boilerplate while still providing the fine-grained control needed for complex interfaces. This balance makes Mantine particularly well-suited for projects that require rapid development without sacrificing the ability to create unique, polished user experiences.

Configuring Breakpoints in the Theme Object

The theme object serves as the central configuration hub for all responsive settings in a Mantine application. Breakpoints define the viewport widths at which responsive behaviors trigger, and understanding how to configure these values is essential for creating a cohesive design system that aligns with your specific device targets.

Default Breakpoint Values

Mantine comes with sensible default breakpoint values that cover common device categories. These defaults are defined in em units, which provides better accessibility support since em-based media queries respect the user's browser font size settings:

The em unit choice reflects Mantine's commitment to accessibility and user-centered design. When users adjust their browser's default font size for better readability, em-based breakpoints will scale proportionally, ensuring that responsive behaviors remain consistent with the user's accessibility preferences. Learn more about Mantine's responsive system

Using hiddenFrom and visibleFrom Props

One of Mantine's most intuitive responsive features is the hiddenFrom and visibleFrom props, which provide a declarative way to control component visibility based on viewport width.

Basic Visibility Control

The hiddenFrom prop hides a component when the viewport width is less than the specified breakpoint, while visibleFrom shows a component only when the viewport width is at or above the breakpoint:

// Hide sidebar on small screens
<Paper visibleFrom="md">
 <SidebarNavigation />
</Paper>

// Show mobile menu button only on small screens
<ActionIcon hiddenFrom="md">
 <IconMenu />
</ActionIcon>

This declarative approach keeps visibility logic co-located with the component it affects, making your component code more self-documenting and easier to maintain. Rather than scattering media queries throughout your stylesheets, the visibility logic remains with the component it controls. For teams building modern React applications, this pattern significantly reduces maintenance overhead and improves code organization.

Leveraging the useMediaQuery Hook

For complex responsive behaviors, Mantine provides the useMediaQuery hook that returns a boolean indicating whether the current viewport matches a query.

Hook-Based Responsive Logic

import { useMediaQuery } from '@mantine/hooks';

function ProductGrid() {
 const isMobile = useMediaQuery('(max-width: 768px)');
 const isTablet = useMediaQuery('(min-width: 769px) and (max-width: 1024px)');

 const columns = isMobile ? 1 : isTablet ? 2 : 4;
 
 return (
 <SimpleGrid cols={columns}>
 {products.map(product => (
 <ProductCard key={product.id} product={product} />
 ))}
 </SimpleGrid>
 );
}

The hook handles all the complexity of listening for viewport changes and re-rendering when the match state changes. Unlike visibility props that only affect CSS display, the hook enables conditional rendering, prop modifications, and any JavaScript-based logic that should respond to viewport changes. This approach is particularly valuable when building complex, interactive interfaces that require dynamic adaptations beyond simple show/hide behaviors.

Responsive Component Styling Approaches

Mantine provides multiple approaches to styling components, each with its own strengths for different scenarios. Understanding when to use each approach helps you build maintainable, performant interfaces.

CSS Modules for Component-Scoped Styles

For component-specific styles that need to respond to breakpoints, Mantine's CSS modules support standard CSS media queries alongside the library's responsive utilities. This approach works well when you have existing CSS expertise or need to integrate with design systems that use traditional CSS methodologies:

/* ProductCard.module.css */
.card {
 padding: 1rem;
}

@media (min-width: 48em) {
 .card {
 padding: 1.5rem;
 }
}

CSS modules provide excellent isolation, preventing style conflicts between components while still allowing you to leverage the full power of CSS for responsive layouts. This approach is particularly valuable in larger teams where clear boundaries between component styles help maintain code quality and reduce merge conflicts.

Style Props for Inline Responsive Values

Mantine's style props system enables responsive values directly in component markup using an object or array syntax to specify different values for different breakpoints:

<Box 
 p={{ base: 'sm', md: 'lg' }}
 mx={{ base: 'xs', md: 'xl' }}
>
 Content
</Box>

Choosing the Right Approach

For simple visibility changes, use hiddenFrom and visibleFrom props. For conditional rendering or JavaScript logic based on viewport, use useMediaQuery. For component-specific responsive styles, CSS modules provide the most flexibility. For rapid prototyping or instance-specific responsive values, style props offer the most concise syntax. The key is consistency--choose an approach for each type of responsive behavior and apply it consistently across your codebase.

Building a Cohesive Responsive Theme

Creating an effective responsive theme requires a holistic approach considering typography, spacing, and visual consistency across all your web development projects.

Key Considerations

1. Typography Scaling: Ensure text remains readable and whitespace proportions stay balanced across breakpoints. Consider how your heading sizes, line heights, and margin relationships should scale.

2. Color Consistency: Verify your color palette performs well in different contexts and lighting conditions. Ensure interactive states and feedback mechanisms remain clear and accessible at all viewport sizes.

3. Touch Targets: Maintain adequate touch target sizes (minimum 44x44 pixels) on mobile devices for better usability and accessibility compliance.

4. Performance: Memoize expensive computations and use optimization techniques for responsive logic. Responsive features that trigger frequent re-renders can impact performance on lower-powered devices.

Testing Strategy

• Test on real devices, not just browser emulators
• Verify behavior at each breakpoint transition
• Check text readability at different zoom levels
• Test with actual network conditions for performance

Responsive themes require thorough testing across actual devices and viewport sizes. While browser developer tools provide convenient emulators, nothing replaces testing on real devices to understand how your responsive behaviors feel in actual use.

Conclusion

Mantine's comprehensive responsive design system provides the tools needed to build interfaces that adapt elegantly across devices. From configurable breakpoints to intuitive visibility props and powerful hooks, the library offers multiple approaches suited to different scenarios and developer preferences.

The key to success lies in choosing the right tool for each situation and maintaining consistency across your implementation. Whether hiding navigation elements on mobile, adjusting component sizes based on viewport, or implementing complex responsive behaviors with hooks, Mantine provides a solid foundation for building modern, adaptive interfaces.

Start implementing responsive features in your Mantine applications today, and enjoy the confidence that comes from a robust, well-tested responsive design system. For larger projects, consider how these responsive patterns integrate with your overall web development strategy to create cohesive user experiences that perform well across all devices and screen sizes.

Sources

• Mantine Responsive Styles Documentation
• Mantine Theme Object Documentation
• Mantine CSS Layers and Styles