Interactive Quiz Components — Engaging Inputs for React
Interactive quiz components keep users engaged. quiz-ui provides a slider with a live value display, a rating scale with click-to-select buttons, image choice cards with visual feedback, and a QuizTransition component that animates between steps using CSS animations.
Last updated: 2026-09-25
Frequently asked questions
How do I animate between quiz steps?
Wrap your QuizStep in a QuizTransition component. It keys on the current step ID so React remounts — and re-animates — the subtree on every transition.
Can I use custom animations?
Yes. QuizTransition accepts a className prop — pass any CSS animation class. The docs include a quiz-ui-step-in keyframe you can drop in.
Is the slider touch-friendly?
Yes. QuizSlider wraps Radix Slider which supports touch, pointer, and keyboard input.