Accordion

Usage

Example

Source Code

"use client";

import React from "react";
import { Accordion } from "@/ui/components/Accordion";

function AccordionExample() {
  return (
    <Accordion
      trigger={
        <div className="flex w-full items-center gap-2 px-3 py-2">
          <span className="grow shrink-0 basis-0 text-body font-body text-default-font">
            Accordion header
          </span>
          <Accordion.Chevron />
        </div>
      }
      defaultOpen={false}
    >
      <div className="flex w-full grow shrink-0 basis-0 flex-col items-start gap-2 px-3 py-2">
        <span className="text-body font-body text-default-font">
          Accordion contents
        </span>
      </div>
    </Accordion>
  );
}

export default AccordionExample;

Props

Accordion Props

Chevron Props

Content Props

Trigger Props

Prop

Type

Default value

Notes

trigger

React.ReactNode

—

children

React.ReactNode

—

open

boolean

false

onOpenChange

(open: boolean) => void

—

Handler called when opened or closed.

defaultOpen

boolean

—

Open state when initially rendered. Use when you don't need to control the open state.

This is a Radix Collapsible Root component.

Examples

Basics

Use the trigger prop to render anything that should open the accordion on click.

Accordion.Content is a wrapper component for content shown when the accordion is open. Accordion.Chevron is a chevron icon that will automatically rotate.


View code

Controlled

Use open and onOpenChange props to control the open state.


View code

Default open

Use defaultOpen prop to have the accordion open when initially rendered. If you need to control the component, you should use open and onOpenChange props instead.


View code