Getting started

In three steps

It works without a build: the page loads one CSS file and one JS file, and any element with data-u becomes a component when it gets close to the viewport. If you prefer, install your framework's adapter from npm: see Frameworks.

1. InstallOne command downloads the CSS, the JS, the fonts and the skill.
2. Wire up the pageOne link in the head and one deferred script.
3. Paste the componentA data-u and, if it has any, the props as JSON.

curl -fsSL unslop.leallabs.dev/i | sh

<link rel="stylesheet" href="unslop/unslop.css">
<script src="unslop/unslop.js" defer></script>

The result is this slider, mounted by the system itself. Change the accent and theme of just this preview with the controls above it.

<div data-u="slider" data-u-props='{
  "min": 0,
  "max": 4,
  "value": 2,
  "label": "Effort",
  "left": "Faster",
  "right": "Smarter",
  "texts": ["Minimum", "Low", "Medium", "High", "Maximum"]
}'></div>

Everything included

22 components, 15 charts, 6 AI pieces and 31 ready-made blocks. Every page opens with a working preview, the install command and the props table.

Rules that apply everywhere

• Classes use the u- prefix, in light BEM: u-btn, u-btn--primary, u-card__title.
• State lives in ARIA attributes, never in an .active class: aria-checked, aria-selected, aria-expanded.
• Color only through tokens. Change data-accent on the html tag and every component follows.
• With reduced motion turned on in the OS, everything opens in its final state, still and readable.

Each rule is covered in How it works.