The Coconut Design System is a modern, reusable UI component library for Flutter, developed by Nonce Lab. It provides a consistent, customizable, and theme-aware UI for building high-quality mobile applications.
- Reusable UI Components – Buttons, Tooltips, Toasts, Bottom Sheets, etc.
- Theme-Aware – Supports light & dark mode.
- Highly Customizable – Easily change colors, fonts, sizes, etc.
- Performance Optimized – Built with Flutter best practices.
- MIT Licensed – Open-source, with Commons Clause.
To use Coconut Design System in your Flutter project, add it as a dependency:
flutter pub add coconut_design_systemOr manually add it in your pubspec.yaml:
dependencies:
coconut_design_system: latest_version
import 'package:coconut_design_system/coconut_design_system.dart';
CoconutButton(
text: "Click Me",
onPressed: () {
print("Button Clicked!");
},
);
CoconutToast.showToast(
context: context,
text: "This is a toast message!",
);
showModalBottomSheet(
context: context,
builder: (context) => CoconutBottomSheet(
appBar: AppBar(title: Text("Title")),
body: Text("This is a bottom sheet."),
),
);
The Coconut Design System supports light and dark mode, and allows you to customize: • Colors • Typography • Shapes & Borders • Icons & Sizes
Example:
CoconutButton(
text: "Custom Button",
backgroundColor: Colors.purple,
textColor: Colors.white,
);
| Component | Description |
|---|---|
| ✅ Buttons | Standard, Segmented, Underlined Buttons |
| 🔔 Toasts | Top & Bottom Toast Notifications |
| 📥 Bottom Sheets | Modal & Fixed Bottom Sheets |
| 📌 Tooltips | Fixed & Floating Tooltips |
| 📂 Pulldowns | Custom Dropdown Menus |
| 🔄 Indicators | Circular & Progress Indicators |
| 🔳 Inputs | Checkbox, Chip, Pulldown, Stepper, Switch, TagChip, TextField |
| 📏 Overlays | Popup, Pulldown Menu, Toast, Bubble Clipper |
| 🎨 Theme | Color Scheme, Typography, Data |
| 📑 App Bar | Customizable App Bar & Buttons |
| 🖼 Icons | Custom Icon Components |
This project is licensed under the MIT License with Commons Clause.
We welcome contributions! If you’d like to improve the Coconut Design System, follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b new-feature) - Commit your changes (
git commit -m "Add new feature") - Push to the branch (
git push origin new-feature) - Submit a Pull Request! 🚀
For issues, feature requests, or feedback, feel free to:
- Open an issue on GitHub
- Contact us at [email protected]
If you like this project, please star the repo and follow us for updates! 🚀✨