Skip to content

Navigation

Accordion

Collapsible sections for FAQs and long settings.

import { AccordionItem, AccordionTrigger, AccordionContent } from '@jsonresume/ui'Source(opens in a new tab)

Examples

FAQ

Show code
accordion/faq.tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@jsonresume/ui';

export default function AccordionFaq() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="what">
        <AccordionTrigger>What is JSON Resume?</AccordionTrigger>
        <AccordionContent>
          An open, community-driven standard for writing a resume as JSON.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="host">
        <AccordionTrigger>Where is my resume hosted?</AccordionTrigger>
        <AccordionContent>
          The registry reads a gist named resume.json from your GitHub account.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="theme">
        <AccordionTrigger>How do I change the theme?</AccordionTrigger>
        <AccordionContent>
          Set meta.theme in your resume, or add ?theme=name to the URL.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Accessibility

  • Triggers are buttons inside headings with aria-expanded.

Props

<AccordionItem>

No props of its own; accepts the attributes of the element it renders.

<AccordionTrigger>

No props of its own; accepts the attributes of the element it renders.

<AccordionContent>

No props of its own; accepts the attributes of the element it renders.