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

#frontend #css #webdev #ui

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

DEV Community