[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73819":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},73819,"form-builder","hasanharman\u002Fform-builder","hasanharman","A dynamic form-building tool that allows users to create, customize, and validate forms seamlessly within web applications.","https:\u002F\u002Fwww.shadcn-form.com\u002F",null,"TypeScript",2682,267,16,26,0,1,4,3,29.28,"MIT License",false,"main",[25,26,27,28,29],"nextjs","react","react-hook-form","shadcn","zod","2026-06-12 02:03:18","# Form Builder\nA dynamic form-building tool that allows users to create, customize, and validate forms seamlessly within web applications. Built with React, Next.js, and various other technologies, Form Builder provides an intuitive interface for developers and users alike.\n\n\u003Cbr \u002F>\n\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fvercel.com\u002Foss\">\n  \u003Cimg alt=\"Vercel OSS Program\" src=\"https:\u002F\u002Fvercel.com\u002Foss\u002Fprogram-badge.svg\" \u002F>\n\u003C\u002Fa>\n\n## Table of Contents\n\n- [Form Builder](#form-builder)\n  - [Table of Contents](#table-of-contents)\n  - [Features](#features)\n  - [Live Demo](#live-demo)\n  - [YouTube Demo](#youtube-demo)\n  - [Installation](#installation)\n  - [Usage](#usage)\n    - [Creating a Form](#creating-a-form)\n  - [Components](#components)\n  - [Validation](#validation)\n  - [API](#api)\n    - [Form Submission](#form-submission)\n  - [Contributing](#contributing)\n  - [License](#license)\n  - [Sponsors](#sponsors)\n    - [⭐ Header Sponsors ($100\u002Fmonth)](#-header-sponsors-100month)\n    - [Project Supporters ($50\u002Fmonth)](#project-supporters-50month)\n    - [Community Supporters ($10\u002Fmonth)](#community-supporters-10month)\n    - [Past Sponsors](#past-sponsors)\n    - [Interested in Sponsoring?](#interested-in-sponsoring)\n  - [Acknowledgements](#acknowledgements)\n\n## Features\n\n- **Dynamic Form Creation**: Easily create forms with various input types including text, checkbox, radio buttons, and more.\n- **Real-Time Validation**: Validate user inputs using the Zod library, ensuring data integrity and user-friendly feedback.\n- **Responsive Design**: Built with Tailwind CSS, ensuring forms look great on all devices.\n- **Customizable Components**: Leverage ShadCN components for a consistent and modern UI experience.\n- **Server-Side Rendering**: Utilize Next.js for optimized performance and SEO.\n\n## Live Demo\n\nCheck out the live demo of the Form Builder [here](https:\u002F\u002Fwww.shadcn-form.com\u002F).\n\n## YouTube Demo\n\n[![Watch the demo](https:\u002F\u002Fimg.youtube.com\u002Fvi\u002F25IzTkU3En4\u002F0.jpg)](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=25IzTkU3En4)\n\n## Installation\n\nTo get started with Form Builder, follow these steps:\n\n1. Clone the repository:\n   ```bash\n   git clone https:\u002F\u002Fgithub.com\u002Fhasanharman\u002Fform-builder.git\n   ```\n\n2. Navigate into the project directory:\n   ```bash\n   cd form-builder\n   ```\n\n3. Install the necessary dependencies:\n   ```bash\n   npm install\n   ```\n\n## Usage\n\nTo start the development server, run:\n\n```bash\nnpm run dev\n```\n\nOpen your browser and navigate to `http:\u002F\u002Flocalhost:3000` to see the application in action.\n\n### Creating a Form\n\n1. **Access the Builder**: Once the app is running, navigate to the form builder interface.\n2. **Add Inputs**: Use the toolbar to add different types of inputs.\n3. **Customize Inputs**: Click on any input field to configure properties such as label, placeholder, required validation, etc.\n4. **Save & Preview**: Once your form is built, save it and preview the output.\n\n## Components\n\nForm Builder consists of various reusable components:\n\n- **FormContainer**: The main container for the form elements.\n- **InputField**: A customizable input component.\n- **SelectField**: Dropdown selection component.\n- **CheckboxField**: A checkbox input component.\n- **Button**: A styled button component for form submission.\n\n## Validation\n\nForm Builder utilizes [Zod](https:\u002F\u002Fzod.dev\u002F) for input validation. You can define schemas for your forms as follows:\n\n```javascript\nimport { z } from 'zod';\n\nconst formSchema = z.object({\n  name: z.string().min(1, \"Name is required\"),\n  email: z.string().email(\"Invalid email address\"),\n  age: z.number().min(18, \"You must be at least 18 years old\"),\n});\n```\n\nThis schema can be applied to your form to enforce validation rules.\n\n## API\n\n### Form Submission\n\nOnce your form is ready, you can handle submissions with a simple API call. Here’s an example of how to submit the form data:\n\n```javascript\nconst handleSubmit = async (data) => {\n  try {\n    const response = await fetch('\u002Fapi\u002Fform-submit', {\n      method: 'POST',\n      body: JSON.stringify(data),\n      headers: {\n        'Content-Type': 'application\u002Fjson',\n      },\n    });\n    const result = await response.json();\n    console.log('Form submitted successfully:', result);\n  } catch (error) {\n    console.error('Error submitting form:', error);\n  }\n};\n```\n\n## Contributing\n\nContributions are welcome! If you would like to contribute to Form Builder, please follow these steps:\n\n1. **Fork the Repository**: Click on the “Fork” button at the top right corner of the repository page.\n2. **Create a Branch**: \n   ```bash\n   git checkout -b feature\u002FYourFeatureName\n   ```\n3. **Make Changes**: Implement your feature or fix.\n4. **Commit Changes**: \n   ```bash\n   git commit -m \"Add a feature\"\n   ```\n5. **Push Changes**: \n   ```bash\n   git push origin feature\u002FYourFeatureName\n   ```\n6. **Create a Pull Request**: Go to the original repository and create a pull request.\n\n## License\n\nThis project is licensed under the MIT License.\n\n## Sponsors\n\nA huge thank you to everyone who has supported this project! Your generosity keeps this project alive and growing. I truly appreciate every single one of you.\n\n### ⭐ Header Sponsors ($100\u002Fmonth)\n\nPremium sponsors featured prominently throughout the project:\n\n\u003Cdiv align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fshadcnstudio.com\u002F?utm_source=shadcn-form&utm_medium=github&utm_campaign=sponsor\">\n    \u003Cimg src=\"https:\u002F\u002Fts-assets.b-cdn.net\u002Fss-assets\u002Flogo\u002Flogo.svg\" alt=\"shadcnstudio.com\" width=\"200\" height=\"100\" style=\"margin: 20px; border-radius: 8px;\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fdiv>\n\n**[shadcnstudio.com](https:\u002F\u002Fshadcnstudio.com\u002F?utm_source=shadcn-form&utm_medium=github&utm_campaign=sponsor)** - Explore beautiful shadcn blocks & templates to accelerate your development.\n\n### Project Supporters ($50\u002Fmonth)\n\nThese wonderful folks help drive the project forward:\n\n- Come be the first! [Become a Project Supporter](https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fhasanharman)\n\n### Community Supporters ($10\u002Fmonth)\n\nThank you for being part of this journey:\n\n- Come be the first! [Become a Community Supporter](https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fhasanharman)\n\n### Past Sponsors\n\nA heartfelt thanks to those who previously supported the project:\n\n| | | | | |\n|:---:|:---:|:---:|:---:|:---:|\n| [![tino-technology](https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F150597157?s=100&v=4)](https:\u002F\u002Fgithub.com\u002Ftino-technology) | [![feliperails](https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F1680000?s=100&v=4)](https:\u002F\u002Fgithub.com\u002Ffeliperails) | [![Radu Ciocan](https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F4984377?s=100&v=4)](https:\u002F\u002Fgithub.com\u002Fraduciocan) | [![rutsatz](https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F14064725?s=100&v=4)](https:\u002F\u002Fgithub.com\u002Frutsatz) | [![Maxim Ciebiera](https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F47557243?s=100&v=4)](https:\u002F\u002Fgithub.com\u002Fmaxciebiera) |\n| [tino-technology](https:\u002F\u002Fgithub.com\u002Ftino-technology) | [feliperails](https:\u002F\u002Fgithub.com\u002Ffeliperails) | [Radu Ciocan](https:\u002F\u002Fgithub.com\u002Fraduciocan) | [rutsatz](https:\u002F\u002Fgithub.com\u002Frutsatz) | [Maxim Ciebiera](https:\u002F\u002Fgithub.com\u002Fmaxciebiera) |\n\n---\n\n### Interested in Sponsoring?\n\nYour support helps keep this project alive and thriving! [Become a sponsor on GitHub](https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fhasanharman) and help shape the future of form building.\n\n## Acknowledgements\n\n- [React](https:\u002F\u002Freactjs.org\u002F) - A JavaScript library for building user interfaces.\n- [Next.js](https:\u002F\u002Fnextjs.org\u002F) - The React framework for production.\n- [Tailwind CSS](https:\u002F\u002Ftailwindcss.com\u002F) - A utility-first CSS framework for creating custom designs.\n- [Zod](https:\u002F\u002Fzod.dev\u002F) - TypeScript-first schema declaration and validation.\n","Form Builder 是一个动态表单构建工具，允许用户在Web应用程序中无缝创建、自定义和验证表单。该项目使用TypeScript编写，并基于React、Next.js等技术栈，提供了直观的界面供开发者和用户使用。其核心功能包括动态表单创建、实时验证（采用Zod库）、响应式设计（利用Tailwind CSS）以及可定制组件（ShadCN UI）。此外，通过Next.js支持服务器端渲染，进一步优化了性能与SEO。Form Builder适用于需要快速搭建复杂且美观表单的应用场景，如企业内部系统开发或个人项目中对用户体验有较高要求的情况。",2,"2026-06-11 03:47:31","high_star"]