Grouped Columns FAQ
A free editorial FAQ section with category links, reading rails and every answer kept open.
Help centre
Answers, organised around your work
Browse the essentials by topic. Every answer is open, so you can scan the whole guide without expanding a thing.
Getting started
- How quickly can I set up a workspace?
Most teams can create a workspace, invite colleagues and publish a first project in one afternoon.
- Can I import existing projects?
CSV and JSON imports are supported, with a review step before anything is published.
- Do I need a credit card for the trial?
No card is required and the workspace remains read-only after the trial rather than being deleted.
Plans and billing
- Can I change plans later?
Upgrades apply immediately and downgrades begin at the next renewal.
- Do you offer annual billing?
Annual billing is available from the billing page and includes one consolidated invoice.
- What happens when I exceed a limit?
The product warns administrators before a limit and never charges an overage without approval.
Security and support
- Where is data hosted?
Customer data is hosted in the selected US or EU region.
- Is single sign-on available?
SAML single sign-on and directory sync are included on the Studio plan.
- How do I contact support?
All plans include email support, while Scale and Studio add priority response targets.
Customise
Code
<FaqGroupedColumns
eyebrow="Help centre"
title="Answers, organised around your work"
description="Browse the essentials by topic. Every answer is open, so you can scan the whole guide without expanding a thing."
groups={faqGroups}
sectionId="product-faq"
/>Grouped Columns FAQ is a free FAQ section for Next.js and React that arranges categorised questions in a normal Tailwind grid with every answer always open, so visitors can scan the whole guide, search visible page text and use native category links without opening disclosures or waiting for JavaScript.
Each group is a semantic section with a heading and definition list, while CSS view timelines draw its decorative reading rail and question markers as the group enters the viewport; the text never starts hidden, reduced motion keeps the finished static decoration, and unsupported browsers receive the same complete layout.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/faq-grouped-columnsUsage
import type { ReactNode } from "react";
import {
FaqGroupedColumns,
type FaqGroupedColumn,
} from "@/components/faq-grouped-columns";
const groups: FaqGroupedColumn[] = [
{
id: "getting-started",
title: "Getting started",
items: [
{
id: "workspace-setup",
question: "How quickly can I set up a workspace?",
answer: (
<p>
Most teams can create a workspace, invite colleagues and publish a
first project in one afternoon.
</p>
) satisfies ReactNode,
},
{
id: "import-projects",
question: "Can I import existing projects?",
answer: (
<p>
CSV and JSON imports are supported, with a review step before
anything is published.
</p>
),
},
{
id: "trial-card",
question: "Do I need a credit card for the trial?",
answer: (
<p>
No card is required and the workspace remains read-only after the
trial rather than being deleted.
</p>
),
},
],
},
{
id: "plans-billing",
title: "Plans and billing",
items: [
{
id: "change-plans",
question: "Can I change plans later?",
answer: (
<p>
Upgrades apply immediately and downgrades begin at the next renewal.
</p>
),
},
{
id: "annual-billing",
question: "Do you offer annual billing?",
answer: (
<p>
Annual billing is available from the billing page and includes one
consolidated invoice.
</p>
),
},
{
id: "plan-limits",
question: "What happens when I exceed a limit?",
answer: (
<p>
The product warns administrators before a limit and never charges
an overage without approval.
</p>
),
},
],
},
{
id: "security-support",
title: "Security and support",
items: [
{
id: "data-hosting",
question: "Where is data hosted?",
answer: <p>Customer data is hosted in the selected US or EU region.</p>,
},
{
id: "single-sign-on",
question: "Is single sign-on available?",
answer: (
<p>
SAML single sign-on and directory sync are included on the Studio
plan.
</p>
),
},
{
id: "contact-support",
question: "How do I contact support?",
answer: (
<p>
All plans include email support, while Scale and Studio add
priority response targets.
</p>
),
},
],
},
];
export function ProductFaq() {
return (
<FaqGroupedColumns
eyebrow="Help centre"
title="Answers, organised around your work"
description="Browse the essentials by topic. Every answer is open, so you can scan the whole guide without expanding a thing."
groups={groups}
sectionId="product-faq"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | undefined | Optional small label above the section heading. |
| title | string | required | Section heading rendered as an h2. |
| description | string | undefined | Optional supporting paragraph. |
| groups | FaqGroupedColumn[] | required | Two to six groups in reading order, each with a stable ID, title, optional description and at least two question and ReactNode answer pairs. |
| columns | 2 | 3 | 3 | Desktop grid column count. The grid remains one column below md and two columns from md until lg. |
| numbered | boolean | true | Shows decorative two-digit question indices that restart in each group. |
| showJumpLinks | boolean | true | Shows native fragment links to every FAQ group. |
| sectionId | string | "faq" | URL-fragment-safe section ID used as the prefix for every group anchor. |
| className | string | undefined | Additional classes merged onto the root section. |
Customisation
Grouped Columns FAQ exposes three Tier 3 colour tokens. Use --faq-grouped-rail for the neutral reading line and card borders, --faq-grouped-accent for the animated rail, markers and link underlines, and --faq-grouped-surface for each group surface. The columns prop changes real desktop grid geometry without changing DOM order.
.product-faq {
--faq-grouped-rail: var(--border);
--faq-grouped-accent: var(--primary);
--faq-grouped-surface: var(--surface);
}
<FaqGroupedColumns
className="product-faq"
title="Answers, organised around your work"
groups={groups}
columns={2}
/>Frequently asked questions
- Is Grouped Columns FAQ free for commercial use?
- Yes. Grouped Columns FAQ is MIT licensed, so you can use it in personal and commercial projects without attribution.
- How do semantics and reduced motion work in Grouped Columns FAQ?
- Each category is a section with an h3 and a definition list of adjacent questions and answers. Every answer remains visible and searchable, category navigation uses native fragment links, and there are no disclosure buttons or custom keyboard controls. Under reduced motion the rail and markers stay in their finished static state and link focus outlines remain visible.
- How can I change the columns and visual tokens?
- Set columns to 2 or 3 to change the lg grid while preserving one column below md and two columns at md. Override the rail, accent and surface Tier 3 tokens from a wrapper or your theme to retint the decorative line, markers, borders, underlines and group backgrounds.