Kinetic UI
Back to Introduction
Blocks & Templates

FAQ Section

A Frequently Asked Questions section utilizing the Accordion primitive.

Quick Actions
CLI Installation
npx kinetic-ui-cli@latest add faq-section

A Frequently Asked Questions section utilizing the Accordion primitive. Enhanced with smooth layout animations and premium typography, suitable for marketing and support pages.

Live Preview

FAQ Section

Frequently Asked Questions

Everything you need to know about the product and billing. Can't find the answer you're looking for? Please chat to our friendly team.

Installation

npx kinetic-ui-cli@latest add faq-section

Props

  • title: The main headline of the section.
  • description: The supporting text below the headline.
  • items: An array of FAQ objects containing question and answer. The answer can be a string or a React node.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { FaqSection } from "@/components/creative/faq-section";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { FaqSection } from "@/components/creative/faq-section";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <FaqSection
        title="example"
        description="example"
        items{/* value */}
      />
    </div>
  );
}
Performance Notes
  • Uses CSS hardware acceleration via GPU transform-binds.
  • Damped interpolation minimizes paint-redraw flashes.
  • Tree-shakable import: only compiles elements requested.
Accessibility Notes
  • Full keyboard focus-ring navigation support (`Tab`/`Shift+Tab`).
  • ARIA roles mapped correctly for assistive screen readers.
  • Respects `prefers-reduced-motion` system toggles.