{"id":30012701,"url":"https://github.com/ahmadrafidev/boop","last_synced_at":"2026-05-01T18:32:25.241Z","repository":{"id":301497626,"uuid":"1008457688","full_name":"ahmadrafidev/boop","owner":"ahmadrafidev","description":"An user interface playground","archived":false,"fork":false,"pushed_at":"2025-07-09T15:15:42.000Z","size":420,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-05T14:27:02.326Z","etag":null,"topics":["design-tools","nextjs","playground","react","vercel"],"latest_commit_sha":null,"homepage":"https://booopy.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ahmadrafidev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-25T15:15:12.000Z","updated_at":"2025-07-09T15:15:46.000Z","dependencies_parsed_at":"2025-06-27T07:25:56.625Z","dependency_job_id":"4d64b27d-adb7-4cad-a1dd-f7d270719bb6","html_url":"https://github.com/ahmadrafidev/boop","commit_stats":null,"previous_names":["ahmadrafidev/boop"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ahmadrafidev/boop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadrafidev%2Fboop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadrafidev%2Fboop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadrafidev%2Fboop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadrafidev%2Fboop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahmadrafidev","download_url":"https://codeload.github.com/ahmadrafidev/boop/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadrafidev%2Fboop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32508901,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design-tools","nextjs","playground","react","vercel"],"created_at":"2025-08-05T14:18:27.465Z","updated_at":"2026-05-01T18:32:25.232Z","avatar_url":"https://github.com/ahmadrafidev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"public/images/logo.png\" alt=\"Boop Logo\" width=\"120\" height=\"120\"\u003e\n  \n  # Boop - UI Component Playground\n  \n  **Touch, tweak, and perfect your UI components**\n  \n  \u003e ⚠️ **Work in Progress** ⚠️\n  \n  [Live Demo](https://booopy.vercel.app/) • [Web UI Playbook](https://www.webuiplaybook.com/) • [Report Bug](https://github.com/ahmadrafidev/boop/issues)\n\u003c/div\u003e\n\n## 🎯 What is Boop?\n\nBoop 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.\n\n## 🔬 Purpose\n\nBoop serves as:\n- **🧪 Testing Ground** - Experiment with component variations and edge cases\n- **🎨 Design Lab** - Prototype new component ideas and interactions  \n- **⚡ Quick Iteration** - Rapidly test component behavior and styling\n- **🔧 Development Sandbox** - Try out new libraries, patterns, and approaches\n- **📊 Component Research** - Validate design decisions before implementing in Web UI Playbook\n\n## ✨ Features\n\n- **🎪 Visual Canvas** - Drag, drop, and arrange components effortlessly\n- **⚡ Live Editing** - Tweak properties and see changes instantly\n- **📝 Code Generation** - Get clean JSX code for your experiments\n- **📱 Responsive Testing** - Test components across different screen sizes\n- **🧩 Component Library** - Access to buttons, forms, modals, and more\n- **🎛️ Property Controls** - Fine-tune component props in real-time\n\n## 🚀 Quick Start\n\n```bash\n# Clone and install\ngit clone https://github.com/ahmadrafidev/boop.git\ncd boop\npnpm install\n\n# Start experimenting\npnpm dev\n```\n\nOpen [localhost:3000](http://localhost:3000) and start prototyping! 🎉\n\n## 🎮 How to Use\n\n1. **Pick a component** from the component library\n2. **Drop it** onto the canvas\n3. **Select and experiment** with its properties\n4. **Test interactions** and responsive behavior\n5. **Export the code** when you've perfected your design\n\n## 🧩 Available Components\n\n*Components available for experimentation (sourced from Web UI Playbook):*\n\n### Form Elements\n- **Button** - Various styles, sizes, and states\n- **Input** - Text inputs with validation states\n- **Checkbox** - Selection controls with custom styling\n- **Switch** - Toggle controls and switches\n- **Slider** - Range inputs and value controls\n\n### Display \u0026 Feedback\n- **Alert** - Success, warning, error, and info alerts\n- **Modal** - Dialog boxes and overlay windows\n- **Tooltip** - Contextual information displays\n- **Progress** - Loading indicators and progress bars\n\n### Navigation\n- **Menu** - Dropdown menus and navigation\n- **Tabs** - Tab navigation and content panels\n\n### Layout\n- **Card** - Content containers and layouts\n- **Separator** - Visual dividers and spacing\n\n## 🔗 Related Projects\n\n- **[Web UI Playbook](https://github.com/ahmadrafidev/web-ui-playbook)** - The main component documentation and guide\n- **[Web UI Playbook Website](https://www.webuiplaybook.com/)** - Interactive component library and documentation\n\n## 🤝 Contributing\n\nFound something interesting? Want to add a new component experiment?\n\n```bash\n# Fork the repo, then:\ngit checkout -b experiment/awesome-component\ngit commit -m 'Add awesome component experiment'\ngit push origin experiment/awesome-component\n```\n\n**Ways to contribute:**\n- 🧪 Add new component experiments\n- 🐛 Report bugs or issues\n- 💡 Suggest new features or interactions\n- 📚 Improve documentation\n- 🎨 Enhance the playground interface\n\n## 📄 License\n\nMIT License - feel free to experiment and build upon this project!\n\n---\n\nBuilt with ❤️ by [Rafi](https://x.com/rafiwiranaa)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmadrafidev%2Fboop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahmadrafidev%2Fboop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmadrafidev%2Fboop/lists"}