Pillar UI React Accordions Component documentation
Enhance user experience with our React Accordion component. Easily create collapsible content sections for FAQs, product descriptions, tutorials, and more.
Components:
Type
import
import { Pillar UI React Accordions Component } from '@pillar-ui/core'
Props
The Accordion component is a reusable component that allows you to create a collapsible accordion interface.
Type
- Type: string
- Default:
single
- Options:
single
|multiple
type: Specifies the type of accordion. It can be either "single" or "multiple". If "single", only one item can be open at a time. If "multiple", multiple items can be open at the same time. By default, the type is "single".
Accordion Type Single
Accordion Type Multiple
function AccordionType() {
return (
<>
<Accordion type="single">
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error
odio animi mollitia? Blanditiis
</Accordion.Panel>
</Accordion.Item>
</Accordion>
<Accordion type="multiple">
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error
odio animi mollitia? Blanditiis
</Accordion.Panel>
</Accordion.Item>
</Accordion>
</>
)
}
Certainly! Here's the updated separation of the props into different sections and the removal of the separate
prop from the corner
section:
Corner Props
The size prop determines the corners of the Accordion. It accepts any of the Size types defined in your library. If not provided, it defaults to the md
size.
- Type: string
- Default:
md
- Options:
sharp
|xs
|sm
|md
|lg
|circle
|full
Example Usage
function AccordionBase(props) {
return (
<Accordion {...props}>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
animi mollitia? Blanditiis
</Accordion.Panel>
</Accordion.Item>
</Accordion>
)
}
function CornerCorners() {
return (
<div>
<AccordionBase color="bg" variant="solid" corner="sharp" />
<AccordionBase color="bg" variant="soft" corner="sm" />
<AccordionBase color="bg" variant="outline" corner="md" />
<AccordionBase color="bg" variant="solid" corner="lg" />
<AccordionBase color="bg" variant="soft" corner="xl" />
<AccordionBase color="bg" variant="outline" corner="full" />
</div>
)
}
Separate Props
The separate prop determines whether to separate the accordion items or not. If set to true
, it separates the accordion items with a border. If not provided, it defaults to false
.
- Type: boolean
- Default:
false
- Options:
true
|false
Example Usage
Example Usage
function AccordionBase(props) {
return (
<Accordion {...props}>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
animi mollitia? Blanditiis
</Accordion.Panel>
</Accordion.Item>
</Accordion>
)
}
function SeparateExample() {
return (
<div>
<AccordionBase separate color="bg" variant="solid" corner="md" />
<AccordionBase separate color="bg" variant="soft" corner="md" />
<AccordionBase separate color="bg" variant="outline" corner="md" />
</div>
)
}
I've added a new section for the Separate
props and an example usage for it. The separate
prop has been removed from the corner
section and is now included in the Separate
section.
Collapsible
- Type: boolean
- Default:
false
- Options:
true
|false
The "collapsible" prop specifies whether or not all accordion items can be closed. If "collapsible" is set to "true", then all accordion items can be closed even if there is no item still open. If "collapsible" is set to "false", then at least one accordion item must be open at all times.
Here's an example of how to use the "collapsible" prop:
function AccordionCollapsible() {
return (
<Accordion collapsible>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
animi mollitia? Blanditiis
</Accordion.Panel>
</Accordion.Item>
</Accordion>
)
}
Variants
- Type: string
- Default:
undefined
- Options:
solid
|outline
|soft
The Accordion component has four variants available: solid, soft, outline, and the default variant. You can specify the variant using the variant prop.
Example usage:
function AccordionType() {
return (
<Accordion variant="solid">
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
animi mollitia? Blanditiis
</Accordion.Panel>
</Accordion.Item>
</Accordion>
<Accordion variant="outline">
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
animi mollitia? Blanditiis
</Accordion.Panel>
</Accordion.Item>
</Accordion>
<Accordion variant="soft">
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
animi mollitia? Blanditiis
</Accordion.Panel>
</Accordion.Item>
</Accordion>
)
}
Sizes
- Type: string
- Default:
md
- Options:
2xs
|xs
|sm
|md
|lg
|xl
|2xl
The Accordion component supports seven different sizes, ranging from 2xs to 2xl. You can specify the size using the size prop.
Example usage:
function AccordionBase(props){
return(
<Accordion {...props}>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<AccordionButton>
<div>
<Text weight="medium">Nice to Meet You</Text>
<Text size="2xs">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
animi mollitia? Blanditiis
</Accordion.Panel>
</Accordion.Item>
</Accordion>
)
}
function AccordionSizes() {
return (
<AccordionBase size="2xs" />
<AccordionBase size="xs" />
<AccordionBase size="sm" />
<AccordionBase size="md" />
<AccordionBase size="lg" />
<AccordionBase size="xl" />
<AccordionBase size="2xl" />
)
}
Use Case
The AccordionBase component is useful when you need to display a list of items with associated content that can be collapsed and expanded. This can be useful in a variety of contexts such as:
- FAQ pages
- Product pages with detailed descriptions
- Tutorials with multiple steps
Troubleshooting
If you encounter issues with the accordion not functioning as expected, make sure that the HTML structure and CSS classes are correct, and that the JavaScript