Component Library
Browse and explore components
Accordion
An accordion is a UI component for toggling sections of content in acompact layout.
Accordion
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Component Code
import {
Accordion,
AccordionContent,
AccordionPanel,
AccordionTitle,
} from 'flowbite-react'
const BasicAccordiancode = () => {
return (
<>
<div>
<Accordion>
<AccordionPanel>
<AccordionTitle className='focus:ring-0 !border !border-border dark:!border-white/20 hover:cursor-pointer'>
Accordion Item #1
</AccordionTitle>
<AccordionContent>
<p className='mb-2'>
Contrary to popular belief, Lorem Ipsum is not simply random
text. It has roots in a piece of classical Latin literature from
45 BC, making it over 2000 years old.
</p>
</AccordionContent>
</AccordionPanel>
<AccordionPanel>
<AccordionTitle className='focus:ring-0 !border !border-border dark:!border-white/20 hover:cursor-pointer'>
Accordion Item #2
</AccordionTitle>
<AccordionContent>
<p className='mb-2 '>
Contrary to popular belief, Lorem Ipsum is not simply random
text. It has roots in a piece of classical Latin literature from
45 BC, making it over 2000 years old.
</p>
</AccordionContent>
</AccordionPanel>
<AccordionPanel>
<AccordionTitle className='focus:ring-0 !border !border-border dark:!border-white/20 hover:cursor-pointer'>
Accordion Item #3
</AccordionTitle>
<AccordionContent>
<p className='mb-2 '>
Contrary to popular belief, Lorem Ipsum is not simply random
text. It has roots in a piece of classical Latin literature from
45 BC, making it over 2000 years old.
</p>
</AccordionContent>
</AccordionPanel>
</Accordion>
</div>
</>
)
}
export default BasicAccordiancode
Accordian Flush
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Component Code
import {
Accordion,
AccordionContent,
AccordionPanel,
AccordionTitle,
} from 'flowbite-react'
const FlushAccordiancode = () => {
return (
<>
<div>
<Accordion collapseAll>
<AccordionPanel>
<AccordionTitle className="focus:ring-0 !border !border-border dark:!border-white/20 hover:cursor-pointer">
Accordion Item
</AccordionTitle>
<AccordionContent>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random
text. It has roots in a piece of classical Latin literature from
45 BC, making it over 2000 years old.
</p>
</AccordionContent>
</AccordionPanel>
<AccordionPanel>
<AccordionTitle className="focus:ring-0 !border !border-border dark:!border-white/20 hover:cursor-pointer">
Accordion Item #2
</AccordionTitle>
<AccordionContent>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random
text. It has roots in a piece of classical Latin literature from
45 BC, making it over 2000 years old.
</p>
</AccordionContent>
</AccordionPanel >
<AccordionPanel >
<AccordionTitle className='focus:ring-0 !border !border-border dark:!border-white/20 hover:cursor-pointer'>
Accordion Item #3
</AccordionTitle>
<AccordionContent>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random
text. It has roots in a piece of classical Latin literature from
45 BC, making it over 2000 years old.
</p>
</AccordionContent>
</AccordionPanel>
</Accordion>
</div>
</>
)
}
export default FlushAccordiancode
API ( Accordion )
| Prop | Description | Type | Default |
|---|---|---|---|
collapseAll | Automatically collapses all accordion panels. | boolean | false |