The browser already
knows what your
interface is.

Mò gives it a visual language: a shadcn-neutral token system over semantic HTML, modern CSS and a touch of vanilla JS. Zero dependencies. No classes required. Your CSS always has the final word — every demo in these docs is a real Mò component styled by the tokens on this very page.

QUICK START

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>3 4<button>Save changes</button>5<mo-tabs>…</mo-tabs>   <!-- behavior via native custom elements -->

GRANULAR — PICK ONLY WHAT YOU USE

1pnpm dlx @sayagodev/mo init      # base theme + shared deps2pnpm dlx @sayagodev/mo add button dialog tabs3 4import "@sayagodev/mo/css/button.css";5import "@sayagodev/mo/js/tabs.js";

START HERE

Base & tokensThe foundation: semantic tokens, reset and shared primitives.ButtonStart with the simplest component — variants are plain classes.DialogNative <dialog> with declarative commandfor open/close.TabsRoving tabindex keyboard model — this site uses it everywhere.

PHILOSOPHY

Semantic first

role=alert, details/summary, <dialog>, button[aria-pressed]. No data-slot hooks, no wrapper soup.

Tokens, not overrides

One --radius resquares the whole library. One --ring recolors every focus state.

Layers lose on purpose

All library CSS lives in @layer. Any unlayered rule you write wins — regardless of load order.

Read the full philosophy →

The browser alreadyknows what yourinterface is.

The browser already
knows what your
interface is.