Accordion
Collapsible content panels for organizing long content into expandable sections.
import { Accordion, AccordionItem, Collapsible, FAQAccordion } from 'wss3-forge'Usage
•
Use for content that can be hidden to reduce visual complexity
•
Set multiple={true} to allow multiple panels open
•
AccordionItem supports icon, subtitle, and badge
•
Collapsible for standalone collapsible sections
•
FAQAccordion for pre-styled FAQ sections
Forge is a modern React component library.
Copy the .forge folder to your project.
Yes, completely free to use.
Examples
Basic Accordion
Forge is a modern React component library designed for dark-mode first applications.
Copy the .forge folder to your project and import components from it.
Yes, Forge is completely free to use in personal and commercial projects.
1<Accordion>2 <AccordionItem id="1" title="What is Forge?">3 Forge is a modern React component library.4 </AccordionItem>5 <AccordionItem id="2" title="How to install?">6 Copy the .forge folder to your project.7 </AccordionItem>8 <AccordionItem id="3" title="Is it free?">9 Yes, Forge is completely free to use.10 </AccordionItem>11</Accordion>With Default Expanded
This section starts expanded when the page loads.
Click the header to expand this section.
1<Accordion defaultExpanded="1">2 <AccordionItem id="1" title="Expanded by default">3 This section starts expanded.4 </AccordionItem>5 <AccordionItem id="2" title="Collapsed">6 Click to expand.7 </AccordionItem>8</Accordion>Previous
Tooltip
Next
Avatar
Last updated: December 2025