Install Monsoon from a CDN

#Add the stylesheet

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

Put it in the <head>, before your own stylesheets, so your rules come after Monsoon and win on equal specificity. The bare package URL serves the minified build, dist/monsoon.min.css.

That is the whole installation. Every class in the class reference and every component is now available on the page.

#Pin a version for production

The bare URL always follows the latest release. That is ideal for prototypes and demos, but a page in production should not change because a new version was published. Pin the exact version instead:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss@0.2.0/dist/monsoon.min.css">

Monsoon follows semantic versioning. Before 1.0, a minor release (for example from 0.2 to the next minor) may contain breaking changes, so read the changelog before you move a pin.

#jsDelivr or unpkg

Both CDNs serve files straight from the published npm package, so the content is identical. Pick the one your team already allows.

<!-- latest -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- pinned -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss@0.2.0/dist/monsoon.min.css">

<!-- latest -->
<link rel="stylesheet" href="https://unpkg.com/monsooncss">

<!-- pinned -->
<link rel="stylesheet" href="https://unpkg.com/monsooncss@0.2.0/dist/monsoon.min.css">

The short URLs work because the package declares dist/monsoon.min.css in its jsdelivr and unpkg fields. A pinned URL with the full file path is the most explicit form and the one to use with integrity hashes.

#Subresource integrity

Subresource integrity tells the browser to refuse a file whose content does not match a hash you recorded. It protects your pages if a CDN ever served something unexpected. Use it only with a fully pinned URL: a moving URL changes content and the hash would stop matching. Generate the hash from the exact file you reference:

curl -sL https://cdn.jsdelivr.net/npm/monsooncss@0.2.0/dist/monsoon.min.css | openssl dgst -sha384 -binary | openssl base64 -A

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/monsooncss@0.2.0/dist/monsoon.min.css"
  integrity="sha384-PASTE_THE_HASH_HERE"
  crossorigin="anonymous">

#Self host the file

Some projects cannot load assets from a third party domain: a strict content security policy, an intranet without internet access, or a privacy policy that rules out external requests. Download the file once and serve it with your other assets:

mkdir -p public/css
curl -L -o public/css/monsoon.min.css https://cdn.jsdelivr.net/npm/monsooncss@0.2.0/dist/monsoon.min.css

<link rel="stylesheet" href="/css/monsoon.min.css">

The file has no dependencies. Fonts come from the system font stack, so there are no web fonts to fetch, and the small icons some components draw (select arrows, checkmarks, chevrons) are inline SVG data URLs. With a content security policy, allow your own origin in style-src and data: in img-src.

If you install the package from npm, the same file is at node_modules/monsooncss/dist/monsoon.min.css. See Install with npm.

#A complete starter page

This page combines everything above: a pinned stylesheet, a preconnect hint, the color scheme meta tag, and a small layout that adapts from phone to desktop.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <title>Acme Studio</title>
  <link rel="preconnect" href="https://cdn.jsdelivr.net">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss@0.2.0/dist/monsoon.min.css">
</head>
<body class="min-h-dvh bg-background text-foreground antialiased">
  <header class="border-b">
    <nav class="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
      <a href="/" class="font-bold">Acme Studio</a>
      <a href="/contact" class="rounded-lg bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/90">Contact</a>
    </nav>
  </header>
  <main class="mx-auto max-w-5xl px-6 py-16 space-y-10">
    <section class="max-w-2xl space-y-4">
      <h1 class="text-4xl md:text-5xl font-extrabold tracking-tight text-balance">Websites that load before you blink</h1>
      <p class="text-lg text-muted-foreground">Design, build and hosting for small teams.</p>
    </section>
    <section class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <article class="rounded-2xl border bg-surface p-6 space-y-2">
        <h2 class="font-semibold">Design</h2>
        <p class="text-sm text-muted-foreground">Layouts and type that fit your brand.</p>
      </article>
      <article class="rounded-2xl border bg-surface p-6 space-y-2">
        <h2 class="font-semibold">Build</h2>
        <p class="text-sm text-muted-foreground">Fast pages on the stack you already use.</p>
      </article>
      <article class="rounded-2xl border bg-surface p-6 space-y-2">
        <h2 class="font-semibold">Host</h2>
        <p class="text-sm text-muted-foreground">Monitoring, backups and updates included.</p>
      </article>
    </section>
  </main>
  <footer class="border-t py-8 text-center text-sm text-muted-foreground">Acme Studio</footer>
</body>
</html>

Using a framework or a server side stack? The HTML, React, Next.js, Vue, Laravel, WordPress and other install guides show where the link tag goes in each one.

#Caching and performance

• One request. The whole framework is about 88 kB with brotli and 145 kB with gzip. CDNs send the compressed version to every current browser.
• Long lived cache. A pinned URL never changes content, so the CDN and the browser can keep it for a long time. Every page view after the first one costs nothing.
• No shared cache across sites. Browsers partition their cache per site, so do not count on visitors having the file from another website. Count on the second page of your own site being free.
• Render blocking on purpose. A stylesheet in the <head> delays the first paint until it arrives, which is what you want for your main CSS: the alternative is a flash of unstyled content. The preconnect hint above starts the connection early.
• Less CSS when it matters. The purge command writes a file with only the utilities you use, which you then self host.

#Frequently asked questions