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.
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>
);
}