A Complete Guide to Building Accordion Controls in SPFx

When building modern SharePoint Framework (SPFx) solutions, developers often need a way to organize content in a structured yet user-friendly manner. Long pages of information can overwhelm users, and this is where an accordion control becomes highly valuable.

An accordion allows you to expand and collapse sections of content, making it easier to present large amounts of data in a compact format. It is frequently used in FAQs, forms, dashboards, and settings pages.

In this article, we will explore how to implement an accordion control in SPFx using three popular React libraries:

Fluent UI (Microsoft’s official UI library)
PnP SPFx Controls
Mantine (a modern React component library)

Why Use Accordion in SPFx?

Improved readability: Breaks down content into digestible sections.
Better user experience: Reduces scrolling and clutter.
Reusable patterns: Make forms, FAQs, and dashboards look professional.
Flexibility: Each library offers different styling and customization options.

Option 1. Accordion with Fluent UI

Fluent UI is Microsoft’s React-based library and is widely used in SPFx solutions.

Installation

Fluent UI is already included in SPFx projects, but you can update to the latest version if required:

npm install @fluentui/react

Example Code

import * as React from "react";
import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from "@fluentui/react-components";

export const FluentAccordion: React.FC = () => {
  return (
    <Accordion>
      <AccordionItem value="1">
        <AccordionHeader>General Information</AccordionHeader>
        <AccordionPanel>Details about general information go here.</AccordionPanel>
      </AccordionItem>
      <AccordionItem value="2">
        <AccordionHeader>Additional Details</AccordionHeader>
        <AccordionPanel>Here are some additional details.</AccordionPanel>
      </AccordionItem>
      <AccordionItem value="3">
        <AccordionHeader>Attachments</AccordionHeader>
        <AccordionPanel>Users can upload or view files here.</AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
};

Option 2. Accordion with PnP Controls

While the PnP SPFx React Controls package does not have a dedicated “Accordion” control, you can achieve accordion-like behavior using its Collapsible or ListView controls combined with expand/collapse logic.

Installation

npm install @pnp/spfx-controls-react --save

Example Code

import * as React from "react";
import { Accordion } from "@pnp/spfx-controls-react/lib/Accordion";

export const PnPAccordion: React.FC = () => {
  return (
    <Accordion
      title="General Information"
      defaultCollapsed={false}
    >
      <p>Details about general information go here.</p>
    </Accordion>
  );
};

Option 3. Accordion with Mantine

Mantine is a modern React component library that offers highly customizable UI elements. It works well in SPFx projects and has an elegant accordion control.

Installation

npm install @mantine/core @emotion/react

Example Code

import * as React from "react";
import { Accordion } from "@mantine/core";

export const MantineAccordion: React.FC = () => {
  return (
    <Accordion>
      <Accordion.Item value="general">
        <Accordion.Control>General Information</Accordion.Control>
        <Accordion.Panel>Details about general information go here.</Accordion.Panel>
      </Accordion.Item>

      <Accordion.Item value="details">
        <Accordion.Control>Additional Details</Accordion.Control>
        <Accordion.Panel>Here are some additional details.</Accordion.Panel>
      </Accordion.Item>

      <Accordion.Item value="attachments">
        <Accordion.Control>Attachments</Accordion.Control>
        <Accordion.Panel>Upload or view files here.</Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  );
};

Comparison of Libraries

Library	Pros	Cons
Fluent UI	Official Microsoft design, native to SPFx, consistent look	Limited customization compared to modern libraries
PnP Controls	Designed for SharePoint, integrates well with SPFx property panes	Limited styling flexibility, basic accordion
Mantine	Modern, highly customizable, smooth animations	Extra dependency (not included in SPFx by default)

Best Practices

Choose based on context: Fluent UI for native SharePoint feel, Mantine for modern UI, PnP for quick SPFx integrations.
Limit expanded sections: Keep only one or two sections open at a time for readability.
Use descriptive headings: Users should know what’s inside before expanding.
Test performance: On large lists or dashboards, ensure accordions don’t slow rendering.

Conclusion

The accordion is a powerful UI pattern for organizing content in SPFx solutions. Depending on your project requirements, you can:

Use Fluent UI for a native Microsoft look and feel.
Use PnP Controls for quick integration with SharePoint property panes.
Use Mantine for modern, customizable, and stylish designs.

By selecting the right library and following best practices, you can deliver solutions that are not only functional but also intuitive and engaging for end users.