# Fluix Tutorials
Welcome to the Fluix tutorial series! These step-by-step guides will help you master building beautiful UIs with Fluix and GPUI.
## 📚 Tutorial Series
### Beginner
1. **[Getting Started](./01-GETTING-STARTED.md)** ⭐ START HERE
- Installation and setup
- Your first Fluix app
- Understanding the basics
- Common issues and solutions
2. **[Working with Components](./02-COMPONENTS.md)**
- Button component
- Icon component (23 SVG icons)
- Select component (single/multiple)
- TextInput component
- Checkbox component
- Complete examples
3. **[Styling and Theming](./03-STYLING.md)**
- Component sizing system
- Color palette
- Spacing and layout
- Border radius
- Custom styling with GPUI
- Design patterns
### Intermediate
4. **[Icon Backgrounds](./04-ICON-BACKGROUNDS.md)** ⭐ NEW
- Square backgrounds
- Rectangular backgrounds
- Border radius and styling
- Common use cases (buttons, badges, status indicators)
- Complete examples
5. **[Select Advanced Features](./05-SELECT-ADVANCED.md)** ⭐ NEW
- Compact mode for long lists
- Dropdown alignment (left, right, center)
- Visual variants (Default, Ghost, Outline)
- Dropdown direction (up, down)
- Combining features
- Real-world examples
6. **[Event Handling](./06-EVENTS.md)** (Coming Soon)
- Component events
- Event subscription
- Custom events
- Event bubbling
7. **[Building Forms](./07-FORMS.md)** (Coming Soon)
- Form layout
- Validation
- Form state management
- Submit handling
8. **[Layout Patterns](./08-LAYOUTS.md)** (Coming Soon)
- Flexbox layouts
- Grid patterns
- Responsive design
- Common UI patterns
### Advanced
9. **[State Management](./09-STATE.md)** (Coming Soon)
- Component state
- Shared state
- Context and providers
- State patterns
10. **[Custom Components](./10-CUSTOM-COMPONENTS.md)** (Coming Soon)
- Creating custom components
- Component composition
- Reusable patterns
- Publishing components
11. **[Performance Optimization](./11-PERFORMANCE.md)** (Coming Soon)
- Rendering optimization
- Memory management
- Profiling
- Best practices
## 🎯 Learning Path
### Path 1: Quick Start (1-2 hours)
Perfect for getting up and running quickly.
1. [Getting Started](./01-GETTING-STARTED.md) (30 min)
2. [Working with Components](./02-COMPONENTS.md) (45 min)
3. Build something! (30 min)
### Path 2: Complete Beginner (6-8 hours)
Comprehensive introduction to Fluix.
1. [Getting Started](./01-GETTING-STARTED.md)
2. [Working with Components](./02-COMPONENTS.md)
3. [Styling and Theming](./03-STYLING.md)
4. [Icon Backgrounds](./04-ICON-BACKGROUNDS.md) ⭐ NEW
5. [Select Advanced Features](./05-SELECT-ADVANCED.md) ⭐ NEW
6. Build a complete app!
### Path 3: Master Fluix (10+ hours)
Deep dive into all aspects of Fluix.
Complete all tutorials + build multiple projects
## 📖 Additional Resources
### Documentation
- [Component Reference](../COMPONENT-REFERENCE.md)
- [Icon Reference](../ICON_REFERENCE.md)
- [Asset Loading Guide](../ASSET_LOADING_GUIDE.md)
- [FAQ](../FAQ.md)
### Examples
- [Button Demo](../../examples/button_demo.rs)
- [Icon Demo](../../examples/icon_demo.rs)
- [Icon Send Demo](../../examples/icon_send_demo.rs) ⭐ NEW
- [Select Demo](../../examples/select_demo.rs)
- [Select Compact Demo](../../examples/select_compact_demo.rs) ⭐ NEW
- [Select Alignment Demo](../../examples/select_alignment_demo.rs) ⭐ NEW
- [Select Variants Demo](../../examples/select_variants_demo.rs)
- [Text Input Demo](../../examples/text_input_demo.rs)
### External Resources
- [GPUI Documentation](https://www.gpui.rs/)
- [Zed Editor](https://zed.dev/) - Built with GPUI
- [Rust Book](https://doc.rust-lang.org/book/)
## 🎓 Tutorial Format
Each tutorial includes:
- ✅ Clear learning objectives
- 📝 Step-by-step instructions
- 💻 Complete code examples
- 💡 Best practices
- 🐛 Common pitfalls
- 🎯 Practice exercises
## 🤝 Contributing
Found an issue or want to improve a tutorial?
- Open an issue on [GitHub](https://github.com/lipish/fluix/issues)
- Submit a pull request
- Share your feedback
## 💬 Getting Help
- **Discord**: Join our community (coming soon)
- **GitHub Issues**: [Report bugs or ask questions](https://github.com/lipish/fluix/issues)
- **Examples**: Check the [examples directory](../../examples/)
## 🗺️ What to Learn Next?
After completing the tutorials:
1. **Build Projects**
- Todo app
- Settings panel
- Dashboard
- Form wizard
2. **Explore Examples**
- Study the example code
- Modify and experiment
- Build variations
3. **Read the Source**
- Understand component internals
- Learn advanced patterns
- Contribute improvements
4. **Join the Community**
- Share your projects
- Help others
- Contribute to Fluix
## 📊 Tutorial Progress Tracker
Track your learning progress:
- [ ] Getting Started
- [ ] Working with Components
- [ ] Styling and Theming
- [ ] Icon Backgrounds ⭐ NEW
- [ ] Select Advanced Features ⭐ NEW
- [ ] Event Handling
- [ ] Building Forms
- [ ] Layout Patterns
- [ ] State Management
- [ ] Custom Components
- [ ] Performance Optimization
## 🎉 Ready to Start?
Begin with **[Getting Started →](./01-GETTING-STARTED.md)**
Happy coding! 🚀