Fluent UI on demo.crotolamo.eu

Live demo of Microsoft Fluent UI 3 web components — native custom elements, real Fluent theme tokens, no framework and no build step. Served by the Crotolamo VM through the self-hosted Nginx Proxy Manager chain.

v3.1.3 self-hosted zero build

Buttons

Clicked 0 times Standard Outline
Subtle Transparent Disabled
Compound button Button with a description line

Counter: 0

Forms

Your name Echo appears below as you type. Favourite city Graz Wien Salzburg Innsbruck
Subscribe Dark mood
Lizard Frog

Hello, stranger — you picked lizard, from —.

Status & progress

Indeterminate spinners

Determinate progress: 40%

done pending blocked 5 draft

Messages & disclosure

Heads up: this is a plain info message bar. Certificate issued by Let's Encrypt, valid until Jan 2027. The LAN resolver may lag a few minutes on new DNS records. What powers this page? A vendored ES module bundle of @fluentui/web-components v3.1.3 plus the Fluent token theme — plain HTML, vanilla JS, one static file. How is it served? Cloudflare DNS → router → Tizona NPM (TLS termination, Let's Encrypt) → VM NPM → python http.server on the Crotolamo VM.

Overlays

Actions menu Open dialog Hover me Tooltips anchor by element id.

Menu, dialog and tooltip all from the same bundle — no overlay library.

Fluent dialog

Modals in Fluent v3 ship with focus trapping and a backdrop.

Nice Cancel

Structure

Files Notes
crotolamo/ index.html vendor/ fluent-all.min.js tokens.mjs