LangUI to Shuffle.dev Converter

A simple converter that transforms LangUI Tailwind components into Shuffle.dev compatible format. This tool demonstrates the critical discovery that all components must be wrapped in a single root element for Shuffle.dev compatibility.

🎯 Purpose

This converter allows you to import the excellent LangUI component library into Shuffle.dev, making 100+ beautifully designed Tailwind components available for your projects.

🔑 Key Discovery

The Wrapper Solution: Shuffle.dev requires exactly one root element per component. Instead of complex detection logic, we simply wrap EVERY component in a container div. This guarantees 100% compatibility.

<!-- Original component (might have multiple roots) -->
<div class="alert">...</div>
<div class="alert">...</div>

<!-- After wrapping (guaranteed single root) -->
<div class="langui-component-wrapper">
  <div class="alert">...</div>
  <div class="alert">...</div>
</div>

📋 Requirements

• Python 3.6+
• Git
• No additional Python packages required (uses only standard library)

🚀 Quick Start

1. Clone this repository

git clone https://github.com/yourusername/langui-shuffle-converter.git
cd langui-shuffle-converter

2. Run the converter

# Convert all LangUI components
python converter.py

# Convert specific categories
python converter.py --categories buttons cards alerts

# List available categories
python converter.py --list

3. Upload to Shuffle.dev

1. The converter creates an output/ directory with:
   • shuffle.config.json - Component configuration
   • components/ - All wrapped components
2. ZIP the contents of the output/ directory
3. Upload via Shuffle.dev's Custom Components section

📁 Project Structure

langui-shuffle-converter/
├── converter.py      # LangUI-specific converter
├── template.py       # Generic template for other libraries
├── example_usage.sh  # Example bash script
├── README.md         # This file
└── WARP.md          # Technical documentation for AI agents

🛠️ Adapting for Other Libraries

Use template.py as a starting point for converting other Tailwind component libraries:

1. Copy template.py to a new file
2. Update the configuration section:

   LIBRARY_PREFIX = "YourLibrary"
   GITHUB_URL = "https://github.com/YourOrg/YourRepo.git"
   COMPONENT_CATEGORIES = {
       'buttons': 'path/to/buttons',
       'cards': 'path/to/cards',
   }

3. Run your converter
4. Upload to Shuffle.dev

📚 Available LangUI Categories

• alerts
• badges
• buttons
• cards
• copy
• pricing
• prompt-containers
• prompt-history-panels
• prompt-inputs
• prompt-message-inputs
• prompt-messages
• prompt-suggestions
• prompts-cards
• sidebars
• toggles

🎨 Component Naming Convention

Components are named with clear prefixes for easy identification:

• LangUI - Buttons 1

• LangUI - Cards 2 (Dark)

• LangUI - Sidebars 3

  

⚠️ Important Notes

1. shuffle.config.json: The config file MUST be named exactly this (not config.json)
2. Single Root Rule: Every component must have exactly one root element
3. Wrapper Strategy: We wrap everything - don't try to detect, just wrap!
4. Snapshot Approach: This converter works with the current version of LangUI. For future updates, re-run the converter.

🤝 Contributing

This is a simple, snapshot-in-time converter. Feel free to:

• Fork and adapt for your needs
• Add more sophisticated features
• Create converters for other component libraries
• Share your improvements with the community

📄 License

MIT License - Feel free to use this code for any purpose.

🙏 Credits

• LangUI - Beautiful Tailwind components
• Shuffle.dev - Visual site builder
• Created with assistance from AI to solve the single-root-element challenge

💡 Philosophy

"When in doubt, wrap it out!"

This converter follows the principle of simplicity. Rather than complex detection logic that might fail, we guarantee success by wrapping everything. It's a small trade-off for 100% reliability.

---

Status: ✅ Successfully converts 112 LangUI components across 15 categories

Last Updated: August 2024