shadcn.io is not affiliated with official shadcn/ui
Shadcn Questionnaire for React
Multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.
Installation
bunx --bun shadcn@latest add https://kit.dev/r/aria/questionnaire.jsonnpx shadcn@latest add https://kit.dev/r/aria/questionnaire.jsonpnpm dlx shadcn@latest add https://kit.dev/r/aria/questionnaire.jsonyarn shadcn@latest add https://kit.dev/r/aria/questionnaire.jsonThis component depends on Button. Install it first if you haven't already.
Install the following dependencies:
bun add @shadcn/react lucide-reactnpm install @shadcn/react lucide-reactpnpm add @shadcn/react lucide-reactyarn add @shadcn/react lucide-reactCopy and paste the following code into your project.
"use client";
import { Questionnaire as QuestionnairePrimitive } from "@shadcn/react/questionnaire";
import { CheckIcon } from "lucide-react";
import type * as React from "react";
import { cn } from "@/lib/utils";
import { type Button, buttonVariants } from "@/registry/aria/components/button";
function Questionnaire({
className,
...props
}: React.ComponentProps<typeof QuestionnairePrimitive.Root>) {
return (
<QuestionnairePrimitive.Root
className={cn("cn-questionnaire flex w-full min-w-0 flex-col", className)}
data-slot="questionnaire"
{...props}
/>Update the import paths to match your project setup.
Anatomy
Questionnaire
├── QuestionnaireProgress
├── QuestionnaireItem
│ ├── QuestionnaireTitle
│ ├── QuestionnaireDescription
│ ├── QuestionnaireChoices
│ │ ├── QuestionnaireChoice
│ │ └── QuestionnaireInput
│ └── QuestionnaireError
└── QuestionnaireActions
├── QuestionnairePrevious
├── QuestionnaireSkip
├── QuestionnaireNext
└── QuestionnaireSubmitUsage
import {
Questionnaire,
QuestionnaireActions,
QuestionnaireChoice,
QuestionnaireChoices,
QuestionnaireDescription,
QuestionnaireError,
QuestionnaireInput,
QuestionnaireItem,
QuestionnaireNext,
QuestionnairePrevious,
QuestionnaireProgress,
QuestionnaireSkip,
QuestionnaireSubmit,
QuestionnaireTitle,
} from "@/components/ui/questionnaire";<Questionnaire items={items} onSubmit={handleSubmit} className="max-w-full min-w-0">
<QuestionnaireProgress />
<QuestionnaireItem name="direction" required>
<QuestionnaireTitle>What should we prototype next?</QuestionnaireTitle>
<QuestionnaireDescription>Choose a direction.</QuestionnaireDescription>
<QuestionnaireChoices>
<QuestionnaireChoice value="delegation">Delegation</QuestionnaireChoice>
</QuestionnaireChoices>
<QuestionnaireError />
</QuestionnaireItem>
<QuestionnaireActions>
<QuestionnairePrevious />
<QuestionnaireSkip />
<QuestionnaireNext />
<QuestionnaireSubmit />
</QuestionnaireActions>
</Questionnaire>