Focus FAQ

Component

About

An FAQ section where clicking a question promotes it into a large heading with a FLIP animation, while the other questions collapse into a compact list below.

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

Code

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

Usage.tsx

"use client";

import FocusFaq from "@/components/ui/focus-faq";

const QA = [
  {
    q: "Can I use these components in client work?",
    a: "Yes. Everything in Vitrine is MIT licensed — copy it, change it, ship it. Attribution is appreciated but never required.",
  },
  {
    q: "Do they need an animation library?",
    a: "No. Every component is plain React with CSS, SVG, Canvas or raw WebGL. There's nothing to install beyond React and Tailwind.",
  },
  {
    q: "How do they behave with reduced motion?",
    a: "Each one has a designed still state: the information stays, the movement goes. Nothing is simply switched off.",
  },
  {
    q: "Will they work on touch devices?",
    a: "Every hover interaction has a touch fallback — usually a resting state that shows the idea, or the effect on press.",
  },
  {
    q: "Can I request a component?",
    a: "Please do. Open an issue with the problem you're solving rather than the effect you want; the best components start there.",
  },
];

export default function Demo() {
  return (
    <div className="flex min-h-full w-full items-start justify-center bg-[#0c0b0a] text-[#efe8dc] px-8 py-14">
      <FocusFaq items={QA} />
    </div>
  );
}