Skip to content
Frend Front

Accordion

Stats

  • Final Implementation time: 30m
  • Implementation time (pages dir): 4h
  • Implementation time (app dir): 1h
Terminal window
pnpx @frend-digital/cli add Accordion

Anatomy

import {
  AccordionContent,
  AccordionItem,
  AccordionRoot,
  AccordionTrigger,
} from "@/components/ui/Accordion";


export default function AccordionPreview() {
  return (
    <AccordionRoot style={{ width: "100%" }}>
      <AccordionItem value="item-1">
        <AccordionTrigger>Accordion Item 1</AccordionTrigger>
        <AccordionContent>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Accordion Item 2</AccordionTrigger>
        <AccordionContent>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </AccordionContent>
      </AccordionItem>
    </AccordionRoot>
  );
}