https://github.com/ahmadrafidev/boop
An user interface playground
https://github.com/ahmadrafidev/boop
design-tools nextjs playground react vercel
Last synced: about 2 months ago
JSON representation
An user interface playground
- Host: GitHub
- URL: https://github.com/ahmadrafidev/boop
- Owner: ahmadrafidev
- License: mit
- Created: 2025-06-25T15:15:12.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-09T15:15:42.000Z (12 months ago)
- Last Synced: 2025-08-05T14:27:02.326Z (11 months ago)
- Topics: design-tools, nextjs, playground, react, vercel
- Language: TypeScript
- Homepage: https://booopy.vercel.app
- Size: 410 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Boop - UI Component Playground
**Touch, tweak, and perfect your UI components**
> ⚠️ **Work in Progress** ⚠️
[Live Demo](https://booopy.vercel.app/) • [Web UI Playbook](https://www.webuiplaybook.com/) • [Report Bug](https://github.com/ahmadrafidev/boop/issues)
## 🎯 What is Boop?
Boop is an experimental playground for testing and prototyping UI components from the [Web UI Playbook](https://github.com/ahmadrafidev/web-ui-playbook) project. Design, configure, and prototype your components with an intuitive drag-and-drop interface, real-time property editing, and instant code generation.
## 🔬 Purpose
Boop serves as:
- **🧪 Testing Ground** - Experiment with component variations and edge cases
- **🎨 Design Lab** - Prototype new component ideas and interactions
- **⚡ Quick Iteration** - Rapidly test component behavior and styling
- **🔧 Development Sandbox** - Try out new libraries, patterns, and approaches
- **📊 Component Research** - Validate design decisions before implementing in Web UI Playbook
## ✨ Features
- **🎪 Visual Canvas** - Drag, drop, and arrange components effortlessly
- **⚡ Live Editing** - Tweak properties and see changes instantly
- **📝 Code Generation** - Get clean JSX code for your experiments
- **📱 Responsive Testing** - Test components across different screen sizes
- **🧩 Component Library** - Access to buttons, forms, modals, and more
- **🎛️ Property Controls** - Fine-tune component props in real-time
## 🚀 Quick Start
```bash
# Clone and install
git clone https://github.com/ahmadrafidev/boop.git
cd boop
pnpm install
# Start experimenting
pnpm dev
```
Open [localhost:3000](http://localhost:3000) and start prototyping! 🎉
## 🎮 How to Use
1. **Pick a component** from the component library
2. **Drop it** onto the canvas
3. **Select and experiment** with its properties
4. **Test interactions** and responsive behavior
5. **Export the code** when you've perfected your design
## 🧩 Available Components
*Components available for experimentation (sourced from Web UI Playbook):*
### Form Elements
- **Button** - Various styles, sizes, and states
- **Input** - Text inputs with validation states
- **Checkbox** - Selection controls with custom styling
- **Switch** - Toggle controls and switches
- **Slider** - Range inputs and value controls
### Display & Feedback
- **Alert** - Success, warning, error, and info alerts
- **Modal** - Dialog boxes and overlay windows
- **Tooltip** - Contextual information displays
- **Progress** - Loading indicators and progress bars
### Navigation
- **Menu** - Dropdown menus and navigation
- **Tabs** - Tab navigation and content panels
### Layout
- **Card** - Content containers and layouts
- **Separator** - Visual dividers and spacing
## 🔗 Related Projects
- **[Web UI Playbook](https://github.com/ahmadrafidev/web-ui-playbook)** - The main component documentation and guide
- **[Web UI Playbook Website](https://www.webuiplaybook.com/)** - Interactive component library and documentation
## 🤝 Contributing
Found something interesting? Want to add a new component experiment?
```bash
# Fork the repo, then:
git checkout -b experiment/awesome-component
git commit -m 'Add awesome component experiment'
git push origin experiment/awesome-component
```
**Ways to contribute:**
- 🧪 Add new component experiments
- 🐛 Report bugs or issues
- 💡 Suggest new features or interactions
- 📚 Improve documentation
- 🎨 Enhance the playground interface
## 📄 License
MIT License - feel free to experiment and build upon this project!
---
Built with ❤️ by [Rafi](https://x.com/rafiwiranaa)