Responsive breakpoints in Lapikit: how to use and customize

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:

Using breakpoints in classes

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

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.

Customize breakpoints

Lapikit offers advanced breakpoint customization. You can add and modify both devices and thresholds so that your app stays fully adaptive.

To do this, edit your plugins/lapikit.(ts|js) file and configure breakpoints inside the createLapikit() call. You can visit customize pages for discover all options to lapikit customization.

Adapting breakpoints to the device

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:

• kit-device—(d|h)-mobile
• kit-device—(d|h)-tablet
• kit-device—(d|h)-desktop

And your custom breakpoints devices use this format class : kit-device--(d|h)-{device}.

Customize breakpoint devices keys

Lapikit is built to adapt, not dictate. If the default mapping between devices and thresholds doesn’t match your design system, you can fully customize it via the devices config.

Here’s how you might redefine which breakpoints count as mobile, tablet, desktop or custom:

This gives you full control over what mobile or tablet means in your app, keeping your responsive logic aligned with your design tokens or product specs. .

To find out more, discover how Lapikit styles adapt to your customized breakpoints.

---