Accordion

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion";

const AccordionDemo = () => {
  return (
    <Accordion
      collapsible
      defaultValue={["basics"]}
      className="w-full max-w-md"
    >
      <AccordionItem value="basics">
        <AccordionTrigger>What is Ark CN?</AccordionTrigger>
        <AccordionPanel>
          Ark UI primitives styled like shadcn/ui—ready to paste into your app
          and theme with Tailwind.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="preview">
        <AccordionTrigger>How do previews work?</AccordionTrigger>
        <AccordionPanel>
          Drop a demo in{" "}
          <code className="rounded bg-muted px-1 py-0.5 text-xs">example/</code>{" "}
          and point{" "}
          <code className="rounded bg-muted px-1 py-0.5 text-xs">
            ComponentPreview
          </code>{" "}
          at the file name.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
};

export default AccordionDemo;

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion";

const AccordionSingleDemo = () => {
  return (
    <Accordion
      collapsible
      multiple={false}
      defaultValue={["one"]}
      className="w-full max-w-md"
    >
      <AccordionItem value="one">
        <AccordionTrigger>First section</AccordionTrigger>
        <AccordionPanel>
          Only one section stays open at a time when{" "}
          <code className="rounded bg-muted px-1 py-0.5 text-xs">
            multiple=&#123;false&#125;
          </code>{" "}
          (the default).
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="two">
        <AccordionTrigger>Second section</AccordionTrigger>
        <AccordionPanel>Content for the second item.</AccordionPanel>
      </AccordionItem>
      <AccordionItem value="three">
        <AccordionTrigger>Third section</AccordionTrigger>
        <AccordionPanel>Content for the third item.</AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
};

export default AccordionSingleDemo;

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion";

const AccordionMultipleDemo = () => {
  return (
    <Accordion
      multiple
      collapsible
      defaultValue={["a", "b"]}
      className="w-full max-w-md"
    >
      <AccordionItem value="a">
        <AccordionTrigger>Section A</AccordionTrigger>
        <AccordionPanel>
          With{" "}
          <code className="rounded bg-muted px-1 py-0.5 text-xs">multiple</code>
          , more than one panel can be open at once.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="b">
        <AccordionTrigger>Section B</AccordionTrigger>
        <AccordionPanel>Content for section B.</AccordionPanel>
      </AccordionItem>
      <AccordionItem value="c">
        <AccordionTrigger>Section C</AccordionTrigger>
        <AccordionPanel>Content for section C.</AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
};

export default AccordionMultipleDemo;

import { useState } from "react";
import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion";

const AccordionControlledDemo = () => {
  const [value, setValue] = useState<string[]>(["open"]);

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Accordion
        multiple
        collapsible
        value={value}
        onValueChange={(e) => setValue(e.value)}
        className="w-full"
      >
        <AccordionItem value="open">
          <AccordionTrigger>Controlled item</AccordionTrigger>
          <AccordionPanel>
            The open items are driven by React state via{" "}
            <code className="rounded bg-muted px-1 py-0.5 text-xs">value</code>{" "}
            and{" "}
            <code className="rounded bg-muted px-1 py-0.5 text-xs">
              onValueChange
            </code>
            .
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem value="other">
          <AccordionTrigger>Another item</AccordionTrigger>
          <AccordionPanel>
            Toggle panels and watch the summary below.
          </AccordionPanel>
        </AccordionItem>
      </Accordion>
      <p className="text-muted-foreground text-xs">
        Open:{" "}
        <span className="font-mono text-foreground">
          {value.length ? value.join(", ") : "none"}
        </span>
      </p>
    </div>
  );
};

export default AccordionControlledDemo;

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion";

const AccordionHorizontalDemo = () => {
  return (
    <Accordion
      orientation="horizontal"
      collapsible
      defaultValue={["two"]}
      className="w-full max-w-3xl data-[orientation=horizontal]:h-60"
    >
      <AccordionItem value="one">
        <AccordionTrigger>Overview</AccordionTrigger>
        <AccordionPanel className="border mr-4" containerClassName="p-4">
          Horizontal layout uses the root{" "}
          <code className="rounded bg-muted px-1 text-xs">orientation</code>{" "}
          prop. Triggers sit in a row; panels open beside them per Ark’s
          horizontal accordion behavior.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="two">
        <AccordionTrigger>Details</AccordionTrigger>
        <AccordionPanel className="border mr-4" containerClassName="p-4">
          Use ArrowLeft and ArrowRight to move focus between triggers when
          orientation is horizontal.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="three">
        <AccordionTrigger>Notes</AccordionTrigger>
        <AccordionPanel className="border mr-4" containerClassName="p-4">
          The root applies fixed height classes for horizontal mode so content
          can animate on the width axis.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
};

export default AccordionHorizontalDemo;

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion";

const AccordionLazyDemo = () => {
  return (
    <Accordion
      lazyMount
      unmountOnExit
      collapsible
      defaultValue={["first"]}
      className="w-full max-w-md"
    >
      <AccordionItem value="first">
        <AccordionTrigger>First (mounted)</AccordionTrigger>
        <AccordionPanel>
          This panel mounts when opened. With{" "}
          <code className="rounded bg-muted px-1 text-xs">unmountOnExit</code>,
          it unmounts when collapsed so heavy children are not left in the tree.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="second">
        <AccordionTrigger>Second (lazy)</AccordionTrigger>
        <AccordionPanel>
          Content for the second item is not rendered until you expand this
          section.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
};

export default AccordionLazyDemo;

import { MinusIcon, PlusIcon } from "lucide-react";
import {
  Accordion,
  AccordionContext,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion";

const AccordionCustomIndicatorDemo = () => {
  return (
    <Accordion collapsible defaultValue={["a"]} className="w-full max-w-md">
      <AccordionContext>
        {({ value }) => {
          return (
            <>
              <AccordionItem value="a">
                <AccordionTrigger
                  indicator={
                    value.includes("a") ? (
                      <MinusIcon className="pointer-events-none size-4 opacity-80" />
                    ) : (
                      <PlusIcon className="pointer-events-none size-4 opacity-80" />
                    )
                  }
                >
                  Custom indicator
                </AccordionTrigger>
                <AccordionPanel>
                  Pass any{" "}
                  <code className="rounded bg-muted px-1 text-xs">
                    ReactNode
                  </code>{" "}
                  to the{" "}
                  <code className="rounded bg-muted px-1 text-xs">
                    indicator
                  </code>{" "}
                  prop on{" "}
                  <code className="rounded bg-muted px-1 text-xs">
                    AccordionTrigger
                  </code>
                  . Rotation styles still apply to the indicator wrapper.
                </AccordionPanel>
              </AccordionItem>
              <AccordionItem value="b">
                <AccordionTrigger
                  indicator={
                    value.includes("b") ? (
                      <MinusIcon className="pointer-events-none size-4 opacity-80" />
                    ) : (
                      <PlusIcon className="pointer-events-none size-4 opacity-80" />
                    )
                  }
                >
                  Default chevron
                </AccordionTrigger>
                <AccordionPanel>
                  Omit{" "}
                  <code className="rounded bg-muted px-1 text-xs">
                    indicator
                  </code>{" "}
                  to use the built-in chevron.
                </AccordionPanel>
              </AccordionItem>
            </>
          );
        }}
      </AccordionContext>
    </Accordion>
  );
};

export default AccordionCustomIndicatorDemo;