Shadcn Questionnaire Segmented Progress
Segmented progress with step labels. Built by composing Button, Empty, Questionnaire. Uses cn alongside the shadcn primitives. A free, open source shadcn questionnaire example you can install with npx shadcn@latest add @reui/c-questionnaire-4 and edit as your own code.
A custom progress bar built from the progress render state, over a four question flow.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A bare flow whose counter is redrawn as filled segments with a named step, ending on an Empty success state
When to use
- Onboarding and setup flows that ask one single or multiple answer question per screen
- Short intake surveys, such as how a visitor heard about you or what they are moving off
- Question flows with an optional step, a branch that joins on an earlier answer or a rule across answers
When not to use
- Segments that track a task or checklist with no question behind each one: use the Progress component
- Named steps the visitor clicks to jump straight to any one: use the Stepper component
- A complete first-run screen that also collects a profile, a timezone and teammate invites: use the Onboarding blocks
Agent notes
- Keep
w-fullonQuestionnaireProgress, which shipsw-fitwith a minimum width sized for its default text aria-valuetextis set after thepropsspread so the step label replaces the built in Question N of M announcement- A
QuestionnaireItemwhosenameis missing from the rootitemslist is left out of the flow and the count, with only a dev warning handleSubmitreads the answers withFormDataand only renders a local confirmation; send them to your API from thereQuestionnaireActionsis a 3 column grid placed for Previous, Skip and Next or Submit, so keep any other button outside it
https://web.dev.reui.io/components/questionnaire/c-questionnaire-4.mdget_example("c-questionnaire-4")npx shadcn@latest add @reui/c-questionnaire-4Shadcn Components in Questionnaire Segmented Progress
Dependencies
- cn
About Shadcn Questionnaire Segmented Progress
Segmented progress with step labels. Built by composing Button, Empty, Questionnaire. Uses cn alongside the shadcn primitives. A free, open source shadcn questionnaire example you can install with npx shadcn@latest add @reui/c-questionnaire-4 and edit as your own code.
What You Can Build With Shadcn Questionnaire Segmented Progress
- Composes Button, Empty, Questionnaire, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-questionnaire-4
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Questionnaire Examples
- Guided Setup Guided workspace setup
- Multi-Select Multi-select answers
- Write-In Answer A written answer beside the choices
- Optional Skip An optional question with skip
- Cross-Question Rule A rule that sends you back
- Conditional Branch A branch that appears when it applies
Related Shadcn Component Categories
Open-source shadcn radio group components for single-choice forms, plan selection, and settings preferences.
Open-source shadcn rating components for product reviews, feedback forms, and satisfaction scores.
Open-source shadcn resizable components for split panes, workspace layouts, and draggable dividers.
Open-source shadcn scroll area components for custom scroll regions, sidebar panes, and dense lists.
Open-source shadcn scrollspy components for docs navigation, active table of contents, and long-form sections.
Open-source shadcn select components for form selection, settings menus, and filter controls.
Frequently Asked Questions
When should I use Shadcn Questionnaire Segmented Progress?
Use it for a bare flow whose counter is redrawn as filled segments with a named step, ending on an Empty success state.
Shadcn Questionnaire as a whole fits:
- Onboarding and setup flows that ask one single or multiple answer question per screen
- Short intake surveys, such as how a visitor heard about you or what they are moving off
- Question flows with an optional step, a branch that joins on an earlier answer or a rule across answers
For segments that track a task or checklist with no question behind each one, use the Progress component. For named steps the visitor clicks to jump straight to any one, use the Stepper component. For a complete first-run screen that also collects a profile, a timezone and teammate invites, use the Onboarding blocks.
How do I install Shadcn Questionnaire Segmented Progress?
Is Shadcn Questionnaire Segmented Progress free to use?
Which components does Shadcn Questionnaire Segmented Progress use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.