847 / 1002

FAQ Flip Cards

A white grid of question cards that flip in 3D to reveal the answer, with a reveal all toggle, an open counter and a hint wobble on the first card.

Questions, answered

Everything studios ask before switching.

Flip a card for the short answer. If yours is not here, our support team replies in under an hour on weekdays.

1 of 6 open

Still deciding? Get a walkthrough of your own studio setup.

terminal

npx shadcn@latest add https://hyperblur.dev/r/faq-flip-cards.json

Works in any React project set up with the shadcn CLI. The file lands in components/hyperblur/faq-flip-cards.tsx.

example.tsx

import { FaqFlipCards } from "@/components/hyperblur/faq-flip-cards"

<FaqFlipCards onFlip={(i, on) => console.log(i, on)} />

Prop	Type	Default	Description
eyebrow	string	"Questions, answered"	Small label above the title.
title	string	"Everything studios ask before switching."	Section heading.
subtitle	string	"Flip a card for the short answer..."	Supporting text.
items	{ tag: string; question: string; answer: string }[]	6 cards	Cards in the grid. Keep answers under about 180 characters so they fit the back.
defaultFlipped	number[]	[]	Indexes of cards that start flipped.
onFlip	(index: number, flipped: boolean) => void		Called when a single card is flipped.
cta	{ label: string; href: string }	{ label: "Chat with support", href: "#" }	Button in the bottom strip. Pass null to hide the strip.
accent	string	"#ff6a3d"	Color of the eyebrow, card glow, back face gradient and hover states.
className	string		Extra classes on the root element.
style	React.CSSProperties		Inline styles merged onto the root element.