Accordion

Standard <details>/<summary> elements are automatically styled to match your Starlight theme. No comment markers needed — the GFM construct is the convention.

Basic usage

What is rehype-gfm-components?

A rehype plugin that transforms standard GFM Markdown into rich documentation components. Write once, render beautifully everywhere.

View Markdown source

<details>
<summary>What is rehype-gfm-components?</summary>

A rehype plugin that transforms standard GFM Markdown
into rich documentation components. Write once, render
beautifully everywhere.

</details>

Multiple accordions

Stack multiple <details> elements for an FAQ-style section.

Do I need MDX?

No. The entire point of this plugin is that you don’t. Standard GFM Markdown with HTML comments gives you the same components that MDX imports provide, without coupling your content to a rendering pipeline.

Does it work on GitHub?

Yes. HTML comments are invisible on GitHub, so your Markdown reads naturally. <details>/<summary> elements render as native expandable sections.

What about other frameworks?

The core rehype plugin is framework-agnostic. The Starlight adapter adds icon loading and tab script injection. Adapters for other frameworks are planned.

View Markdown source

<details>
<summary>Do I need MDX?</summary>

No. The entire point of this plugin is that you don't.

</details>

<details>
<summary>Does it work on GitHub?</summary>

Yes. HTML comments are invisible on GitHub.

</details>

<details>
<summary>What about other frameworks?</summary>

The core rehype plugin is framework-agnostic.

</details>

How it renders

Context	Rendering
GitHub	Native expandable/collapsible section
Starlight	Styled accordion with theme-consistent borders, background, and padding

Parameters

None. No comment markers are needed. Any <details>/<summary> element that is not inside a <!-- tabs --> block is automatically styled as an accordion.

HTML output

The HTML structure is unchanged — the plugin adds theme-consistent styling classes:

<details>
  <summary>Question text</summary>
  <p>Answer content</p>
</details>