FAQ Section

An animated, editorial FAQ section designed for modern landing pages, SaaS platforms, and digital agencies. Pairs a centered section header with an interactive nature photography canvas that dynamically morphs its height and width and crossfades photos with each active question, alongside a keyboard-accessible, smooth accordion list.

Built with pure CSS keyframes and transitions — zero third-party animation library runtime dependencies, guaranteed 60fps performance, and full adaptive styling for both Light and Dark themes.

1. Homepage FAQ Section

The complete homepage FAQ section. Features a centered header, ambient background glows, an architectural nature photography canvas that morphs dynamically with each open question, and an accessible accordion list.

Passeyebrow"Common Queries": to customize the pill badge text displayed above the title.
Settitle"Frequently Asked Questions": for the primary section headline.
Providedescription"...": to customize the section summary paragraph beneath the title.

Active Color

2. Two-Column Support FAQ

A two-column section: sticky heading and a support team contact card on the left, the expandable questions accordion on the right.

Setvariant"two-column": to switch to a sticky two-column layout with support team contact card.
title"Questions people ask...": for the sticky left-hand headline.
description: short introductory summary beneath the headline.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Faq Section

npx shadcn@latest add @algorize-ui/faq-section

components/custom/blocks/FAQSectionBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Faq Section needs only the cn helper and lucide-react, which the installation guide already put in place.

Props Reference

FAQSection

Prop	Type	Default	Description
`variant`	`"canvas" \| "two-column"`	`"canvas"`	Layout presentation: `"canvas"` displays the centered nature canvas layout; `"two-column"` displays the sticky heading & support card layout.
`eyebrow`	`string`	`"Common Queries"`	The pill badge text displayed above the title with a sparkles icon. Pass empty string or null to omit.
`title`	`string`	`"Frequently Asked Questions"`	The primary headline string rendered in editorial serif styling.
`description`	`string`	`"Everything you need to know..."`	The subtitle paragraph explaining the section context.
`items`	`FAQItem[]`	`FAQ_ITEMS`	Array of FAQ questions, answers, nature photography URLs, and coordinate metadata.
`showGlows`	`boolean`	`true`	Whether to render ambient background blur glow orbs behind the section.
`defaultActiveId`	`string`	`"installation"`	The ID of the question that opens expanded on initial render.
`id`	`string`	`"faq"`	HTML section element id for anchor linking (e.g. `#faq`).
`className`	`string`	`undefined`	Additional Tailwind CSS classes for the root `<section>` container.

FAQItem Data Structure

Field	Type	Description
`id`	`string`	Unique identifier for the item used for active state tracking.
`question`	`string`	The question headline displayed in the accordion button.
`category`	`string`	Category badge string (e.g. `"CLI & Setup"`, `"Tailwind & Theming"`).
`answer`	`string`	The detailed answer body revealed inside the accordion panel.
`image`	`string`	High-resolution photo URL rendered on the interactive nature canvas.
`location`	`string`	Geographic location label displayed in the bottom caption badge.
`coordinates`	`string`	Latitude/longitude coordinates displayed in the top-right watermark badge.
`height`	`number`	Target canvas height in pixels for dynamic morphing transitions.
`maxWidth`	`number`	Target canvas maximum width in pixels for dynamic morphing transitions.
`clipCut`	`string`	Chamfer corner cut size (e.g. `"2.5rem"`) for the polygon clip-path.