Popover
Free · MITHeadless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.
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
npx astrocraft-ui add overlays/popoverPlain-CSS theme — no build step
npx astrocraft-ui add overlays/popover --theme cssTailwind theme — needs Tailwind v4
npx astrocraft-ui add overlays/popover --theme tailwindPlain-CSS theme, re-pointed onto Lumos tokens
npx astrocraft-ui add overlays/popover --theme css --bridge lumosTailwind theme, re-pointed onto Lumos tokens
npx astrocraft-ui add overlays/popover --theme tailwind --bridge lumosLive demo
Popover
The generic anchored overlay. Scroll the page with one open — it tracks its trigger. Open the bottom one near the foot of the window and it flips, taking its arrow with it, because the arrow reads the data-side the placement code rewrote.
Anchored above its trigger, centred.
Near the right edge of the window this flips to the left on its own.
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.
| Component | Slots | Variants | Runtime state | Native state |
|---|---|---|---|---|
| `Popover.astro` | `popover` | — | — | — |
| `PopoverArrow.astro` | `popover-arrow` | — | — | — |
| `PopoverClose.astro` | `popover-close` | `data-variant`: `primary` · `secondary` · `outline` · `ghost` `data-size`: `sm` · `md` · `lg` | — | — |
| `PopoverContent.astro` | `popover-content` | `data-side`: `bottom` · `top` · `left` · `right` `data-align`: `start` · `center` · `end` | — | — |
| `PopoverTrigger.astro` | `popover-trigger` | `data-variant`: `primary` · `secondary` · `outline` · `ghost` `data-size`: `sm` · `md` · `lg` | — | `[aria-expanded]` |
Source
What the command copies — 6 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.
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div">;
const { class: className, ...rest } = Astro.props;
---
<div class={className} data-slot="popover" {...rest}>
<slot />
</div>
<script>
import "../../_anchor";
</script>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"span">;
const { class: className, ...rest } = Astro.props;
---
<span aria-hidden="true" class={className} data-slot="popover-arrow" {...rest}></span>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"button"> & {
for: string;
variant?: "primary" | "secondary" | "outline" | "ghost";
size?: "sm" | "md" | "lg";
};
const { for: target, variant = "ghost", size = "md", class: className, ...rest } = Astro.props;
---
<button
type="button"
popovertarget={target}
popovertargetaction="hide"
data-slot="popover-close"
data-variant={variant}
data-size={size}
class={className}
{...rest}
>
<slot />
</button>
---
import "../../../../styles/structure.css";
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div"> & {
id: string;
side?: "bottom" | "top" | "left" | "right";
align?: "start" | "center" | "end";
offset?: number;
};
const { side = "bottom", align = "center", offset, class: className, ...rest } = Astro.props;
---
<div
popover="auto"
role="dialog"
data-slot="popover-content"
data-anchor
data-side={side}
data-align={align}
data-offset={offset}
class={className}
{...rest}
>
<slot />
</div>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"button"> & {
for: string;
variant?: "primary" | "secondary" | "outline" | "ghost";
size?: "sm" | "md" | "lg";
};
const { for: target, variant = "outline", size = "md", class: className, ...rest } = Astro.props;
---
<button
type="button"
popovertarget={target}
aria-haspopup="dialog"
aria-expanded="false"
data-slot="popover-trigger"
data-variant={variant}
data-size={size}
class={className}
{...rest}
>
<slot />
</button>
import Popover from "./Popover.astro";
import PopoverArrow from "./PopoverArrow.astro";
import PopoverClose from "./PopoverClose.astro";
import PopoverContent from "./PopoverContent.astro";
import PopoverTrigger from "./PopoverTrigger.astro";
export { Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger };
export default Popover;
What you get
The component source, copied into your project by npx astrocraft-ui add overlays/popover — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.