Accordion

A collapsible content panel that toggles between expanded and collapsed states. Useful for organizing long-form content into manageable sections.

Click to expand

import { Accordion } from "@tenstorrent/vesper/accordion";

export default function AccordionDemo() {
  return (
    <Accordion title="Click to expand">
      This is the accordion content. It can contain any text or elements.
    </Accordion>
  );
}

Options

Prop	Type	Description	Default
`title`	`string`	The title text displayed in the accordion trigger.	—
`defaultOpen`	`boolean`	Whether the accordion is open by default (uncontrolled mode).	`false`
`open`	`boolean`	Controls the open state of the accordion (controlled mode).	—
`onOpenChange`	`(open: boolean) => void`	Callback fired when the open state changes.	—
`children`	`ReactNode`	The content displayed when the accordion is expanded.	—

You may also pass additional props to the underlying div element. For example, you may wish to give the <Accordion> instance a custom max-width, aria-label, etc.

Examples

Basic usage

Render an Accordion by giving it a title and children, leaving it to keep track of its own open/closed state:

Section Title

import { Accordion } from "@tenstorrent/vesper/accordion";

export default function BasicAccordion() {
  return <Accordion title="Section Title">Content goes here.</Accordion>;
}

Default open state

You can render an Accordion in a default opened state by passing defaultOpen:

Already Open

This accordion starts expanded.

import { Accordion } from "@tenstorrent/vesper/accordion";

export default function DefaultOpenAccordion() {
  return (
    <Accordion title="Already Open" defaultOpen>
      This accordion starts expanded.
    </Accordion>
  );
}

Controlled usage

If you need to control the open/closed state of the Accordion, you can do so via the open and onOpenChange props:

Controlled

import { useState } from "react";

import { Accordion } from "@tenstorrent/vesper/accordion";

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

  return (
    <Accordion title="Controlled" open={open} onOpenChange={setOpen}>
      Controlled accordion content.
    </Accordion>
  );
}