Skip to content
MIZU.

SIG—12 Signature system

Interview

A conversation instead of a form: one question at a time, letter keys for choices, branching, a review before sending and an honest submit.

View .md

Live — this one is real

Network

Illustrative onboarding. Letters answer choices, Y/N answers yes-or-no, digits pick a score, Enter continues. Answering “no” to the design-system question skips its follow-up.

Set up your studio in a minute.

Eight short questions. You can go back at any point, and nothing is sent until you review it.

8 questions · Enter ↵ to continue

onAnswersChange
{}

Usage

tsx
"use client";

import { Interview } from "mizu-ui";

export function Example() {
  return (
    <Interview
      label="Feedback"
      onSubmit={(answers) =>
        localStorage.setItem("mizu-feedback", JSON.stringify(answers))
      }
      questions={[
        {
          id: "role",
          title: "What do you do most days?",
          type: "choice",
          required: true,
          options: [
            { value: "design", label: "Design" },
            { value: "code", label: "Engineering" },
          ],
        },
        {
          id: "score",
          title: "How was your week?",
          type: "scale",
          min: 1,
          max: 5,
        },
        { id: "note", title: "Anything else?", type: "long" },
      ]}
    />
  );
}

It starts with "use client" because it keeps state or passes functions to components, so it pastes into a Next.js page as it is. Other React setups ignore the directive.

This code, running — no configuration beyond the data

What do you do most days? *

Press A–B

Keyboard

Enter
Continue (Ctrl + Enter in long answers)
ABC…
Choose an option; multiple choice toggles
YN
Answer a yes-or-no question
1…90
Pick a score (0 is ten)

Source & setup

Add this component to your project with the shadcn CLI. The command copies its source into your configured UI directory, with base.css, Mizu’s tokens, and the stylesheets that hold its rules. Each rule lives in one stylesheet, so components you add together never repeat CSS. In a project without a components.json, run npx shadcn@latest init 0xuser64bit/mizu/preset first: plain init installs shadcn’s theme into your global CSS. Then load the fonts.

sh
npx shadcn@latest add 0xuser64bit/mizu/interview

Every component imports from its own path, its name in kebab case. To paste the example, replace its mizu-ui import with:

tsx
import { Interview } from "@/components/ui/mizu/interview";

For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion. A Client Component: its source starts with “use client”.

Inspect signature/Interview.tsx

Source is included in the npm package under src/signature/Interview.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
label / questionsstring / InterviewQuestion[]—id, title, description, type (text, long, email, number, choice, multi, scale, yesno), options, required, min, max, validate and next.
answers / defaultAnswers / onAnswersChangeRecord<string, InterviewAnswer>—Answers by question id.
onSubmit(answers) => void | Promise—Resolve to finish; throw to keep everything and offer a retry.
intro / done{ title, body, start } / ReactNode—Optional welcome screen and the completion message.
submitLabelstring"Send answers"The review screen's action.

Accessibility

Each question is a labelled form; focus moves to its first field. Choices are real radio or checkbox groups with letter shortcuts as an enhancement; the scale is a radio group. Errors are alerts linked to the field. Progress is a progressbar, and each new question, the review and the result are announced.

Motion

Questions rise in going forward and settle downward going back. A single choice blinks twice to confirm and moves on by itself; a rejected answer shakes once. The progress hairline stretches and a diamond seal turns into place when it is sent. Reduced motion keeps every state without travel or blinking.

Works alongside

ChronicleTrendChartWaveformPlane