Frequent questions

The questions buyers ask most.

Can I use it with React, Vue, Angular or another framework?

Yes. The kit is CSS classes, CSS variables and data attributes. Load dist/css/mk.min.css, mk-theme.min.js in the head and mk.min.js once. Clicks (panels, toasts, chips, switches, copy, counters) are handled at the document level, so they work in components rendered later. After rendering tabs, carousels or galleries, call MK.init(element). There is no page router to switch off.

Why do some things not work when I open a file directly?

Browsers block ES modules, service workers and some loads on file://. Serve the folder with any local server, for example npx vite or python -m http.server, and open http://localhost:….

How does offline work, and why don't I see my changes?

After the first visit, the service worker keeps every page and file of the kit on the device. Pages are fetched from the network first, so online visitors get fresh pages; files (CSS, JavaScript, fonts) come from the cache. After you change files, run npm run build and raise cacheVersion in mk.config.json. Visitors then see an Update toast. While developing, use your browser's "Update on reload" for service workers, or add data-mk-pwa="off" to <html>.

The Install button doesn't appear.

Browsers only offer installing over HTTPS (or localhost), with a valid manifest and service worker, and only if the app isn't installed already. Chrome on Android and desktop show the prompt; iOS Safari has no prompt, so the button opens the Add to Home Screen steps.

How do I add an icon?

Find its name on the Font Awesome Free site (solid style), add it to src/icons.txt and run npm run build. Then use it by that name in an mk-icon, as shown in Structure, Icons. The build stops with a message if the name doesn't exist.

How do I change the fonts?

Put your font files in src/fonts, edit the @font-face rules in src/scss/_fonts.scss and the --mk-font-ui and --mk-font-display tokens, then rebuild. Pick fonts that cover Arabic if you ship Arabic, and check that their licence allows bundling them in your app.

How do I use my brand colour?

Open the theme builder, pick your colour, check the contrast results and download the CSS file. Load it after mk.css and set data-mk-accent="your-name" on <html>.

Can I remove the curves?

You can (mk-topbar--flat, or leave out the --curve classes), but the curves are what makes the kit distinctive. We recommend keeping them and changing the depth (data-mk-depth) if they feel too strong or too flat.

Do I have to use Bootstrap classes?

No. Bootstrap 5.3.8 is compiled into the kit's CSS for its reset, grid and utilities, inside a low-priority layer. All kit components use their own mk- classes. If you don't need the grid or utilities, remove those imports from src/scss/_vendor.scss and rebuild.

Do I need Arabic?

No. Everything works in English only; just remove the data-mk-ar attributes. If you need Arabic, set dir="rtl" and lang="ar" and the layout mirrors by itself.

How big is it?

About 25 KB of CSS and 8 KB of core JavaScript after gzip. Carousel, photo viewer and chart libraries load only on pages that use them.

What can I do with the kit?

Build apps and websites for yourself or your clients, as your buyer licence describes. You may not resell or give away the kit itself, changed or not. Third-party parts (Bootstrap, Splide, Swup, Chart.js, GLightbox, Font Awesome Free, Workbox, Readex Pro, Lalezar) keep their own licences, collected in LICENSES.