Primeiros passos

Em três passos

Nada de npm nem de build. A página carrega um CSS e um JS, e qualquer elemento com data-u vira componente quando chega perto da tela.

1. InstaleUm comando baixa o CSS, o JS, as fontes e a skill.
2. Ligue na páginaUm link no head e um script com defer.
3. Cole o componenteUm data-u e, se ele tiver, as props em JSON.

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

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

O resultado é este slider, montado pelo próprio sistema. Troque o acento e o tema só do preview nos controles acima dele.

<div data-u="slider" data-u-props='{
  "min": 0,
  "max": 4,
  "value": 2,
  "label": "Esforço",
  "left": "Mais rápido",
  "right": "Mais inteligente",
  "texts": ["Mínimo", "Baixo", "Médio", "Alto", "Máximo"]
}'></div>

Tudo o que tem

22 componentes, 15 gráficos, 6 peças de IA e 31 blocos prontos. Cada página abre com o preview funcionando, o comando de instalação e a tabela de props.

O que vale pra tudo

• Classe com prefixo u-, em BEM leve: u-btn, u-btn--primary, u-card__title.
• Estado em atributo ARIA, nunca em classe .active: aria-checked, aria-selected, aria-expanded.
• Cor só por token. Trocou data-accent no html, todo componente acompanha.
• Com movimento reduzido no sistema, tudo abre no estado final, parado e legível.

O detalhe de cada regra está em Como funciona.