Profile
Basic information
), settings: [ { type: 'text', slug: 'name', label: 'Name' }, { type: 'text', slug: 'email', label: 'Email' }, { type: 'phone', slug: 'phone', label: 'Phone' }, { type: 'textarea', slug: 'bio', label: 'Bio', description: 'Short bio (max 200 chars)', }, ], }, ], }} defaultValues={{ name: 'John Doe', email: 'john@example.com', phone: '', bio: '', }} onSubmit={(values) => { console.log('QuickForm submitted:', values); }} /> ``` ## API Reference ### Props `QuickFormComponentProps``bash npm install react-hook-form motion `
`bash npm install motion/react react-remove-scroll `
```tsx showLineNumbers
```
## Features
* Built on top of the shadcn/ui components, using the radix design system
* Support for different step types such as "dialog" and "floating"
* Support for customizable content per step
* Flexible positioning of the tour dialog per step
* Progress tracking shows users their progress through the tour
### Keyboard controls
{children}
```
## Troubleshooting
### Why do we use an ImageWrapper ?
`motion` uses the scaleX and scaleY transform properties to change the size of the element.
This may lead to deformation of the element, making it hard to properly render images.
Wrapping the image with position `absolute` in a `relative` container avoid this issue.
This requires several things:
* the image must be bigger than the wrapper
* set yourself the x and y position of the image to make it covers the entire `relative` wrapper
## API Reference
### Root
`DialogProps`
Glass Content
This content appears behind realistic glass.
Content with glass effect
);
}
```
## Examples
### Form Integration
Fumadocs
Notion
Search
);
}
```
{t('home.title')}
{t('activeLanguage', { language })}