Accordions
Enhance user experience with our React Accordion component. Easily create collapsible content sections for FAQs, product descriptions, tutorials, and more.
Components:
Type
import
import { Accordions } from '@pillar-ui/core'
Usage
import { Accordion } from '@pillar-ui/core'
<Accordion />
Examples
Corner
Default
Type
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
import { Accordion, AccordionButton, AccordionItem, AccordionPanel, Heading, Paper, Text } from '@pillar-ui/core'
import React from 'react'
function AccordionBase(props: any) {
return (
<Accordion {...props}>
<AccordionItem value={1}>
<AccordionButton>
<Text weight="5" size="4">
Hello World
</Text>
</AccordionButton>
<AccordionPanel>
<Text size="4" color="b" low>
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.
</Text>
</AccordionPanel>
</AccordionItem>
<AccordionItem value={2}>
<AccordionButton>
<Text weight="5" size="4">
Hello World
</Text>
</AccordionButton>
<AccordionPanel>
<Text size="4" color="b" low>
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.
</Text>
</AccordionPanel>
</AccordionItem>
</Accordion>
)
}
export const AccordionCorner = () => {
return (
<>
<AccordionBase corner="0" />
<AccordionBase corner="1" />
<AccordionBase corner="2" />
<AccordionBase corner="3" />
<AccordionBase corner="4" />
<AccordionBase corner="5" />
<AccordionBase corner="full" />
</>
)
}
Separate
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.
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.
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.
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.
import { Accordion, AccordionButton, AccordionItem, AccordionPanel, Paper, Text } from '@pillar-ui/core'
import React from 'react'
function AccordionBase(props: any) {
return (
<Accordion {...props}>
<AccordionItem value={1}>
<AccordionButton>
<Text weight="5" size="4">
Hello World
</Text>
</AccordionButton>
<AccordionPanel>
<Text size="4" color="b" low>
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.
</Text>
</AccordionPanel>
</AccordionItem>
<AccordionItem value={2}>
<AccordionButton>
<Text weight="5" size="4">
Hello World
</Text>
</AccordionButton>
<AccordionPanel>
<Text size="4" color="b" low>
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.
</Text>
</AccordionPanel>
</AccordionItem>
</Accordion>
)
}
export const AccordionSeparate = () => {
return (
<>
<AccordionBase />
<AccordionBase separate />
</>
)
}
Collapsible
Employ the collapsible prop to enable the closing of all items.
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.
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.
import { Accordion, AccordionButton, AccordionItem, AccordionPanel, Text } from '@pillar-ui/core'
import React from 'react'
function AccordionBase(props: any) {
return (
<Accordion {...props}>
<AccordionItem value={1}>
<AccordionButton>
<Text weight="5" size="4">
Hello World
</Text>
</AccordionButton>
<AccordionPanel>
<Text size="4" color="b" low>
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.
</Text>
</AccordionPanel>
</AccordionItem>
<AccordionItem value={2}>
<AccordionButton>
<Text weight="5" size="4">
Hello World
</Text>
</AccordionButton>
<AccordionPanel>
<Text size="4" color="b" low>
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.
</Text>
</AccordionPanel>
</AccordionItem>
</Accordion>
)
}
export const AccordionCollapsible = () => {
return (
<>
<AccordionBase collapsible />
</>
)
}
Variants
import { Accordion, AccordionButton, AccordionItem, AccordionPanel, Heading, Paper, Text } from '@pillar-ui/core'
import React from 'react'
function AccordionBase(props: any) {
return (
<Accordion {...props}>
<AccordionItem value={1}>
<AccordionButton>
<div>
<Text weight="5">Nice to Meet You</Text>
<Text size="2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<AccordionPanel>
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.
</AccordionPanel>
</AccordionItem>
<AccordionItem value={2}>
<AccordionButton>
<div>
<Text weight="5">Nice to Meet You</Text>
<Text size="2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<AccordionPanel>
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.
</AccordionPanel>
</AccordionItem>
<AccordionItem value={3}>
<AccordionButton>
<div>
<Text weight="5">Nice to Meet You</Text>
<Text size="2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
voluptatem obcaecati temporibus
</Text>
</div>
</AccordionButton>
<AccordionPanel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
animi mollitia? Blanditiis
</AccordionPanel>
</AccordionItem>
</Accordion>
)
}
export const AccordionVariant = () => {
return (
<>
<AccordionBase variant="solid" />
<AccordionBase variant="soft" />
<AccordionBase variant="outline" />
</>
)
}
Sizes
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
import { Accordion, AccordionButton, AccordionItem, AccordionPanel, Heading, Paper, Text } from '@pillar-ui/core'
import React from 'react'
function AccordionBase(props: any) {
return (
<Accordion {...props}>
<AccordionItem value={1}>
<AccordionButton>
<Text weight="5" size="4">
Hello World
</Text>
</AccordionButton>
<AccordionPanel>
<Text size="4" color="b" low>
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.
</Text>
</AccordionPanel>
</AccordionItem>
<AccordionItem value={2}>
<AccordionButton>
<Text weight="5" size="4">
Hello World
</Text>
</AccordionButton>
<AccordionPanel>
<Text size="4" color="b" low>
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.
</Text>
</AccordionPanel>
</AccordionItem>
</Accordion>
)
}
export const AccordionSize = () => {
return (
<>
<AccordionBase size="1" />
<AccordionBase size="2" />
<AccordionBase size="3" />
<AccordionBase size="4" />
<AccordionBase size="5" />
<AccordionBase size="6" />
<AccordionBase size="7" />
<AccordionBase size="8" />
<AccordionBase size="9" />
</>
)
}
Multiple
Default
Type
Multiple
import { Accordion, AccordionButton, AccordionItem, AccordionPanel, Heading, Paper, Text } from '@pillar-ui/core'
import React from 'react'
function AccordionBase(props: any) {
return (
<Accordion {...props}>
<AccordionItem value={1}>
<AccordionButton>Nice to Meet You</AccordionButton>
<AccordionPanel>
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.
</AccordionPanel>
</AccordionItem>
<AccordionItem value={2}>
<AccordionButton>Nice to Meet You</AccordionButton>
<AccordionPanel>
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.
</AccordionPanel>
</AccordionItem>
</Accordion>
)
}
export const AccordionType = () => {
return (
<>
<Heading size="6">Multiple</Heading>
<AccordionBase multiple />
</>
)
}