Accordion

The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.
Installation
API Reference
Examples
This is an illustration of Accordion component.
size
variant
type
isCollapsible
isDisabled
<Accordion
size="md"
variant="filled"
type="single"
isCollapsible={true}
isDisabled={false}
className="m-5 w-[90%]"
>
<AccordionItem value="a">
<AccordionHeader>
<AccordionTrigger>
{({ isExpanded }) => {
return (
<>
<AccordionTitleText>How do I place an order?</AccordionTitleText>
{isExpanded ? (
<AccordionIcon as={ChevronUpIcon} className="ml-3" />
) : (
<AccordionIcon as={ChevronDownIcon} className="ml-3" />
)}
</>
)
}}
</AccordionTrigger>
</AccordionHeader>
<AccordionContent>
<AccordionContentText>
To place an order, simply select the products you want, proceed to
checkout, provide shipping and payment information, and finalize your
purchase.
</AccordionContentText>
</AccordionContent>
</AccordionItem>
<AccordionItem value="b">
<AccordionHeader>
<AccordionTrigger>
{({ isExpanded }) => {
return (
<>
<AccordionTitleText>
What payment methods do you accept?
</AccordionTitleText>
{isExpanded ? (
<AccordionIcon as={ChevronUpIcon} className="ml-3" />
) : (
<AccordionIcon as={ChevronDownIcon} className="ml-3" />
)}
</>
)
}}
</AccordionTrigger>
</AccordionHeader>
<AccordionContent>
<AccordionContentText>
We accept all major credit cards, including Visa, Mastercard, and
American Express. We also support payments through PayPal.
</AccordionContentText>
</AccordionContent>
</AccordionItem>
</Accordion>

Installation

Run the following command:

npx gluestack-ui add accordion