Components
QuizProgress
Progress bar with a "Step N of M" label, built on Radix Progress.
Purpose
Shows how far through the funnel the user is, based on the number of unique steps visited so far versus the total step count.
Installation
pnpm dlx shadcn@latest add @quiz-ui/quiz-progressUsage
<QuizProgress />// Hide the "Step N of M" text, keep just the bar
<QuizProgress showLabel={false} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
showLabel | boolean | true | Show the "Step N of M" text above the bar. |
| ...rest | React.ComponentPropsWithoutRef<typeof Progress.Root> | — | Forwarded to Radix's Progress.Root. |
Notes
- Progress is an estimate (
visited steps / total steps), not a guarantee of remaining steps — branching funnels can visit fewer than the total step count on any given path.