import { Faq } from "@/components/email/faq";
import { defaultTheme } from "@/components/email/theme-default";
export function FaqDemo() {
return (
<Faq
layout="boxed"
marker="number"
answerPosition="stacked"
theme={defaultTheme}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/mjml-react/faq
Usage
import { Faq } from "@/components/email/faq";<Faq layout="boxed" marker="number" answerPosition="stacked" />Examples
Boxed FAQ with numbered questions
default
import { Faq } from "@/components/email/faq";
export function FaqLayoutBoxedMarkerNumberAnswerPositionStackedExampleDemo() {
return <Faq layout="boxed" marker="number" answerPosition="stacked" />;
}Boxed FAQ with numbers and alternating background colors
default
import { Faq } from "@/components/email/faq";
export function FaqLayoutBoxedMarkerNumberAlternatingExampleDemo() {
return <Faq layout="boxed" marker="number" alternating />;
}Collapsed FAQ with expanded section and icons
default
import { Faq } from "@/components/email/faq";
export function FaqLayoutCollapsedMarkerIconExampleDemo() {
return <Faq layout="collapsed" marker="icon" />;
}Collapsed FAQ with inline CTA
default
import { Faq } from "@/components/email/faq";
export function FaqLayoutCollapsedMarkerNoneActionExampleDemo() {
return (
<Faq
layout="collapsed"
marker="none"
action={{ href: "https://example.com", label: "Contact support" }}
/>
);
}Collapsed FAQ with numbers
default
import { Faq } from "@/components/email/faq";
export function FaqLayoutCollapsedMarkerNumberExampleDemo() {
return <Faq layout="collapsed" marker="number" />;
}Expanded FAQ with numbers
default
import { Faq } from "@/components/email/faq";
export function FaqLayoutExpandedMarkerNumberExampleDemo() {
return <Faq layout="expanded" marker="number" />;
}Expanded FAQ with offset answers
default
import { Faq } from "@/components/email/faq";
export function FaqLayoutExpandedMarkerNoneAnswerPositionOffsetExampleDemo() {
return <Faq layout="expanded" marker="none" answerPosition="offset" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
heading | string | "Frequently asked questions" | Configures the component's heading. |
items | Array<{ question: string; answer?: string; icon?: { alt?: string; src: string } }> | - | Configures the component's items. |
layout | "boxed" | "collapsed" | "expanded" | "boxed" | Configures the component's layout. |
marker | "number" | "none" | "icon" | "number" | Configures the component's marker. |
alternating | boolean | false | Configures the component's alternating. |
answerPosition | "stacked" | "offset" | "stacked" | Configures the component's answerposition. |
action | { href: string; label: string; text?: string } | - | Configures the component's action. |
On This Page
InstallationUsageExamplesBoxed FAQ with numbered questionsdefaultBoxed FAQ with numbers and alternating background colorsdefaultCollapsed FAQ with expanded section and iconsdefaultCollapsed FAQ with inline CTAdefaultCollapsed FAQ with numbersdefaultExpanded FAQ with numbersdefaultExpanded FAQ with offset answersdefaultAPI Reference