QuizRoot

Purpose

QuizRoot is the entry point for every funnel. It creates and owns a single engine instance (via QuizProvider internally) for everything nested inside it, and renders a styled container around your funnel. Every other quiz-ui component must be rendered somewhere inside a QuizRoot.

Installation

pnpm dlx shadcn@latest add @quiz-ui/quiz-root

Usage

import {
  QuizRoot,
  QuizProgress,
  QuizStep,
  QuizNavigation,
} from "@/components/ui/quiz";

<QuizRoot definition={quiz} onComplete={(answers) => submit(answers)}>
  <QuizProgress />
  <QuizStep>{/* ... */}</QuizStep>
  <QuizNavigation />
</QuizRoot>;

Props

Prop	Type	Default	Description
`definition`	`QuizDefinition`	—	The funnel to run. Required.
`onComplete`	`(answers: QuizAnswers) => void`	—	Called once, the moment the engine reaches its last step.
`children`	`React.ReactNode`	—	The rest of your funnel UI.
`className`	`string`	—	Merged onto the container `<div>`.
...rest	`React.HTMLAttributes<HTMLDivElement>`	—	Forwarded to the container `<div>`.

Notes

onComplete fires exactly once per completion — it won't re-fire if the user navigates back and forward through an already-completed funnel.
The container renders as a centered card (max-w-md, bordered, padded). Override via className if you want a different shell.