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 manager 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
Lands as mo/css/*.css + mo/js/*.js — import "mo/index.css" and import "mo/index.js" is enough.
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.ts1<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.
YOUR FIRST COMPONENT
A button is a button. Write the element, get the design — this one is live:
1<button type="button">Save changes</button>2<button type="button" data-variant="secondary">Secondary</button>3<button type="button" class="outline">Outline</button>4<button type="button" class="ghost">Ghost</button>
IN YOUR FRAMEWORK
Next.js
Import the CSS in the root layout and load the script after hydration — the custom elements upgrade on connect (attributes are the API, so SSR HTML works un-upgraded).
1// app/layout.tsx2import "./globals.css";3import "@sayagodev/mo/css";4 5import Script from "next/script";6<Script src="https://unpkg.com/@sayagodev/mo@latest/mo.min.js"7 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
- 1Browse the components — every demo is live and copy-pasteable.
- 2Make it yours on the customization playground — edit tokens and hooks in real time.
- 3Check the accessibility notes to see what you get for free.