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

Collapsible

Free · MIT

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

← AccordionLive Region →

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/collapsible

Plain-CSS theme — no build step

Install command
npx astrocraft-ui add utility/collapsible --theme css

Tailwind theme — needs Tailwind v4

Install command
npx astrocraft-ui add utility/collapsible --theme tailwind

Plain-CSS theme, re-pointed onto Lumos tokens

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

Tailwind theme, re-pointed onto Lumos tokens

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

Live 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?
Because an Accordion is a group, and its items take a shared 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.

ComponentSlotsVariantsRuntime stateNative 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, shown without its comments; the files you install keep them, with the reasoning behind every rule.

src/components/ui/utility/collapsible/Collapsible.astro
---
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
---
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
---
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>
src/components/ui/utility/collapsible/index.ts
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.