Accordion

Component 28

About

Accordions to your documentation Based on Radix UI Accordion, useful for FAQ sections. 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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Accordion to your project and fits it to your theme.

Code

How Accordion is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

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

function Demo() {
  return (
    <Accordions className="w-full">
      <Accordion id="what-is-fumadocs" title="What is Fumadocs?">
        <p>A framework for building documentations</p>
      </Accordion>
      <Accordion id="what-do-we-love" title="What do we love?">
        <p>We love building great developer experiences</p>
      </Accordion>
    </Accordions>
  );
}

export { Demo }