Accordion
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 utility/accordionPlain-CSS theme — no build step
npx astrocraft-ui add utility/accordion --theme cssTailwind theme — needs Tailwind v4
npx astrocraft-ui add utility/accordion --theme tailwindPlain-CSS theme, re-pointed onto Lumos tokens
npx astrocraft-ui add utility/accordion --theme css --bridge lumosTailwind theme, re-pointed onto Lumos tokens
npx astrocraft-ui add utility/accordion --theme tailwind --bridge lumosLive demo
Accordion
What is astro-boiler?
name makes the group mutually exclusive, no JavaScript involved.Is it zero-JS?
name makes the group mutually exclusive, no JavaScript involved.Can I theme it?
name makes the group mutually exclusive, no JavaScript involved.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 |
|---|---|---|---|---|
| `Accordion.astro` | `accordion` | — | — | — |
| `AccordionContent.astro` | `accordion-content` | — | — | — |
| `AccordionItem.astro` | `accordion-item` | — | — | `[open]` |
| `AccordionTrigger.astro` | `accordion-trigger` `chevron` | — | — | — |
Source
What the command copies — 5 files, alias-free so the copy lands standing alone. This is the whole component; there is nothing else.
---
// src/components/ui/utility/accordion/Accordion.astro — headless primitive (see ../../README.md).
// Zero-JS disclosure group on native <details>/<summary>. Compose AccordionItem /
// AccordionTrigger / AccordionContent. For "one open at a time", give every AccordionItem the same
// `name` (native exclusive-accordion behavior).
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div">;
const { class: className, ...rest } = Astro.props;
---
<div class={className} data-slot="accordion" {...rest}>
<slot />
</div>
---
// src/components/ui/utility/accordion/AccordionContent.astro — Accordion compound part (see ../../README.md).
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div">;
const { class: className, ...rest } = Astro.props;
---
<div class={className} data-slot="accordion-content" {...rest}>
<slot />
</div>
---
// src/components/ui/utility/accordion/AccordionItem.astro — Accordion compound part (see ../../README.md).
// Native <details>; pass a shared `name` across items to make the group mutually exclusive (the
// native `name` flows through via {...rest}). Rotates the trigger chevron when open via a
// descendant selector (no JS).
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"details">;
const { class: className, ...rest } = Astro.props;
---
<details class={className} data-slot="accordion-item" {...rest}>
<slot />
</details>
---
// src/components/ui/utility/accordion/AccordionTrigger.astro — Accordion compound part (see ../../README.md).
// <summary> row: hides the native marker and renders a chevron the parent rotates when open.
import "../../../../styles/structure.css";
import type { HTMLAttributes } from "astro/types";
import Chevron from "../../_Chevron.astro";
type Props = HTMLAttributes<"summary">;
const { class: className, ...rest } = Astro.props;
---
<summary class={className} data-slot="accordion-trigger" {...rest}>
<slot />
<slot name="chevron"><Chevron /></slot>
</summary>
import Accordion from "./Accordion.astro";
import AccordionContent from "./AccordionContent.astro";
import AccordionItem from "./AccordionItem.astro";
import AccordionTrigger from "./AccordionTrigger.astro";
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
export default Accordion;
What you get
The component source, copied into your project by npx astrocraft-ui add utility/accordion — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.