Collapsible
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/collapsiblePlain-CSS theme — no build step
npx astrocraft-ui add utility/collapsible --theme cssTailwind theme — needs Tailwind v4
npx astrocraft-ui add utility/collapsible --theme tailwindPlain-CSS theme, re-pointed onto Lumos tokens
npx astrocraft-ui add utility/collapsible --theme css --bridge lumosTailwind theme, re-pointed onto Lumos tokens
npx astrocraft-ui add utility/collapsible --theme tailwind --bridge lumosLive demo
Collapsible
Accordion without the group: no shared name, no mutual exclusion, nothing to reason about. Zero JavaScript — the browser owns the state and announces it.
Why is this not Accordion?
name to become mutually exclusive. A single "show more" should not have to opt out of exclusivity it never wanted.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 |
|---|---|---|---|---|
| `Collapsible.astro` | `collapsible` | — | — | — |
| `CollapsibleContent.astro` | `collapsible-content` | — | — | — |
| `CollapsibleTrigger.astro` | `chevron` `collapsible-trigger` | — | — | — |
Source
What the command copies — 4 files, alias-free so the copy lands standing alone. This is the whole component; there is nothing else.
---
// src/components/ui/utility/collapsible/Collapsible.astro — headless primitive (see ../../README.md).
// One disclosure, on native <details>. Accordion's sibling — and deliberately NOT the same thing:
// Accordion is a GROUP, and its items take a shared `name` to become mutually exclusive. A
// Collapsible has no group, no `name`, and no relationship to anything beside it, so a consumer who
// wants a single "show more" does not have to reason about exclusivity they are not using.
//
// Zero-JS: `[open]` is the state, `<summary>` is the button, and the browser announces the expanded
// state itself. Compose CollapsibleTrigger + CollapsibleContent.
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"details">;
const { class: className, ...rest } = Astro.props;
---
<details class={className} data-slot="collapsible" {...rest}>
<slot />
</details>
---
// src/components/ui/utility/collapsible/CollapsibleContent.astro — Collapsible 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="collapsible-content" {...rest}>
<slot />
</div>
---
// src/components/ui/utility/collapsible/CollapsibleTrigger.astro — Collapsible compound part (see ../../README.md).
// <summary> row: the native marker is suppressed by structure.css (two markers otherwise) and the
// library's one chevron is rendered instead. A theme rotates it from the parent's `[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="collapsible-trigger" {...rest}>
<slot />
<slot name="chevron"><Chevron /></slot>
</summary>
import Collapsible from "./Collapsible.astro";
import CollapsibleContent from "./CollapsibleContent.astro";
import CollapsibleTrigger from "./CollapsibleTrigger.astro";
export { Collapsible, CollapsibleContent, CollapsibleTrigger };
export default Collapsible;
What you get
The component source, copied into your project by npx astrocraft-ui add utility/collapsible — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.