Shadcn/ui Form Builder

Awesome WYSIWYG codegen Shadcn/ui Form Builder

Demo · Report Bug · Request Feature

Table of Contents

• Table of Contents
• About The Project
• Installation
• Usage
• Roadmap
• Contributing
• License
• Contact
• Acknowledgments

About The Project

Creating forms has never been simpler, thanks to shadcn/ui and React Hook Form. 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!

(back to top)

Installation

1. Clone the repo

   git clone https://github.com/strlrd-29/shadcn-ui-form-builder

2. Navigate to project dir

   cd shadcn-ui-form-builder

3. Install NPM packages

   pnpm install

(back to top)

Usage

Start the dev server

pnpm dev

Open your browser and navigate to http://localhost:3000 to see the application in action.

(back to top)

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 validation
• Add Form Templates.
• Add more detailed customizations on fields (regex for text inputs for eg.)

(back to top)

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.

(back to top)

Contact

Ghribi Ouassim Abdelmalek - @strlrd29 - me@ouassim.tech

Project Link: forms.ouassim.tech

(back to top)

Acknowledgments

• hasanharman/form-builder
• KryptXBSA/FormBuilder
• shadcn/ui
• React Hook Form
• OpnForm

(back to top)