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

Banner

Free · MIT

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

← BadgeCard →

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 display/banner

Plain-CSS theme — no build step

Install command
npx astrocraft-ui add display/banner --theme css

Tailwind theme — needs Tailwind v4

Install command
npx astrocraft-ui add display/banner --theme tailwind

Plain-CSS theme, re-pointed onto Lumos tokens

Install command
npx astrocraft-ui add display/banner --theme css --bridge lumos

Tailwind theme, re-pointed onto Lumos tokens

Install command
npx astrocraft-ui add display/banner --theme tailwind --bridge lumos

Live demo

Banner

Dismiss it and watch where the keyboard goes: focus moves to the page's main landmark rather than falling to <body>, which is what sends a screen reader back to the top of the document. Persistence is yours — listen forbanner:dismiss.

You are looking at a staging build. Data here is reset every night.

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
`Banner.astro``banner`———
`BannerClose.astro``banner-close``data-variant`: `primary` · `secondary` · `outline` · `ghost`
`data-size`: `sm` · `md` · `lg`		——

Source

What the command copies — 3 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/display/banner/Banner.astro
---
import type { HTMLAttributes } from "astro/types";

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

const { label = "Notice", class: className, ...rest } = Astro.props;
---

<div role="region" aria-label={label} class={className} data-slot="banner" {...rest}>
  <slot />
</div>

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

  function wire(banner: HTMLElement) {
    banner.addEventListener("click", (event) => {
      if (!(event.target instanceof Element)) return;
      if (!event.target.closest('[data-slot="banner-close"]')) return;

      banner.hidden = true;
      banner.dispatchEvent(new Event("banner:dismiss", { bubbles: true }));

      const landing = document.querySelector<HTMLElement>("main") ?? document.body;
      landing.tabIndex = -1;
      landing.focus({ preventScroll: true });
    });
  }

  onReadyOnce('[data-slot="banner"]', wire);
</script>
src/components/ui/display/banner/BannerClose.astro
---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"button"> & {
  label?: string;
  variant?: "primary" | "secondary" | "outline" | "ghost";
  size?: "sm" | "md" | "lg";
};

const {
  label = "Dismiss",
  variant = "ghost",
  size = "sm",
  class: className,
  ...rest
} = Astro.props;
---

<button
  type="button"
  aria-label={label}
  data-slot="banner-close"
  data-variant={variant}
  data-size={size}
  class={className}
  {...rest}
>
  <slot />
</button>
src/components/ui/display/banner/index.ts
import Banner from "./Banner.astro";
import BannerClose from "./BannerClose.astro";

export { Banner, BannerClose };
export default Banner;

What you get

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