Collapsible

import { Collapsible } from '@raystack/apsara';
import { ChevronDownIcon } from '@radix-ui/react-icons';

export default function Example() {
  return (
    <Collapsible>
      <Collapsible.Trigger>
        <span>Show more information</span>
        <ChevronDownIcon />
      </Collapsible.Trigger>
      <Collapsible.Panel>
        <p>This is the collapsible content that can be shown or hidden.</p>
      </Collapsible.Panel>
    </Collapsible>
  );
}

import { Collapsible } from '@raystack/apsara';
import { useState } from 'react';

export default function ControlledExample() {
  const [open, setOpen] = useState(false);

  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <Collapsible.Trigger>
        {open ? 'Hide' : 'Show'} details
      </Collapsible.Trigger>
      <Collapsible.Panel>
        <p>Controlled collapsible content.</p>
      </Collapsible.Panel>
    </Collapsible>
  );
}