quiz-ui

Overview

quiz-ui is a free, shadcn/ui-compatible registry of headless, Radix-based components for building quiz funnels. Components install as source and ship with no colors, borders or layout baked in, so they are styled entirely through className props.

A funnel is a plain QuizDefinition object plus a few structural components. QuizRoot owns the engine state machine, QuizStep renders the active question, QuizProgress reads the engine's progress estimate, and QuizNavigation disables Next until a required step is answered. Branch rules on each step route users to different follow-up questions, with the first matching rule winning. Each demo on the site offers both copyable code and an LLM prompt to generate the same styling.

Features

• Data-driven funnels: Define steps, questions and answers in one QuizDefinition object.
• Branching: Per-step rules route users to different questions based on their answers.
• Answer inputs: Single choice cards, image choice, slider, rating, text input and email input.
• Progress and navigation: A progress bar driven by step history and Back and Next controls with validation.
• Results and transitions: Transition and result components, plus a dialog wrapper for modal quizzes.
• Headless styling: Separate class props for items, active states, indicators, labels and descriptions.

Tech stack

• React, Radix UI primitives, Tailwind CSS, shadcn registry

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @quiz-ui/component-name