export default function Example() {
  return (
    <Box css={{ width: 500 }}>
      <Accordion.Root
        type={ACCORDION_TYPE.single}
        defaultValue="item-1"
        collapsible={true}
      >
        <Accordion.Item value="item-1">
          <Accordion.Trigger forcefocus="true">
            Header text item one
          </Accordion.Trigger>
          <Accordion.Content>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in
            augue in felis pharetra finibus. In sagittis aliquam augue. Lorem
            ipsum dolor sit amet, consectetur adipiscing elit.
          </Accordion.Content>
        </Accordion.Item>
        <Accordion.Item value="item-2">
          <Accordion.Trigger>Header text item two</Accordion.Trigger>
          <Accordion.Content>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in
            augue in felis pharetra finibus. In sagittis aliquam augue. Lorem
            ipsum dolor sit amet, consectetur adipiscing elit.
          </Accordion.Content>
        </Accordion.Item>
      </Accordion.Root>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape