---
name: "@quiz-ui"
slug: "quiz-ui"
description: "Headless, Radix-based components for building quiz funnels — shadcn-style distribution, style entirely via className."
category: "Animated components"
tags: ["animation", "forms", "loaders", "media", "navigation", "overlays"]
framework: "react"
license: null
author: "kalpovskii"
website: "https://quiz-ui-phi.vercel.app"
github: "https://github.com/kalpovskii/quiz-ui"
registry: "https://quiz-ui-phi.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 2
component_count: 15
generated_at: "2026-09-21T01:50:16.753Z"
---

# @quiz-ui

Headless, Radix-based components for building quiz funnels — shadcn-style distribution, style entirely via className.

## Links

- Website: https://quiz-ui-phi.vercel.app
- GitHub: https://github.com/kalpovskii/quiz-ui
- Registry JSON: https://quiz-ui-phi.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/quiz-ui
- This file: https://sh4dcn.vercel.app/md/quiz-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://quiz-ui-phi.vercel.app/r/registry.json
bunx shadcn@latest add https://quiz-ui-phi.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/kalpovskii/quiz-ui.git
# fetch the raw registry index
curl -s https://quiz-ui-phi.vercel.app/r/registry.json
```

## Components (15)

| name | type | description | install |
| --- | --- | --- | --- |
| quiz-cn | registry:lib | className composition helper (clsx + tailwind-merge) used by every quiz-ui component. | `npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-cn.json` |
| quiz-core | registry:hook | Headless quiz engine: state machine, branching resolution, and the useQuizEngine/useQuizStep/useQuizAnswers hooks. Installed automatically as a dependency of e… | `npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-core.json` |
| quiz-root | registry:component | Top-level funnel wrapper; owns the engine via QuizProvider. | `npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-root.json` |
| quiz-step | registry:component | Renders the active step's question heading and answer input. | `npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-step.json` |
| quiz-progress | registry:component | Progress bar with a 'Step N of M' label, on Radix Progress. | `npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-progress.json` |
| quiz-choice | registry:component | Single- and multi-select answer cards, on Radix RadioGroup/Checkbox. | `npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-choice.json` |
| quiz-image-choice | registry:component | Visual/image-based single-select answer grid. | `npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-image-choice.json` |
| quiz-slider | registry:component | Single-thumb range input for numeric answers. | `npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-slider.json` |
| quiz-rating | registry:component | Star or numeric rating scale, on Radix ToggleGroup. | `npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-rating.json` |
| quiz-text-input | registry:component | Free-text answer input. | `npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-text-input.json` |
| quiz-email-input | registry:component | Email capture input with basic format validation. | `npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-email-input.json` |
| quiz-navigation | registry:component | Back/Next controls; Next disables automatically until the step is answered. | `npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-navigation.json` |
| quiz-transition | registry:component | Fade/slide transition wrapper for step changes. Requires a Tailwind keyframe — see the component's JSDoc. | `npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-transition.json` |
| quiz-result | registry:component | Renders its children only once the funnel is complete. | `npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-result.json` |
| quiz-dialog | registry:component | Modal-embedded funnel wrapper, on Radix Dialog. | `npx shadcn@latest add https://quiz-ui-phi.vercel.app/r/quiz-dialog.json` |

## For AI agents

```text
You are adding components from @quiz-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/quiz-ui.md) for the component list.
2. Fetch the machine-readable index: https://quiz-ui-phi.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: quiz-ui).
```