Accordion

Collapsible content sections for FAQs and grouped settings.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview

Flux UI is an open design system built with React, Tailwind CSS v4, and Radix primitives — the same stack used in production.

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@payglocal_ui/flux-ui";

Example

<Accordion type="single" collapsible>
  <AccordionItem value="q1">
    <AccordionTrigger>What is the settlement cycle?</AccordionTrigger>
    <AccordionContent>Settlements are processed on T+1 business days.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="q2">
    <AccordionTrigger>How do I raise a dispute?</AccordionTrigger>
    <AccordionContent>Navigate to Disputes and click New Dispute.</AccordionContent>
  </AccordionItem>
</Accordion>