FAQ Accordion Depth Gutter

Component

About

A dependency-free FAQ accordion with real button semantics, single-open-by-default behavior, a smooth height transition, and a thin accent rail marking the currently open question.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds FAQ Accordion Depth Gutter to your project and fits it to your theme.

Code

How FAQ Accordion Depth Gutter is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import FaqDepthGutter from "@/components/ui/faq-answer-depth-gutter";

export default function FaqDepthGutterDemo() {
  return (
    <div className="w-full max-w-xl mx-auto p-8">
      <FaqDepthGutter
        defaultOpen={["1"]}
        items={[
          {
            id: "1",
            question: "What is included in the free plan?",
            answer: (
              <p>
                The free plan includes all core features, up to 3 projects, and
                community support. You can upgrade at any time as your needs
                grow.
              </p>
            ),
          },
          {
            id: "2",
            question: "Can I cancel my subscription anytime?",
            answer: (
              <p>
                Yes, you can cancel your subscription at any time from your
                account settings, no questions asked.
              </p>
            ),
          },
          {
            id: "3",
            question: "Do you offer refunds?",
            answer: (
              <p>
                We offer a 14-day money-back guarantee on all paid plans if you
                are not satisfied.
              </p>
            ),
          },
        ]}
      />
    </div>
  );
}