components / collapsible-prose

collapsible-prose.

splits markdown into collapsible sections on each ## heading. bring your own renderer via renderMarkdown — typically prose.

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
props
nametypedefaultdescription
children *string-markdown source; split on ## headings.
renderMarkdown *(markdown: string) => ReactNode-renders a markdown string — typically (md) => <Prose>{md}</Prose>.
defaultOpenbooleantruewhether sections start expanded.