Dialog Form
An animated dialog form component that expands from a button with smooth layout transitions. Includes success state with shine animation.
Install using CLI
npx shadcn@latest add "https://obsidianui.dev/r/dialog-form.json"Install Manually
1
Install dependencies
2
Copy the source code
Copy into components/ui/dialog-form.tsx
Note: This is a large component (370+ lines). Install via CLI for the full source code with animations.
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| label | string | - | Button/dialog title |
| successText | string | - | Text shown on success |
| successIcon | React.ReactNode | - | Icon shown on success |
| icon | React.ReactNode | - | Icon for the button |
| childComponent | React.ReactNode | - | Form content inside dialog |
| onSubmit | () => Promise<{success, message}> | - | Submit handler |
| onClose | () => void | - | Close callback |