quiz-ui
Components

QuizNavigation

Back/Next controls for the active step.

Purpose

Standard funnel navigation. Next disables automatically until the current step is answered (via isStepAnswered in the engine); Back is hidden on the first step since there's no history yet.

Installation

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

Usage

<QuizNavigation />
<QuizNavigation nextLabel="Continue" backLabel="Go back" />

Props

PropTypeDefaultDescription
nextLabelstring"Next"Label on the advance button.
backLabelstring"Back"Label on the back button.
hideBackbooleanfalseHide Back entirely, even on later steps.
classNamestringMerged onto the wrapper.

Notes

  • A step is "answered" per isStepAnswered in the engine: any non-empty value, unless the step sets required: false, in which case it's always considered answered.

On this page