Components
QuizDialog
Modal-embedded funnel wrapper, built on Radix Dialog.
Purpose
For funnels launched from a button rather than embedded inline on the page — wraps your funnel in a Radix Dialog, handling focus trapping and Escape-to-close automatically.
Installation
pnpm dlx shadcn@latest add @quiz-ui/quiz-dialogUsage
<QuizDialog trigger={<button>Take the quiz</button>}>
<QuizRoot definition={quiz}>
<QuizProgress />
<QuizStep>{/* ... */}</QuizStep>
<QuizNavigation />
</QuizRoot>
</QuizDialog>Props
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | React.ReactNode | — | Element that opens the dialog. Omit to control open state externally via open/onOpenChange. |
children | React.ReactNode | — | Your funnel — typically a QuizRoot and its contents. |
className | string | — | Merged onto the dialog content panel. |
| ...rest | React.ComponentPropsWithoutRef<typeof Dialog.Root> | — | e.g. open, onOpenChange, defaultOpen. |
Notes
QuizDialogonly depends onquiz-cn, notquiz-core— it's a plain layout wrapper and doesn't touch the engine itself. TheQuizRootyou put inside it is what owns the engine, same as anywhere else.