multistyle-ui

Framework-free, classless CSS UI with 12 styles, 30 themes and light/dark mode. This page is built with the library itself: every example below is written once and rendered live plus as copyable source.

1. Getting started

Then write plain HTML. Classless elements are styled automatically; a handful of short classes opt in to extra components.

2. Styles

Twelve looks. Each card is scoped with its own style-* class, so they coexist on one page. Press a button to apply a style to the whole page.

3. Themes

Thirty themes (19 colour themes, 10 named themes and custom). Swatches show the primary and secondary shades 50 to 950.

4. Custom theme

Pick any three colours. The surface should be a light colour; dark mode derives its own surface.

Primary Secondary Surface

Generated snippet

Same thing from JS: .

5. Components

42 components, one tab each, with live Preview and copyable Code views and deep links. They live on their own page.

Open the component explorer

6. JS API

Everything hangs off window.MS.

API	What it does
`MS.set({style, theme, mode, primary, secondary, surface}, el?)`	Swap classes (and custom tokens inline). A colour without a theme implies `custom`.
`MS.get(el?)`	`{style, theme, mode, resolvedMode}`
`MS.toggleMode()`	Cycle light, dark, system.
`MS.styles / themes / modes`	Lists of valid values.
`MS.set({..., font}, el?)`	`font`: a key of `MS.fonts` (case-insensitive), any CSS font-family string, or `'auto'` (style default). Lazy-loads Google Fonts.
`MS.fonts`	Curated font keys for `select[data-ms=font]`.
`MS.toast(msg, {type, timeout, dismissible, title, position, icon})`	`position`: top\|bottom + left\|center\|right (default bottom-right); `icon` is a Material Symbols name. Declarative: `data-ms-toast-position`, `data-ms-toast-title`.
`MS.command(sel)`	Open a `dialog.command` palette (also Ctrl/Cmd+K). Fires `ms:command`.
`MS.paginate(nav, {total, current, window})`	Render a generated pager; fires `ms:page {page}`.
`MS.multiselect(el)`	Init a `select[multiple]` as chips + listbox (auto for `[data-ms-multiselect]`).
`MS.code(el, {language, lines})`	Code editor on a textarea; returns `{el, update(), destroy()}`. Highlights if Prism is loaded.
Events `ms:command` `ms:sort` `ms:page` `ms:select` `ms:dismiss`	Bubbling CustomEvents; `detail`: `{value, el}`, `{from, to, order}`, `{page}`, `{values}`, and `{}` (fires before removal).
`<select data-ms="font">`	Auto-populated font switcher (persisted with `data-ms-persist`).
`data-ms-dismiss`	Removes the closest alert, chip, toast or `[data-ms-dismissable]`.
`data-ms-sortable`, `data-ms-handle`	Drag/keyboard reorder of a list; `="horizontal"` for rows.
`data-ms-multiselect`, `data-ms-counter`	Multi-select widget; character counter on a `textarea[maxlength]`.
`data-ms-code="lang"`, `data-ms-lines`	Code editor textarea, optional line numbers.
`data-ms-autoplay`, `-arrows`, `-dots`	Carousel extras (autoplay in ms, pauses on hover/focus).
`data-ms-pages`, `-page`, `-window`	Generate a pagination nav.
`data-ms-select="single\|multi"`	Toggle `aria-pressed` in a `role=group`.
`data-ms-hover-popover="#id"`	Show a popover on hover/focus.
`<body data-ms-icons="off">`	Do not load Material Symbols (self-host).
`MS.chart(canvas, config)`	Create a themed Chart.js chart.
`MS.open(sel) / MS.close(sel)`	Open or close a `dialog`.
`MS.resolveColor(token\|color)`	Plain rgb() text for any token or colour (Chart.js safe).
`ms:change` event	On `document`; `detail` is `MS.get()`. Also fires when the OS scheme changes in system mode.
`<select data-ms="style\|theme\|mode">`	Auto-populated, auto-wired switcher.
`data-ms-mode-toggle`	Button that cycles the mode.
`data-ms-open="#id"` / `data-ms-close`	Open or close a dialog without JS.
`data-ms-toast` / `data-ms-toast-type`	Click to show a toast.
`data-ms-chart`, `-data`, `-options`	Declarative chart on a canvas.
`<body data-ms-persist>`	Remember choices in localStorage.
`<body data-ms-fonts="off">`	Do not load Google Fonts.
`$store.ms`, `$ms`	Alpine store and magic (load multistyle before Alpine).