FAQ Sections - TypeScript UI

Frequently asked questions sections help users find answers quickly and reduce support requests. These components cover accordions, categorized filters, and contact fallbacks.

Component Variants

FAQ Accordion

TypeScript UI is built for React and works seamlessly with Next.js. Every component is written in TypeScript and ships with full type definitions.

FAQ Two Column

How do I install TypeScript UI?: Install the package with your preferred package manager and import the components you need directly into your project.
Are the components accessible?: Yes. Components follow WCAG 2.1 AA guidelines, including keyboard navigation, focus management, and proper ARIA attributes.
Can I use these components without Tailwind?: The components are designed around Tailwind CSS utility classes, so a Tailwind setup is required to render them correctly.
What license is TypeScript UI released under?: TypeScript UI is released under the MIT license, so you are free to use it in both open source and commercial projects.

FAQ With Categories

How does billing work?

TypeScript UI is free and open source, so there is no billing involved for using the component library itself.

Do you offer refunds?

Since the library is free to use, there is nothing to refund. Optional paid support plans can be cancelled at any time.

What is the minimum React version required?

TypeScript UI requires React 18 or later to support the hooks and rendering behavior used throughout the components.

Does this work with the Next.js App Router?

Yes, all components are compatible with the App Router and are marked as client or server components appropriately.

Do I need an account to use the components?

No account is required. Simply install the package and start importing components into your codebase.

How do I report a bug?

Open an issue in the project repository with a minimal reproduction and our maintainers will take a look.

FAQ Sidebar

Frequently asked questions

Everything you need to know about the product and billing. Can't find the answer you're looking for? Reach out to our support team.

How often are new components released?

We ship new components and section variants on a rolling basis, typically every few weeks based on community feedback.

Can I request a new component?

Yes, feature requests are welcome. Open a discussion in the repository describing your use case.

Is TypeScript required to use these components?

TypeScript is recommended for the best experience but the compiled components can also be used from plain JavaScript.

Do you provide Figma design files?

A companion Figma library mirroring the component set is available and kept in sync with each release.

FAQ Contact

What is included in the component library?

Buttons, forms, navigation, marketing sections, and more, all built with TypeScript and Tailwind CSS.

How do updates and breaking changes work?

We follow semantic versioning and document breaking changes in the changelog for every major release.

Can I use this in a client project?

Yes, the MIT license permits use in personal, open source, and commercial client projects.

Still have questions?

Can't find the answer you're looking for? Our team is happy to help.

Contact support

Usage

import {
  FAQAccordion,
  FAQTwoColumn,
  FAQWithCategories,
  FAQSidebar,
  FAQContact,
} from '@/components/ui/faq';

// FAQ Accordion
<FAQAccordion
  defaultOpenIndex={0}
  items={[
    { question: 'What frameworks does TypeScript UI support?', answer: 'React and Next.js.' },
  ]}
/>

// FAQ Two Column
<FAQTwoColumn
  items={[
    { question: 'How do I install TypeScript UI?', answer: 'Install with your package manager and import components.' },
  ]}
/>

// FAQ With Categories
<FAQWithCategories
  allLabel="All" // label for the "show everything" pill
  items={[
    { category: 'Billing', question: 'How does billing work?', answer: 'The library is free and open source.' },
    { category: 'Technical', question: 'What React version is required?', answer: 'React 18 or later.' },
  ]}
/>

// FAQ Sidebar
<FAQSidebar
  title="Frequently asked questions"
  description="Everything you need to know about the product."
  items={[
    { question: 'How often are new components released?', answer: 'Every few weeks.' },
  ]}
/>

// FAQ Contact
<FAQContact
  contactTitle="Still have questions?"
  contactDescription="Our team is happy to help."
  buttonText="Contact support"
  buttonHref="/contact"
  items={[
    { question: 'What is included in the component library?', answer: 'Buttons, forms, navigation, and marketing sections.' },
  ]}
/>

Props Reference

FAQAccordion

Prop	Type	Default	Description
`items`	`FAQAccordionItem[]`	Required	Array of `{ question, answer }`
`defaultOpenIndex`	`number`	-	Index of the item expanded by default
`className`	`string`	-	Additional classes

FAQTwoColumn

Prop	Type	Default	Description
`items`	`FAQTwoColumnItem[]`	Required	Array of `{ question, answer }`
`className`	`string`	-	Additional classes

FAQWithCategories

Prop	Type	Default	Description
`items`	`FAQCategoryItem[]`	Required	Array of `{ question, answer, category }`
`categories`	`string[]`	Derived from `items`	Explicit category order for the filter pills
`allLabel`	`string`	`'All'`	Label for the pill that shows every question
`className`	`string`	-	Additional classes

Prop	Type	Default	Description
`title`	`string`	Required	Heading shown in the sticky sidebar
`description`	`string`	-	Supporting text under the heading
`items`	`FAQSidebarItem[]`	Required	Array of `{ question, answer }`
`className`	`string`	-	Additional classes

FAQContact

Prop	Type	Default	Description
`items`	`FAQContactItem[]`	Required	Array of `{ question, answer }`
`contactTitle`	`string`	`'Still have questions?'`	Heading for the contact card
`contactDescription`	`string`	Fallback copy	Supporting text for the contact card
`buttonText`	`string`	`'Contact support'`	CTA button label
`buttonHref`	`string`	`'#'`	CTA button link
`className`	`string`	-	Additional classes