https://github.com/strlrd-29/shadcn-ui-form-builder
WYSIWYG shadcn form builder.
https://github.com/strlrd-29/shadcn-ui-form-builder
codegen nextjs shadcn-ui
Last synced: 4 months ago
JSON representation
WYSIWYG shadcn form builder.
- Host: GitHub
- URL: https://github.com/strlrd-29/shadcn-ui-form-builder
- Owner: strlrd-29
- License: mit
- Created: 2024-10-25T09:30:50.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-20T14:39:41.000Z (about 1 year ago)
- Last Synced: 2024-11-20T15:23:24.497Z (about 1 year ago)
- Topics: codegen, nextjs, shadcn-ui
- Language: TypeScript
- Homepage: https://forms.ouassim.tech
- Size: 619 KB
- Stars: 68
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-shadcnui - Github
README
Shadcn/ui Form Builder
Awesome WYSIWYG codegen Shadcn/ui Form Builder
Demo
·
Report Bug
·
Request Feature
## Table of Contents
- [Table of Contents](#table-of-contents)
- [About The Project](#about-the-project)
- [Installation](#installation)
- [Usage](#usage)
- [Roadmap](#roadmap)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#contact)
- [Acknowledgments](#acknowledgments)
## About The Project
[![Product Name Screen Shot][product-screenshot]](https://forms.ouassim.tech)
Creating forms has never been simpler, thanks to [shadcn/ui](https://ui.shadcn.com) and [React Hook Form](https://www.react-hook-form.com/). But what if we took it a step further? Imagine if you could simply select the input fields you need, and the rest was done for you—automatically:
- Generate a Zod schema tailored to your selected fields.
- Create complete form code, fully integrated with your chosen fields.
- Include validation, default values, and more advanced configurations.
With just a few clicks, your form could be ready to go!
## Installation
1. Clone the repo
```sh
git clone https://github.com/strlrd-29/shadcn-ui-form-builder
```
2. Navigate to project dir
```sh
cd shadcn-ui-form-builder
```
3. Install NPM packages
```sh
pnpm install
```
## Usage
Start the dev server
```sh
pnpm dev
```
Open your browser and navigate to [http://localhost:3000](http://localhost:3000) to see the application in action.
## Roadmap
- [ ] Ability to have multiple fields on one line and to re-arrange them as you want.
- [ ] Add More fields
- [ ] File input
- [ ] OTP input
- [ ] Multi select
- [ ] Phone input
- [ ] Add choice to use [yup](https://github.com/jquense/yup?tab=readme-ov-file) validation
- [ ] Add Form Templates.
- [ ] Add more detailed customizations on fields (regex for text inputs for eg.)
## Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Contact
Ghribi Ouassim Abdelmalek - [@strlrd29](https://twitter.com/strlrd29) -
Project Link: [forms.ouassim.tech](https://forms.ouassim.tech)
## Acknowledgments
- [hasanharman/form-builder](https://github.com/hasanharman/form-builder)
- [KryptXBSA/FormBuilder](https://github.com/KryptXBSA/FormBuilder)
- [shadcn/ui](https://ui.shadcn.com/)
- [React Hook Form](https://www.react-hook-form.com/)
- [OpnForm](https://opnform.com/)
[product-screenshot]: public/screenshot.png