Breakpoints
Define component display according to the display size of your application. Each Lapikit component offers APIs that are compatible with these breakpoints.
The following table lists the default breakpoint keys, their pixel values, and the device types they correspond to:
Lapikit uses the same mobile-first writing logic as TailwindCSS for managing classes with breakpoints. We ensure that all classes are functional, and then add breakpoints that modify the display according to screen size with {breakpoint}:{class}.
Breakpoint example:
.kit-btn-density-comfortable is displayed for all screen sizes..kit-btn-density-comfortable .md:kit-btn-density-default modifies the density display if the display varies between default and md.Using breakpoints in the APIs of Lapikit components Each component offers certain so-called responsive APIs. They accept several parameters based on the keys available in your Lapikit threshold configuration.
Here’s an example with the Button component and the density API.
Lapikit offers advanced breakpoint customization. You can add and modify keys so you can use them in your application.
To do this, edit your lapikit.config.js file and modify or add the breakpoint key, then the thresholds key.
[!INFO] It’s advisable to restart your environment after this kind of modification to ensure that all Lapikit styles are updated.
Lapikit also offers device breakpoints, so you can define a display for just one type of device, or several in succession. This allows you to display, for example, a BottomNavigation for mobiles, followed by an AppBar for tablets and computers.
Here is the list of available classes:
Lapikit is built to adapt, not dictate. That includes how it handles responsive design. If the default breakpoint-to-device mapping doesn’t quite match your design system, you can fully customize it via the lapikit.config.js file.
You define which screen sizes should correspond to devices like mobile, tablet, or laptop. This mapping is internal to Lapikit and lets you create truly adaptive UIs without having to rewrite class logic or component behavior.
Here’s how to do it:
These keys (md, lg, 4xl, etc.) refer to your thresholds, which you define elsewhere in the same config file. Make sure the keys you assign here exist and are correctly defined in the thresholds object.
This gives you full control over what “mobile” or “tablet” means in your app, making it easier to match your responsive logic with your design tokens or product specs.
To find out more, discover how Lapikit styles adapt to your customized breakpoints.