Components

Accordion

Add Accordions to your documentation

import { … } from '@hanzo/docs-ui/components/accordion';

Usage

Based on Radix UI Accordion, useful for FAQ sections.

For @hanzo/docs-ui, this is based on Base UI instead.

Use it in MDX files or as a normal React component.

---
title: Hello World
---

import { Accordion, Accordions } from '@hanzo/docs/ui/components/accordion';

<Accordions type="single">
  <Accordion title="My Title">My Content</Accordion>
</Accordions>
import { Accordion, Accordions } from '@hanzo/docs/ui/components/accordion';

export default function Page() {
  return (
    <Accordions type="single">
      <Accordion title="My Title">My Content</Accordion>
    </Accordions>
  );
}

Accordions

PropType

Accordion

PropType

Linking to Accordion

You can specify an id for accordion. The accordion will automatically open when the user is navigating to the page with the specified id in hash parameter.

<Accordions>
<Accordion title="My Title" id="my-title">

My Content

</Accordion>
</Accordions>

The value of accordion is same as title by default. When an id presents, it will be used as the value instead.

How is this guide?
Components
Additional components to improve your docs
Auto Type Table
Auto-generated type table