Build quiz funnels with headless Radix components
Free, headless quiz components you install as source. Style them any way you like — they ship with zero opinions.
How quiz-ui fits together
A funnel is a plain QuizDefinition object plus a handful of structural components. Try the live example on the right — answer “Build strength” vs “Improve cardio” and watch it branch to a different follow-up question.
QuizRoot
The funnel wrapper that owns the engine state.
Drop a QuizDefinition in and it wires up the state machine for every step below it.
QuizStep
Renders the active step's question and answer input.
Switch on step.type to pick which answer component shows for that step.
QuizProgress
A progress bar driven by step history.
Reads the engine's progress estimate so you never compute it yourself.
QuizNavigation
Back / Next controls that auto-disable until answered.
Guards advancement so a step can't be skipped when it's required.
Branching
Data-driven routing between steps.
Each step declares branch rules; the first match wins, else it falls through to next.
What's your main goal?
See it in action
Every component ships headless — no colors, borders, or layout baked in — so you style it to match your own design. The demos below are just one possible look. Copy the prompt to generate it with an LLM, or copy the code to drop it straight into your project.
Choice
Single-select answer cards built on Radix radio group.
Use the quiz-ui QuizChoiceGroup component to render a single-select question with three options ("Build strength", "Improve cardio", "Improve flexibility"), each with a short description. Style the items as bordered cards with rounded corners.What's your main fitness goal?
Image Choice
Visual single-select grid of image cards.
Use the quiz-ui QuizImageChoice component to render a grid (2 columns) of three image options ("Strength", "Cardio", "Yoga"), each with an image URL and a label below. Highlight the selected option with a primary border and ring.Pick a training style
Slider
Numeric range answer, dragging the thumb updates the value live.
Use the quiz-ui QuizSlider component to capture a number from 0 to 20 in steps of 1, showing the current value above the track. Style the track as a rounded muted bar with a primary-filled range and a round thumb.
How many hours a week do you train?
Rating
Star or numeric rating scale for a 1–N answer.
Use the quiz-ui QuizRating component to render a 5-step numeric rating scale (buttons 1 through 5). Style unselected items as muted bordered squares and the selected item as a filled primary square.
How motivated are you right now?
Text Input
Free-text answer with an optional label.
Use the quiz-ui QuizTextInput component to render a text input with the label "What should we call you?" and placeholder "Your name". Style it as a bordered, rounded input.
What should we call you?
Email Input
Email capture with format validation and an inline error.
Use the quiz-ui QuizEmailInput component to render an email input with the label "Where should we send your plan?" and inline validation that shows the message "Enter a valid email address." when the value is malformed.