Skip to main content
astrocraft-ui/ components · 101
Shop

Scroll Sentinel

Free · MIT

Headless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.

← ResizableSeparator →

Install

Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).

Unstyled — behavior only, you write the CSS

Install command
npx astrocraft-ui add utility/scroll-sentinel

Plain-CSS theme — no build step

Install command
npx astrocraft-ui add utility/scroll-sentinel --theme css

Tailwind theme — needs Tailwind v4

Install command
npx astrocraft-ui add utility/scroll-sentinel --theme tailwind

Plain-CSS theme, re-pointed onto Lumos tokens

Install command
npx astrocraft-ui add utility/scroll-sentinel --theme css --bridge lumos

Tailwind theme, re-pointed onto Lumos tokens

Install command
npx astrocraft-ui add utility/scroll-sentinel --theme tailwind --bridge lumos

Live demo

ScrollSentinel

Infinite scrolling with a way out: the observer does not call a loader, it clicks the real button — so a keyboard user reaches the next page by the same path. The live region announces the load, and the demo's four lines of app code below announce the result.

  • Item 1
  • Item 2
  • Item 3

Attribute surface

With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.

ComponentSlotsVariantsRuntime stateNative state
`ScrollSentinel.astro``scroll-sentinel` `scroll-sentinel-status` `scroll-sentinel-trigger`———

Source

What the command copies — 2 files, alias-free so the copy lands standing alone. This is the whole component, shown without its comments; the files you install keep them, with the reasoning behind every rule.

src/components/ui/utility/scroll-sentinel/ScrollSentinel.astro
---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div"> & {
  rootMargin?: string;
  loadingLabel?: string;
};

const {
  rootMargin = "200px",
  loadingLabel = "Loading more items…",
  class: className,
  ...rest
} = Astro.props;
---

<div class={className} data-slot="scroll-sentinel" data-root-margin={rootMargin} {...rest}>
  <slot>
    <button type="button" data-slot="scroll-sentinel-trigger">Load more</button>
  </slot>
  <p role="status" data-slot="scroll-sentinel-status" data-loading-label={loadingLabel}></p>
</div>

<script>
  import { onReadyOnce } from "../../_once";

  function wire(root: HTMLElement) {
    const trigger = root.querySelector<HTMLButtonElement>('[data-slot="scroll-sentinel-trigger"]');
    if (!trigger) return;
    const status = root.querySelector<HTMLElement>('[data-slot="scroll-sentinel-status"]');

    trigger.addEventListener("click", () => {
      if (status) status.textContent = status.dataset.loadingLabel ?? "";
    });

    new IntersectionObserver(
      (entries) => {
        if (!entries.some((entry) => entry.isIntersecting)) return;
        if (trigger.disabled || trigger.hidden) return;
        trigger.click();
      },
      { rootMargin: root.dataset.rootMargin || "0px" },
    ).observe(root);
  }

  onReadyOnce('[data-slot="scroll-sentinel"]', wire);
</script>
src/components/ui/utility/scroll-sentinel/index.ts
import ScrollSentinel from "./ScrollSentinel.astro";

export { ScrollSentinel };
export default ScrollSentinel;

What you get

The component source, copied into your project by npx astrocraft-ui add utility/scroll-sentinel — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.