Skip to content
Page

Collapsible

One section that shows and hides from a trigger.

The shell now uses RefineUI for the header, sidebar, search, and footer.

Import

Section titled “Import”
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@pelagornis/page/components";

Example

Section titled “Example”

The preview above renders this file. Copy it into src/components/ to start from it.

src/components/CollapsibleExample.tsx
import { Collapsible, CollapsibleContent, CollapsibleTrigger, Text } from "@pelagornis/page/components";


export default function CollapsibleDemo() {
  return (
    <Collapsible defaultOpen className="w-full">
      <CollapsibleTrigger>Release notes</CollapsibleTrigger>
      <CollapsibleContent>
        <Text variant="bodyMd">The shell now uses RefineUI for the header, sidebar, search, and footer.</Text>
      </CollapsibleContent>
    </Collapsible>
  );
}

Use in MDX

Section titled “Use in MDX”

Collapsible is composed from parts that share React state. Children written in MDX are rendered as separate islands, so the parts can’t reach each other. Put the composition in a .tsx file, like the example above, and import that file instead.

src/content/docs/example.mdx
---
title: Example
---


import CollapsibleExample from "../../components/CollapsibleExample";


<CollapsibleExample client:load />

client:load hydrates the island on page load. Use client:visible for content far down the page.

Use in Markdoc

Section titled “Use in Markdoc”

Markdoc tags render Astro components, and this one needs client state. Wrap the example in an .astro file that hydrates it, then register that file as a tag.

src/components/markdoc/CollapsibleExample.astro
---
import CollapsibleExample from "../CollapsibleExample";
---


<CollapsibleExample client:load />
markdoc.config.mjs
import { component, defineMarkdocConfig } from "@astrojs/markdoc/config";
import starlightMarkdoc from "@astrojs/starlight-markdoc";
import pageMarkdoc from "@pelagornis/page/markdoc";


export default defineMarkdocConfig({
  extends: [starlightMarkdoc(), pageMarkdoc()],
  tags: {
    "collapsible-example": {
      render: component("./src/components/markdoc/CollapsibleExample.astro"),
      selfClosing: true,
    },
  },
});
src/content/docs/example.mdoc
{% collapsible-example /%}

Reference

Section titled “Reference”