Mod
Installation

Installing Mod in a Vite App

How to install Mod for use in a Vite app.

To use Mod with Vite, you will want to decide how you want Mod's files loaded in your app. There are two options:

Global

This will load Mod's CSS and JavaScript globally in your app for all pages.

Global CSS and ESM JavaScript

This will load Mod's CSS globally and set up your JavaScript to load via ESM. This is the recommended approach for Vite sites.

Using Global CSS and JavaScript

To start installing Mod in your app, first, you'll want to copy the required Mod files into your app. Use the table below to know where files should go:

Paths for Plus Users

If you've purchased a copy of Mod Plus, you will want to use the plus file variants (e.g., mod-light-plus.min.css) below.

Type File in mod(-plus).zip Target path in app What is it?
File mod-light(-plus).min.css public/css/mod-light(-plus).min.css The light-themed version of Mod.
File mod-dark(-plus).min.css public/css/mod-dark(-plus).min.css The dark-themed version of Mod.
File mod(-plus).iife.min.js public/js/mod(-plus).iife.min.js The IIFE version of the JavaScript for Mod's interactive components. Use this if you want to load Mod's JavaScript globally in your app.
File fonts/lucide.woff2 public/fonts/lucide.woff2 The icon font used by Mod, Lucide.
File fonts/mod-brand-icons.woff2 public/fonts/mod-brand-icons.woff2 The icon font for brand logos used by Mod.

Once you have the files copied over to your app, next, you'll want to update your index.html file to include Mod's imports:

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">     
    
    <script type="module">
      import Cookies from 'js-cookie';
      const theme = Cookies.get('theme') || 'light';
      document.body.setAttribute('data-mod-theme', theme);
      
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = `/css/mod-${theme}(-plus).min.css`;
      document.head.appendChild(link);
    </script>
    
    <script src="/js/mod(-plus).iife.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Above, we begin by including Mod's font, Inter, via a Google CDN link (optional and can be replaced with static assets in the app).

Cookie access requires you to install the js-cookie package via NPM

Next, we give ourselves access to the browser's cookies by importing Cookies from the js-cookie package (you will want to install this seperately). With this, we set a variable theme equal to the cookie with the same name (retrieved via Cookies.get('theme')), falling back to light if the cookie is not set.

After we've set this, next, we set the data-mod-theme attribute to match the specified theme. This is required as Mod's stylesheets are theme-scoped based on this attribute.

Once we have that set, next, we dynamically create a <link> tag to include the Mod stylesheet matching our current theme value. Because Vite is front-end only, we need to do this dynamically via the DOM API. Once we've created our <link> and set its href attribute to specify our theme, we append it to our app's <head> tag.

Finally, to load Mod's JavaScript globally, we include the mod(-plus).iife.min.js file we placed in our /public/js folder.

Once all of this is complete, Mod should be loaded globally in your Vite app. If you have a page that uses Mod components that rely on JavaScript, you can include it directly in your page:

src/main.js

---
import './style.css';

document.querySelector('#app').innerHTML = `
  <div class="mod-command-palette">
    <!-- HTML for Mod's command palette component... -->
  </div>
`;

if (window.mod) {
  window.mod.command_palette();
}

After we've specified our HTML (via the document.querySelector('#app').innerHTML call), we check to see if window.mod is defined, and if it is, call to window.mod.command_palette();.

Using Global CSS and ESM JavaScript

To start installing Mod in your app, first, you'll want to copy the required Mod files into your app. Use the table below to know where files should go:

Paths for Plus Users

If you've purchased a copy of Mod Plus, you will want to use the plus file variants (e.g., mod-light(-plus).min.css) below.

Type File in mod(-plus).zip Target path in app What is it?
File mod-light(-plus).min.css public/css/mod-light(-plus).min.css The light-themed version of Mod.
File mod-dark(-plus).min.css public/css/mod-dark(-plus).min.css The dark-themed version of Mod.
File mod(-plus).esm.min.js src/lib/mod(-plus).esm.min.js The ESM version of the JavaScript for Mod's interactive components. Use this if you want to load Mod's JavaScript incrementally in your app.
File fonts/lucide.woff2 public/fonts/lucide.woff2 The icon font used by Mod, Lucide.
File fonts/mod-brand-icons.woff2 public/fonts/mod-brand-icons.woff2 The icon font for brand logos used by Mod.

Once you have the files copied over to your app, next, you'll want to update your index.html file to include Mod's imports:

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">     
    
    <script type="module">
      import Cookies from 'js-cookie';
      const theme = Cookies.get('theme') || 'light';
      document.body.setAttribute('data-mod-theme', theme);
      
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = `/css/mod-${theme}(-plus).min.css`;
      document.head.appendChild(link);
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Above, we begin by including Mod's font, Inter, via a Google CDN link (optional and can be replaced with static assets in the app).

Cookie access requires you to install the js-cookie package via NPM

Next, we give ourselves access to the browser's cookies by importing Cookies from the js-cookie package (you will want to install this seperately). With this, we set a variable theme equal to the cookie with the same name (retrieved via Cookies.get('theme')), falling back to light if the cookie is not set.

After we've set this, next, we set the data-mod-theme attribute to match the specified theme. This is required as Mod's stylesheets are theme-scoped based on this attribute.

Once we have that set, next, we dynamically create a <link> tag to include the Mod stylesheet matching our current theme value. Because Vite is front-end only, we need to do this dynamically via the DOM API. Once we've created our <link> and set its href attribute to specify our theme, we append it to our app's <head> tag.

Finally, to load Mod's JavaScript globally, we include the mod(-plus).iife.min.js file we placed in our /public/js folder.

Once all of this is complete, Mod' CSS should be loaded globally in your Vite app. If you have a page that uses Mod components that rely on JavaScript, you can include it directly in your page:

src/main.js

---
import './style.css';
import { command_palette } from './lib/mod(-plus).esm.min.js';

document.querySelector('#app').innerHTML = `
  <div class="mod-command-palette">
    <!-- HTML for Mod's command palette component... -->
  </div>
`;

command_palette();

Up top, we import the command_palette() method from the mod(-plus).esm.min.js file that we placed in our src/lib folder above.

After we've specified our HTML (via the document.querySelector('#app').innerHTML call), we call to the imported command_palette() method directly.