Dialog Stack
ダイアログスタック
A multi step dialog where each step stays behind the next one, so the stack builds up as you move forward. Portal and open state from Radix Dialog↗↗, animation from Framer Motion↗↗ and Tailwind CSS.
Installation
Install the following dependencies:1
npm install @radix-ui/react-dialognpm install framer-motionCopy and paste the following code into a new component file:2
How to use it3
Props
DialogStack
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode Trigger, overlay and body of the stack |
| open | — | boolean Controlled open state |
| defaultOpen | false | boolean Open state when the stack is uncontrolled |
| onOpenChange | — | (open: boolean) => void Called when the stack opens or closes |
| clickable | false | boolean Clicking a dialog behind the active one jumps back to it |
| dark | false | boolean Applies the dark class inside the portal, since the portal escapes the preview wrapper |
| className | — | string Additional classes on the wrapper |
DialogStackTrigger
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode Content of the trigger button |
| asChild | false | boolean Merges the click handler into the child instead of rendering a button |
| onClick | — | (event) => void Called after the stack is opened |
| className | — | string Additional classes on the trigger |
DialogStackOverlay
| Name | Default | Description |
|---|---|---|
| className | — | string Additional classes on the backdrop |
DialogStackBody
| Name | Default | Description |
|---|---|---|
| children | — | ReactElement | ReactElement[] The DialogStackContent steps, each one receives its index |
| className | — | string Additional classes on the centering container |
DialogStackContent
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode Content of a single step |
| index | 0 | number Position in the stack, injected by DialogStackBody |
| offset | 10 | number Vertical gap in pixels between two stacked dialogs |
| className | — | string Additional classes on the dialog surface |
DialogStackHeader
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode Usually a title and a description |
| className | — | string Additional classes on the header |
DialogStackTitle
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode Title of the step |
| className | — | string Additional classes on the title |
DialogStackDescription
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode Supporting copy under the title |
| className | — | string Additional classes on the description |
DialogStackFooter
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode Navigation buttons, aligned to the right |
| className | — | string Additional classes on the footer |
DialogStackNext
| Name | Default | Description |
|---|---|---|
| children | "Next" | ReactNode Label of the button |
| asChild | false | boolean Merges the click handler into the child instead of rendering a button |
| className | — | string Additional classes on the button |
DialogStackPrevious
| Name | Default | Description |
|---|---|---|
| children | "Previous" | ReactNode Label of the button |
| asChild | false | boolean Merges the click handler into the child instead of rendering a button |
| className | — | string Additional classes on the button |
DialogStackClose
| Name | Default | Description |
|---|---|---|
| children | "Close" | ReactNode Label of the button |
| asChild | false | boolean Merges the click handler into the child instead of rendering a button |
| className | — | string Additional classes on the button |