2 variants

Questionnaire

A few questions one screen at a time, every option on a number key, and a card that animates its own height so the footer never jumps. One answer or many.

One answer

A few questions one screen at a time, every option on a number key, and a card that animates its own height so the footer never jumps.

Question 1 of 3

What would you like to work on?

Build something new Turn an idea into a first versionFix a problem Find what's wrong and put it rightPolish what's there Improve the details and interactionsExplore an idea Compare a few directions before building

usage.tsx

import { Questionnaire } from "@/components/registry/questionnaire";

export function Intake() {
  return (
    <Questionnaire
      questions={[
        {
          id: "intent",
          title: "What would you like to work on?",
          options: [
            { id: "new", label: "Build something new", description: "Turn an idea into a first version" },
            { id: "fix", label: "Fix a problem", description: "Find what's wrong and put it right" },
          ],
        },
      ]}
      onComplete={(answers) => save(answers)}
    />
  );
}

"use client";

import { Check, ChevronLeft, CornerDownLeft } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { type KeyboardEvent, type ReactNode, useId, useRef, useState } from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export interface QuestionOption {
  id: string;
  /** The choice itself, set in the foreground weight. */
  label: string;

279 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/questionnaire

Many answers

The same flow with every question open to more than one answer, a live count, and a Continue that stays off until the question's minimum is met.

Question 1 of 2

What is it built with?

Pick as many as apply.

Next.js App routerReact Vite or your own setupSvelteNothing yet Starting from an empty folder

"use client";

import { Check, ChevronLeft, CornerDownLeft } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { type KeyboardEvent, type ReactNode, useId, useRef, useState } from "react";
import type { QuestionOption } from "@/components/registry/questionnaire";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export interface MultiQuestion {
  id: string;
  title: string;

296 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/questionnaire-multi