Introducing overlapui.css — drop-in overlap stacks for any stack

You want stacked avatars, a peeking card pile, or a “+” that fans into actions — and you don’t want a JS component library or an FSCSS build step just for that.

overlapui.css is the plain-CSS build of overlapui: same behavior as the FSCSS module, shipped as a single stylesheet you can link from npm or jsDelivr and use with utility class names.

Works with any modern web setup: static HTML, React, Vue, Svelte, Next, Nuxt, Astro, WordPress themes — if you can load a CSS file, you can use it.

Install

npm

npm install overlapui

<link rel="stylesheet" href="node_modules/overlapui/overlapui.css">

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlapui@1.0.0/overlapui.min.css">

CSS import

@import url("https://cdn.jsdelivr.net/npm/overlapui@1.0.0/overlapui.min.css");

No FSCSS process required for this path.

Utility classes (drop-in)

Class	Role
`.avatar-overlap`	Horizontal face stack (`data-alph` + optional `img`)
`.card-overlap`	Vertical notification / card stack
`.img-overlap`	Overlapping photo strip
`.circle-overlap`	Radial menu (`--n` = satellite count)

Theme with --ou-* variables on :root or a parent — no preprocessor.

Minimal example

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>overlapui CSS-only</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlapui@1.0.0/overlapui.min.css"> <style> :root { --ou-center-bg: #6366f1; --ou-ring: #0f172a; } body { margin: 0; min-height: 100vh; display: grid; place-items: center; gap: 48px; background: #0b1220; } </style> </head> <body> <ul class="avatar-overlap" tabindex="0"> <li data-alph="g">G</li> <li data-alph="h">H</li> <li data-alph="i">I</li> <li data-alph="j">J</li> </ul> <div class="circle-overlap" style="--n:5" tabindex="0"> <button type="button" aria-label="Menu">+</button> <a href="#" aria-label="Home">H</a> <a href="#" aria-label="Search">S</a> <a href="#" aria-label="Chat">C</a> <a href="#" aria-label="Groups">G</a> <a href="#" aria-label="Profile">P</a> </div> </body> </html>

Hover or focus a stack to open it. Interaction is CSS-only.

Frameworks

Same classes in JSX/Vue/Svelte markup:

<ul className="avatar-overlap" tabIndex={0}> <li data-alph="a">Ada</li> <li data-alph="b">Bo</li> </ul>

Import once in the app shell (layout.css, global.css, or import 'overlapui/overlapui.css').

Lightweight by design

Compiled from overlapui.fscss — one focused module, not a full design system
No runtime JS for open/close
Tokens (--ou-size, --ou-overlap, --ou-center-bg, …) keep restyles local
Prefer the FSCSS source when you need custom selectors or a smaller selective compile; use .css when you want drop-in speed