Accordion

Accordion primitive using native details/summary elements.

• 0.7kb gzipped
• Supports both client & server
• No dependencies
• Can be controlled or uncontrolled

Anatomy

• AccordionRoot - The root element for the accordion. (optional)
• AccordionItem - The item element for the accordion.
• AccordionTrigger - The trigger element for the accordion.
• AccordionContent - The content element for the accordion.

<AccordionRoot>
  <AccordionItem>
    <AccordionTrigger>Trigger</AccordionTrigger>
    <AccordionContent>Content</AccordionContent>
  </AccordionItem>
</AccordionRoot>

Usage

components/Accordion/index.tsx

"use client";

import { classed } from "@frend-digital/ui";
import { AccordionPrimitive } from "@frend-digital/ui/components";
import styles from "./index.module.css";

export const AccordionRoot = classed(
  AccordionPrimitive.Root,
  styles.accordionRoot
);

export const AccordionItem = classed(
  AccordionPrimitive.Item,
  styles.accordionItem
);

export const AccordionTrigger = classed(
  AccordionPrimitive.Trigger,
  styles.accordionTrigger
);

export const AccordionContent = classed(
  AccordionPrimitive.Content,
  styles.accordionContent
);