Accordion

Stacked sections that expand one or many at a time.

Run bun add @pelagornis/page and register the plugin in Starlight.

Import

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@pelagornis/page/components";

Example

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

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@pelagornis/page/components";

export default function AccordionDemo() {
  return (
    <Accordion type="single" collapsible defaultValue="install" className="w-full">
      <AccordionItem value="install">
        <AccordionTrigger>How do I install the theme?</AccordionTrigger>
        <AccordionContent>Run bun add @pelagornis/page and register the plugin in Starlight.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="css">
        <AccordionTrigger>Do I import any CSS?</AccordionTrigger>
        <AccordionContent>No. The plugin injects the RefineUI stylesheets.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="components">
        <AccordionTrigger>Where do components come from?</AccordionTrigger>
        <AccordionContent>@pelagornis/page/components re-exports @refineui/react.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Use in MDX

Accordion 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.

---
title: Example
---

import AccordionExample from "../../components/AccordionExample";

<AccordionExample client:load />

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

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.

---
import AccordionExample from "../AccordionExample";
---

<AccordionExample client:load />

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: {
    "accordion-example": {
      render: component("./src/components/markdoc/AccordionExample.astro"),
      selfClosing: true,
    },
  },
});

{% accordion-example /%}

Variants

Values the component accepts for each variant prop.

Prop	Values
`size`	`sm` `md` `lg`
`type`	`single` `multiple`

Anatomy

Parts of the component and the data-refineui role each one renders.

Part	Role
`root`	accordion
`item`	accordion-item
`trigger`	accordion-trigger
`panel`	accordion-panel
`content`	accordion-content

States

States the component styles. Component states are exposed as data attributes.

Kind	States
Pseudo	`focus-visible`
data-state	`open` `closed`

Keyboard

Keys the component handles when it has focus.

Key	Action
`ArrowDown`	next-trigger
`ArrowUp`	previous-trigger
`Home`	first-trigger
`End`	last-trigger

Reference

RefineUI · Accordion for design guidance and token detail.
Use in MDX and Use in Markdoc for the general rules.