components / collapsible-prose

collapsible-prose.

long-form reading layout that splits markdown into collapsible <details> sections on each ## heading, each with a rotating chevron. content before the first ## renders as a plain intro. bring your own renderer via renderMarkdown — typically the prose component. dark-only.

a short intro paragraph renders flat, above the first collapsible section. everything after a ## heading folds into its own <details>.

getting started

each section toggles independently. click a heading to collapse it.

  • the chevron rotates on open
  • ids are slugged for deep links

how it works

content is split on every level-two heading. the body of each section is handed to your renderMarkdown function — here, the prose component.

<CollapsibleProse renderMarkdown={(md) => <Prose>{md}</Prose>}>
  {markdown}
</CollapsibleProse>

notes

pure native <details> — no javascript state, deep-linkable headings.

installation
bunx @justin06lee/chrome@latest add collapsible-prose