Flashcard
Study card for active recall with prompt and answer states. Install Flashcard from the VLLNT UI registry with the shadcn CLI.
Supported platforms:WebNative
1 storyView componentQuiz
Compare Quiz for React and React Native in VLLNT UI 0.4.0. Explore source, dependencies and native capabilities. Native is source-only; npm publication is pending.
Supported platforms:WebNative
What it is and when to use
Quiz is an interactive multiple-choice component for a single question. Learners pick one option and press Check Answer; the component marks the choice correct or incorrect, reveals the right option, and can show a per-option explanation plus an overall result panel. An optional hint toggle and a Try Again reset are built in, and an onAnswer callback reports whether the answer was right. Use it to embed knowledge checks in tutorials, docs, or courseware.
LearningPreview
Switch between light and dark to inspect the embedded Storybook preview.
Interactive multiple-choice quiz with hints, explanations, and scoring. Part of the learning family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Platform comparison
| Platform | Dependencies | Capabilities |
|---|---|---|
| Web | @vllnt/ui@^0.3.0 | Browser rendering, DOM events, and ARIA semantics |
| Native | @vllnt/ui-native, react-native | Native-adapted interaction and accessibility |
Installation
Add Quiz to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/quiz.jsonSource
Stories
Explore every variant and state in the interactive Storybook:
FAQ
- What is Quiz?
- Quiz is a React multiple-choice component from VLLNT UI that presents one question with several options. It validates the selected answer, highlights correct and incorrect choices, and can display hints and explanations for self-paced learning.
- How do I add Quiz?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/quiz.json` to install Quiz via the shadcn CLI. The component and its types are copied into your project so you can customize them.
- Does Quiz show hints and explanations?
- Yes. Pass a hint string to reveal a Show hint toggle, give any option an explanation shown after submitting, and pass an explanation node for the result panel. An onAnswer callback fires with whether the choice was correct.