Preview

Usage

Use the Separator component to add lines between each accordion item.

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "natmfat/components/Accordion";
import { Separator } from "natmfat/components/Separator";

<Accordion
  type="multiple"
  className="w-96 max-w-full"
  defaultValue={["item-1"]}
>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
  <Separator />
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>
      Yes. It comes with default styles that matches the other components'
      aesthetic.
    </AccordionContent>
  </AccordionItem>
</Accordion>