@quiz-ui

Headless, Radix-based components for building quiz funnels — shadcn-style distribution, style entirely via className.

15 components react shadcn-cli

website ↗ github ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/registry.json

pnpm pnpm dlx shadcn@latest add https://quiz-ui-phi.vercel.app/r/registry.json

bun bunx shadcn@latest add https://quiz-ui-phi.vercel.app/r/registry.json

fetch registry curl -s https://quiz-ui-phi.vercel.app/r/registry.json

Components

15 total

quiz-ui className helper lib

className composition helper (clsx + tailwind-merge) used by every quiz-ui component.

npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-cn.json

Quiz engine hook

Headless quiz engine: state machine, branching resolution, and the useQuizEngine/useQuizStep/useQuizAnswers hooks. Installed automatically as a dependency of e…

npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-core.json

QuizRoot component

Top-level funnel wrapper; owns the engine via QuizProvider.

npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-root.json

QuizStep component

Renders the active step's question heading and answer input.

npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-step.json

QuizProgress component

Progress bar with a 'Step N of M' label, on Radix Progress.

npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-progress.json

QuizChoice / QuizChoiceGroup component

Single- and multi-select answer cards, on Radix RadioGroup/Checkbox.

npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-choice.json

QuizImageChoice component

Visual/image-based single-select answer grid.

npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-image-choice.json

QuizSlider component

Single-thumb range input for numeric answers.

npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-slider.json

QuizRating component

Star or numeric rating scale, on Radix ToggleGroup.

npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-rating.json

QuizTextInput component

Free-text answer input.

npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-text-input.json

QuizEmailInput component

Email capture input with basic format validation.

npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-email-input.json

QuizNavigation component

Back/Next controls; Next disables automatically until the step is answered.

npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-navigation.json

QuizTransition component

Fade/slide transition wrapper for step changes. Requires a Tailwind keyframe — see the component's JSDoc.

npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-transition.json

QuizResult component

Renders its children only once the funnel is complete.

npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-result.json

QuizDialog component

Modal-embedded funnel wrapper, on Radix Dialog.

npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-dialog.json