A
Aether UI
Marketing

FAQ Section

An FAQ accordion section with optional eyebrow, headline, and subheading. When a heading is provided, the layout splits into a two-column grid on large screens. Without a heading, the accordion is centred and constrained.

FAQ

Frequently asked questions

Can't find the answer you're looking for? Reach out to our team.

import { FAQSection } from "@aetherstack/blocks"

Installation

terminal
npx aether-ui add faq-section

Import

import.tsx
import { FAQSection } from "@aetherstack/blocks"

Usage

faq-section.tsx
import { FAQSection } from "@aetherstack/blocks"

const items = [
  {
    id: "q1",
    question: "Is Aether UI free to use?",
    answer: "Yes. The core library is open-source and free forever. A Pro tier is coming for advanced components.",
  },
  {
    id: "q2",
    question: "Do I need to credit Aether UI?",
    answer: "No attribution is required, but it's appreciated.",
  },
]

export default function FAQPage() {
  return (
    <FAQSection
      eyebrow="FAQ"
      headline="Frequently asked questions"
      subheading="Everything you need to know about Aether UI."
      items={items}
    />
  )
}

Props

PropTypeDefaultDescription
items*{ id: string; question: string; answer: string }[]—Array of FAQ items.
eyebrowstring—Small uppercase label above the headline.
headlinestring—Section heading. When provided, activates the two-column layout.
subheadingstring—Supporting paragraph below the headline.
classNamestring—Additional classes on the section wrapper.

* Required

Accessibility

  • →Built on the Aether UI Accordion which uses Radix UI — keyboard-navigable with arrow keys.
  • →Each question is an <h3>-level button; the answer is associated via aria-controls.
  • →Expanded state is communicated via aria-expanded.