Learn how to migrate to legacy version to current lapikit

Migration guide

Lapikit 0.2.4 introduces major improvements to the configuration system, theming, and CLI.

This guide explains all breaking changes and new features so you can migrate smoothly.

CLI changes

Before (≤ 0.2.3):

Now (≥ 0.2.4):

The command no longer requires init. Running it will prompt you with options to customize the installation and generate configuration files automatically.

By default, a config file will be created at: src/plugins/lapikit.(js|ts)

New configuration format

Lapikit now uses the createLapikit() function for configuration. This centralizes customization for:

• themes

• variables

• breakpoints

• store integration

  Preview

  Code

  ---

Breakpoints & runes

mobileBreakpoint, tabletBreakpoint, laptopBreakpoint → replaced by a devices object.

Breakpoint values are now in px instead of rem strings.

You can now use Lapikit runes to access breakpoints directly in your code (JS/TS) without relying solely on CSS.

Example: use breakpoint runes in components to dynamically show/hide elements.

Theming system

Themes have been redesigned:

Each theme is now independent, making it easier to create multiple styles.

You can override colors, variables, and design tokens per theme.

Font theming is now supported, allowing custom typography settings.

Device classes

Utility classes for devices have changed.

Before:

.hidden-mobile
.display-tablet
.display-laptop

Now:

.kit-device--d-mobile
.kit-device--h-tablet
.kit-device--h-desktop

• d = display
• h = hide

Component CSS scope

All component CSS is now scoped by default. This means:

Component styles are isolated from global CSS.

No more accidental overrides from your project’s CSS files.

Summary of migration steps

Replace npx lapikit init with npx lapikit.

Move your config to src/plugins/lapikit.(js|ts) and wrap it in createLapikit().

Update breakpoints to the new structure (devices + thresholds).

Replace old utility classes (hidden-, display-) with the new kit-device--* format.

Migrate themes and fonts into the new independent theme structure.

Restart your dev environment after changes.

Migration Cheat Sheet

Here’s a quick before/after comparison to help you migrate from Lapikit 0.2.3 to ≥ 0.2.4.

---