Skip to content
UI Kit
Accent color

Quiz and product finder

A few questions that lead to one recommendation. Cards one at a time, a live ranking that reorders, a chat with quick replies, all questions on one card, and this or that.

5 variants
Switch category

Quiz funnel

Option cards

One question per screen, option cards with icons. A tap moves on, segments fill up, the result names its reasons and a second good fit.

Open in Studio

Live ranking

Questions one at a time on the left, every result as a bar on the right. With each answer the bars grow and the order changes, the leader lights up.

Open in Studio

Chat

The questions arrive as messages, answers are quick replies. A short typing moment between steps, the recommendation lands in the thread.

Open in Studio

All on one card

Every question as a row of chips, answered in any order. A ring counts the answers, the result appears in the same card as soon as the last one is in.

Open in Studio

This or that

Two large tiles per step with “or” between them. The chosen tile lifts, the other fades, the next pair rises in. Quick and playful.

Open in Studio

Details

What Quiz funnel brings along, read from the registry and the source.

Area
Marketing
Variants
5
Version
1.0.0 · since 1.1.0
File
components/ui/quiz-funnel.tsx
Brings along
utilskitbuttoniconmotionrevealsection
npm packages
None
Languages
English and German, 11 texts of its own
Studio
All 5 variants editable
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The QuizFunnelProps interface from components/ui/quiz-funnel.tsx, with the comments from the code.

  • variantoptional
    QuizFunnelVariant

    cardslive-matchchatone-pagethis-or-that

  • eyebrowoptional
    React.ReactNode
  • titlerequired
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • questionsrequired
    QuizQuestion[]
  • resultsrequired
    QuizResult[]
  • hostoptional
    string

    chat: name of the one asking

  • greetingoptional
    string

    chat: the first message

  • noteoptional
    string

    Text under the result, e.g. a free test ride

Built-in texts

Quiz funnel writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 11 texts
stepEnglish Question {n} of {t}German Frage {n} von {t}
backEnglish BackGerman Zurück
restartEnglish Start overGerman Neu starten
resultEnglish Our recommendationGerman Unsere Empfehlung
alsoEnglish Also a good fitGerman Passt auch gut
yourMatchEnglish Your matchGerman Deine Übereinstimmung
answerMoreEnglish Answer {n} more to see your matchGerman Noch {n} beantworten, dann steht dein Ergebnis
orEnglish orGerman oder
youEnglish YouGerman Du
typingEnglish {n} is typingGerman {n} schreibt
progressEnglish ProgressGerman Fortschritt

Accessibility

Read from the source of the component.

  • Quiz funnel handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
  • Sets aria-checked, aria-label, aria-live, aria-pressed, aria-valuemax, aria-valuemin and aria-valuenow, so screen readers announce purpose and state.
  • Uses the roles group, progressbar, radio, radiogroup and status.
  • Announces changes through a live region without moving focus.
  • Every field has a label, visible or for screen readers.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 5 places in the code switch motion off then.

Frequent questions

How do I install Quiz funnel?

With aiw add @ai-website/quiz-funnel. The command puts components/ui/quiz-funnel.tsx into your project, the code is yours from then on. It brings along button, icon, motion, reveal and section. It needs no further npm packages.

Which variants does Quiz funnel have?

5 variants, Option cards, Live ranking, Chat, All on one card and This or that. You pick one with the variant prop, for example variant="live-match".

Can I translate the texts of Quiz funnel?

Yes. Quiz funnel carries 11 texts of its own in English and German, such as “Back”, “Start over” and “Our recommendation”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Quiz funnel?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Quiz funnel with aiw_components and install it with aiw_add @ai-website/quiz-funnel. Name the variant in your prompt, for example variant="cards", and the assistant writes your content straight into the props.

Can I adjust Quiz funnel without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching QuizFunnel code to copy.

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Quiz and product finder on a page.

Often searched

Jump to

Copied to the clipboard