AccordionExpandable sections that show and hide content.

Accordion
Lorem ipsumLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dolor sit ametUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Consectetur adipiscingDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
import Accordion, { AccordionContent } from '@/components/Accordion';import Text from '@/components/Text';
export function Example() {  return (    <Accordion>      <AccordionContent $title="Lorem ipsum">          Lorem ipsum dolor sit amet, consectetur adipiscing elit.          Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.      </AccordionContent>      <AccordionContent $title="Dolor sit amet">          Ut enim ad minim veniam, quis nostrud exercitation ullamco          laboris nisi ut aliquip ex ea commodo consequat.      </AccordionContent>    </Accordion>  );}

Accordion ($type="card")
Lorem featuresAdvanced lorem ipsum generation with customizable length, paragraph count, and formatting options.
Ipsum settingsConfigure text generation parameters including language variants, special characters, and output formats.
Dolor support24/7 customer support with documentation, tutorials, and community forums for all your needs.
import Accordion, { AccordionContent } from '@/components/Accordion';import Text from '@/components/Text';
export function Example() {  return (    <Accordion $type="card">      <AccordionContent $title="Lorem features">          Advanced lorem ipsum generation with customizable length,          paragraph count, and formatting options.      </AccordionContent>      <AccordionContent $title="Ipsum settings">          Configure text generation parameters including language variants,          special characters, and output formats.      </AccordionContent>    </Accordion>  );}

AccordionContent ($expanded)
Lorem expandedThis accordion item is expanded by default. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ipsum collapsedThis accordion item starts collapsed. Ut enim ad minim veniam, quis nostrud exercitation.
import Accordion, { AccordionContent } from '@/components/Accordion';import Text from '@/components/Text';
export function Example() {  return (    <Accordion>      <AccordionContent $title="Lorem expanded" $expanded>          This accordion item is expanded by default.          Lorem ipsum dolor sit amet, consectetur adipiscing elit.      </AccordionContent>      <AccordionContent $title="Ipsum collapsed">          This accordion item starts collapsed.          Ut enim ad minim veniam, quis nostrud exercitation.      </AccordionContent>    </Accordion>  );}

AccordionContent ($disabled)
Lorem availableThis accordion item is interactive and available.
Ipsum disabledThis accordion item is disabled and cannot be opened.
import Accordion, { AccordionContent } from '@/components/Accordion';import Text from '@/components/Text';
export function Example() {  return (    <Accordion>      <AccordionContent $title="Lorem available">        This accordion item is interactive and available.      </AccordionContent>      <AccordionContent $title="Ipsum disabled" $disabled>        This accordion item is disabled and cannot be opened.      </AccordionContent>    </Accordion>  );}