Marketing

FAQ accordion

A full marketing page section, not an atomic control - an animated question/answer accordion (motion/react) plus a 'still have questions?' avatar CTA. Composed entirely from real DEW components.

What lives in this section

Pre-built landing-page sections - hero, FAQ, pricing, and similar - as opposed to components/base/**/components/application/**'s atomic controls. A marketing section takes no configuration props (its copy and layout are fixed), so unlike a component page there's no live Playground here - just the real section, rendered, plus how it's composed.

Live example

Click a question to expand it - the height/opacity transition is a real spring animation (motion/react), not a CSS transition.

Frequently asked questions

Everything you need to know about the product and billing.

Yes, you can try us for free for 30 days. If you want, we'll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.

Of course. Our pricing scales with your company. Chat to our friendly team to find a solution that works for you.

We understand that things change. You can cancel your plan at any time and we'll refund you the difference already paid.

Yes, you can try us for free for 30 days. If you want, we'll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.

Plans are per workspace, not per account. You can upgrade one workspace, and still have any number of free workspaces.

You can change the email address associated with your account by going to untitledui.com/account from a laptop or desktop.

Still have questions?

Can't find the answer you're looking for? Please chat to our friendly team.

Composition

Every real control inside this section is a real DEW component, not a lookalike:

Accordion (components/base/accordion/accordion.tsx) - the question/answer list itself. Extracted out of this section into its own component rather than hand-rolling expand/collapse state locally - this section just maps its FAQ data into AccordionItemType[] and renders <Accordion items={...} />.
Avatar (components/base/avatar/avatar.tsx) - the three support-contact photos in the "Still have questions?" card.
Avatar's own count prop, which wires in AvatarCount (components/base/avatar/base-components/avatar-count.tsx) - the small red corner badge on the last avatar. It's a notification-style badge, not a "+N" overflow indicator, so it reads as "3 new replies" rather than a headcount - the honest use for what that component actually renders.
Button (components/base/buttons/button.tsx) - the "Get in touch" CTA.

Only the FAQ copy, the heading/intro, and the "Still have questions?" CTA card are local to this section - everything interactive is a real, independently-documented component.

Usage

import { FAQAccordion01 } from "@/components/marketing/faq/faq-accordion-01";

<FAQAccordion01 />

No props - questions/answers and the CTA copy are fixed content in the component itself.

Figma

No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.

FAQ accordion

Live example

Frequently asked questions

Is there a free trial available?

Can I change my plan later?

What is your cancellation policy?

Can other info be added to an invoice?

How does billing work?

How do I change my account email?

Still have questions?

Composition

Usage

Figma