{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "survey-5",
  "title": "Full Page Onboarding Survey",
  "description": "Full-page onboarding survey showing one question per screen in oversized type, with letter-key shortcuts and a thin progress bar across the top.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "questionnaire",
    "sonner"
  ],
  "files": [
    {
      "path": "registry/blocks/survey/5/survey-block.tsx",
      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\nimport {\n  Questionnaire,\n  QuestionnaireActions,\n  QuestionnaireChoice,\n  QuestionnaireChoices,\n  QuestionnaireDescription,\n  QuestionnaireError,\n  QuestionnaireInput,\n  QuestionnaireItem,\n  QuestionnaireNext,\n  QuestionnairePrevious,\n  QuestionnaireProgress,\n  QuestionnaireSkip,\n  QuestionnaireSubmit,\n  QuestionnaireTitle,\n} from \"@/components/ui/questionnaire\"\nimport { Toaster } from \"@/components/ui/sonner\"\n\ntype Question = {\n  name: string\n  prompt: string\n  description: string\n  choices: { value: string; label: string }[]\n  required?: boolean\n  input?: { label: string; placeholder: string }\n}\n\nconst QUESTIONS: Question[] = [\n  {\n    name: \"building\",\n    required: true,\n    prompt: \"What Are You Building With Acme?\",\n    description: \"Pick the closest fit. Press the letter key to answer.\",\n    choices: [\n      { value: \"internal\", label: \"An Internal Tool\" },\n      { value: \"saas\", label: \"A Customer Facing Product\" },\n      { value: \"agency\", label: \"Client Work\" },\n      { value: \"side\", label: \"Something On The Side\" },\n    ],\n  },\n  {\n    name: \"team\",\n    required: true,\n    prompt: \"How Big Is The Team Around You?\",\n    description: \"Count everyone who will touch the workspace.\",\n    choices: [\n      { value: \"solo\", label: \"Just Me\" },\n      { value: \"small\", label: \"Two To Ten People\" },\n      { value: \"mid\", label: \"Eleven To Fifty People\" },\n      { value: \"large\", label: \"More Than Fifty People\" },\n    ],\n  },\n  {\n    name: \"stage\",\n    required: true,\n    prompt: \"Where Are You In The Build?\",\n    description: \"This decides which guides we open first.\",\n    choices: [\n      { value: \"exploring\", label: \"Still Exploring\" },\n      { value: \"building\", label: \"Building The First Version\" },\n      { value: \"shipped\", label: \"Already Shipped\" },\n      { value: \"scaling\", label: \"Scaling What Works\" },\n    ],\n  },\n  {\n    name: \"heard\",\n    prompt: \"How Did You Hear About Acme?\",\n    description: \"Skip it if you would rather not say.\",\n    choices: [\n      { value: \"colleague\", label: \"From A Colleague\" },\n      { value: \"search\", label: \"A Search Result\" },\n      { value: \"social\", label: \"Social Media\" },\n    ],\n    input: { label: \"Somewhere else\", placeholder: \"Somewhere else\" },\n  },\n]\n\nexport default function SurveyBlock() {\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n    const answers = new FormData(event.currentTarget)\n    const stage = String(answers.get(\"stage\") ?? \"\")\n    const label =\n      QUESTIONS[2].choices.find((choice) => choice.value === stage)?.label ??\n      \"your answers\"\n\n    toast.success(\"Your Workspace Is Ready\", {\n      description: `We tailored the getting started guide to \"${label}\".`,\n    })\n  }\n\n  return (\n    <section className=\"flex min-h-svh w-full flex-col bg-background text-foreground\">\n      <Questionnaire\n        items={QUESTIONS}\n        onSubmit={handleSubmit}\n        shortcuts=\"letters\"\n        className=\"flex-1 gap-0\"\n      >\n        <QuestionnaireProgress\n          className=\"min-h-0 w-full min-w-0\"\n          render={(props, state) => (\n            <div {...props}>\n              <div className=\"h-1 w-full bg-muted\">\n                <div\n                  className=\"h-full bg-primary transition-[width] duration-300 ease-out\"\n                  style={{ width: `${(state.current / state.total) * 100}%` }}\n                />\n              </div>\n            </div>\n          )}\n        />\n\n        <div className=\"mx-auto flex w-full max-w-2xl flex-1 flex-col justify-center gap-10 px-6 py-16\">\n          <div className=\"flex flex-col gap-8\">\n            {QUESTIONS.map((question) => (\n              <QuestionnaireItem\n                key={question.name}\n                name={question.name}\n                required={question.required}\n              >\n                <QuestionnaireTitle className=\"text-2xl text-balance sm:text-3xl\">\n                  {question.prompt}\n                </QuestionnaireTitle>\n                <QuestionnaireDescription className=\"text-sm\">\n                  {question.description}\n                </QuestionnaireDescription>\n                <QuestionnaireChoices className=\"mt-2\">\n                  {question.choices.map((choice) => (\n                    <QuestionnaireChoice\n                      key={choice.value}\n                      value={choice.value}\n                      className=\"text-sm\"\n                    >\n                      <span className=\"font-medium\">{choice.label}</span>\n                    </QuestionnaireChoice>\n                  ))}\n                  {question.input ? (\n                    <QuestionnaireInput\n                      aria-label={question.input.label}\n                      placeholder={question.input.placeholder}\n                    />\n                  ) : null}\n                </QuestionnaireChoices>\n                <QuestionnaireError />\n              </QuestionnaireItem>\n            ))}\n          </div>\n\n          <QuestionnaireActions>\n            <QuestionnairePrevious />\n            <QuestionnaireSkip variant=\"ghost\" />\n            <QuestionnaireNext />\n            <QuestionnaireSubmit>Finish</QuestionnaireSubmit>\n          </QuestionnaireActions>\n        </div>\n      </Questionnaire>\n      <Toaster />\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/survey-5.tsx"
    }
  ],
  "meta": {
    "height": "492px",
    "tier": "free"
  },
  "docs": "Requires a `base-*` style in components.json (the `shadcn init` default). Legacy `new-york`/`radix-*` styles install Radix primitives, which reject the `render` prop this block uses.",
  "categories": [
    "survey"
  ],
  "type": "registry:block"
}