https://github.com/nobruf/shadcn-next-workflows
Interactive workflow builder using React Flows, Next.js, and Shadcnui. Create, connect, and validate custom nodes easily.
https://github.com/nobruf/shadcn-next-workflows
Last synced: 5 days ago
JSON representation
Interactive workflow builder using React Flows, Next.js, and Shadcnui. Create, connect, and validate custom nodes easily.
- Host: GitHub
- URL: https://github.com/nobruf/shadcn-next-workflows
- Owner: nobruf
- License: mit
- Created: 2024-10-09T20:40:39.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-01-16T13:59:45.000Z (3 months ago)
- Last Synced: 2025-04-02T23:33:02.535Z (12 days ago)
- Language: TypeScript
- Homepage: https://shadcn-next-workflows.vercel.app
- Size: 979 KB
- Stars: 143
- Watchers: 3
- Forks: 20
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-shadcn-ui - shadcn-next-workflows - Interactive workflow builder using React Flows, Next.js, and Shadcnui. Create, connect, and validate custom nodes easily. (Boilerplates / Templates / Portfolios)
- awesome-shadcn-ui - shadcn-next-workflows - Interactive workflow builder using React Flows, Next.js, and Shadcnui. Create, connect, and validate custom nodes easily. (Boilerplates / Templates / Portfolios)
- awesome-shadcn-ui - Link - 10-29 | (Boilerplates / Templates)
- awesome_ai_agents - Shadcn-Next-Workflows - Interactive workflow builder using React Flows, Next.js, and Shadcnui. Create, connect, and validate custom nodes easily. (Building / Workflows)
README
# Workflow Example with React Flows, Next.js & Shadcn
This is a sample project that demonstrates how to build and visualize interactive workflows using React Flows, Next.js, and Shadcnui. The project includes validation for incomplete flows and provides modular components for easy future node creation.
## Screenshots
## ✨ Features
- **Predefined Nodes**:
- `Start`: The starting point of the workflow.
- `Menu`: A node for selecting options.
- `Text Message`: Displays a text message.
- `Tags`: Node to assign specific tags.
- `End`: The endpoint of the workflow.
- **Flow Validation**: The system automatically checks if all nodes are properly connected. Incomplete workflows cannot be completed.
- **Modular Components**: Easy-to-use components to add new nodes in the future, ensuring scalability.
## 🚀 Getting Started
Follow these steps to run the project locally.
### Prerequisites
Make sure you have the following installed:
- Node.js (v14.x or higher)
- npm (v6.x or higher)
### Installation
- **Clone the repository**:
```bash
git clone https://github.com/nobruf/shadcn-next-workflows.git``
- **Install dependencies**:
```bash
npm install
- **Run the development server**:
```bash
npm run dev
Open http://localhost:3000 in your browser to view the application.
## 🛠️ How to Use
- **Creating Workflows**: Start by adding nodes (`Start`, `Menu`, `Text Message`, `Tags`, `End`) to the canvas.
- **Connecting Nodes**: Drag and drop connections between the nodes to build your flow.
- **Validation**: Ensure all nodes are connected properly. The system will prevent incomplete flows from being finished.
## 🔮 Future Enhancements
- Easy node creation using modular components.
- Custom nodes can be added by following the component structure provided.
## 🤝 Contributing
Contributions are welcome! Feel free to fork the repository and submit pull requests.
- Fork the Project.
- Create your Feature Branch (`git checkout -b feature/AmazingFeature`).
- Commit your Changes (`git commit -m 'Add some AmazingFeature'`).
- Push to the Branch (`git push origin feature/AmazingFeature`).
- Open a Pull Request.
## 📝 License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.