Docs/Getting started
SECTION02

Two files to start.
Take what you need.

Mò is a stylesheet and a script — drop them into any stack that renders HTML, or install only the components you actually use. No provider to wrap, no config to maintain.

INSTALL — EVERYTHING

CDN or static files Fastest

Two tags in your document head. The components hydrate themselves — everything between them already works.

1<link rel="stylesheet" href="https://unpkg.com/@sayagodev/mo@latest/mo.min.css" />2<script src="https://unpkg.com/@sayagodev/mo@latest/mo.min.js"></script>

@latest always resolves to the newest release — pin a version in production, e.g. @sayagodev/[email protected].

Package install Simplest

Install once, import from node_modules — everything or only what you use. Types resolve with zero config.

1pnpm add @sayagodev/mo
1import "@sayagodev/mo/css";2import "@sayagodev/mo/js";3 4// granular:5// import "@sayagodev/mo/css/button.css";6// import "@sayagodev/mo/js/tabs.js";

CLI Recommended

init copies the base theme once — styles into css/, behavior into js/, plus mo.d.ts types. Then add components as you need them.

1pnpm dlx @sayagodev/mo@latest init2pnpm dlx @sayagodev/mo@latest add button

FULL BUNDLE

Want all 52 components without picking them one by one? --bundle copies the prebuilt bundle (the whole library, ~43 kB gzip) plus mo.d.ts types into your project — link the two files and you are done. Unlike the granular sources (ES modules, need http(s)), the bundle also works straight from file://, no server needed.

1pnpm dlx @sayagodev/mo init --bundle   # mo.min.css + mo.min.js + mo.d.ts
1<link rel="stylesheet" href="mo/mo.min.css" />2<script src="mo/mo.min.js"></script>3<!-- types (optional): /// <reference path="mo/mo.d.ts" /> -->

PICK ONLY WHAT YOU USE

Every component is a standalone CSS file and (when it needs behavior) a standalone JS file. Import just those — the bundle only pays for what renders.

1import "@sayagodev/mo/css/00-base.css";    // reset (required once)2import "@sayagodev/mo/css/01-theme.css";   // tokens (required once)3import "@sayagodev/mo/css/button.css";   // styles4import "@sayagodev/mo/css/dialog.css";5 6import "@sayagodev/mo/js/dialog.js";     // behavior — button needs none

The CLI resolves dependencies for you: mo add dialog also copies the base files (css/00-base.css, 01-theme.css, variables.css, animations.css, shared.css, utilities.css, js/base.js) if you don’t have them yet.

IN YOUR FRAMEWORK

Next.js

Vendored files in public/mo, synced from the library with pnpm sync-mo — CSS as a plain link, script after hydration so the custom elements upgrade on connect.

1// app/layout.tsx2import Script from "next/script";3 4<link rel="stylesheet" href="/mo/mo.min.css" />5<Script src="/mo/mo.min.js" strategy="afterInteractive" />

DARK MODE

Mò tokens use light-dark() and track the used color-scheme — dark mode follows the OS automatically. Force it per page with <html data-theme="dark"> (or .dark, equivalent), like the toggle in this site’s header. To retheme, override tokens — every component follows instantly:

1:root { --background: #fafaf8; --foreground: #0a0a0a; }2:root[data-theme="dark"] { --background: #0a0a0a; --foreground: #fafafa; }

NEXT STEPS