Search

Search components and blocks

Sign in

AI Questionnaire

Pro

A multi-step card an assistant uses to ask clarifying questions before it answers. Single- and multi-select questions slide in direction-aware, a segmented progress bar fills as you advance, and a shared highlight glides between options. Skip or go back at any time, then review every answer on a summary step — each with an edit button — before submitting.

pnpm dlx shadcn@latest add @ditherui/ai-questionnaire

A few quick questions

Step 1 of 4

What are you trying to build?

This helps me pick the right starting point.

Props

questions{ id: string; title: string; description?: string; kind: 'single' | 'multiple'; options: { id: string; label: string; hint?: string }[] }[]sample questions
onComplete(answers: Record<string, string[]>) => void—
valueRecord<string, string[]>—
defaultValueRecord<string, string[]>{}
onValueChange(answers: Record<string, string[]>) => void—
stepnumber—
defaultStepnumber0
onStepChange(step: number) => void—
classNamestring—

When to use the AI questionnaire

Use it when an assistant needs clarifying answers before it responds. It is a multi-step card with single- and multi-select questions.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components