https://github.com/pinak3748/fluttercn
A component library for Flutter that gives you full ownership. Install components via CLI, customize the source code, and build beautiful apps faster. No dependencies, no black boxes—just clean, reusable Flutter widgets you control.
https://github.com/pinak3748/fluttercn
dart flutter flutter-cn flutter-components flutter-design flutter-ui mobile-ui ui-components
Last synced: 4 months ago
JSON representation
A component library for Flutter that gives you full ownership. Install components via CLI, customize the source code, and build beautiful apps faster. No dependencies, no black boxes—just clean, reusable Flutter widgets you control.
- Host: GitHub
- URL: https://github.com/pinak3748/fluttercn
- Owner: pinak3748
- License: mit
- Created: 2025-09-17T19:26:07.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-01-02T07:39:25.000Z (4 months ago)
- Last Synced: 2026-01-08T03:43:19.749Z (4 months ago)
- Topics: dart, flutter, flutter-cn, flutter-components, flutter-design, flutter-ui, mobile-ui, ui-components
- Language: Dart
- Homepage: https://fluttercn.site
- Size: 3.84 MB
- Stars: 17
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# fluttercn
**Build beautiful Flutter apps with copy-paste components**
fluttercn is a collection of beautifully designed, accessible Flutter components that you can copy and paste directly into your apps. Think of it as your component library—built with Flutter, for Flutter developers.
[](https://opensource.org/licenses/BSD-3-Clause)
[](https://pub.dev/packages/fluttercn)
[](https://dart.dev)
## ✨ Features
- 🎨 **Beautiful Components** - Carefully crafted UI components following Flutter design principles
- 📦 **Copy-Paste Philosophy** - Components are copied directly into your project, giving you complete ownership
- 🎯 **Zero Dependencies** - No external packages required, just Flutter
- 🚀 **Easy to Use** - Simple CLI tool to add components to your project
- 🎨 **Fully Customizable** - Modify, extend, or customize components however you need
- ♿ **Accessible** - Built with accessibility in mind
## 🚀 Quick Start
### Installation
Install the fluttercn CLI globally using Dart's pub:
```bash
dart pub global activate fluttercn
```
**Important:** Make sure `~/.pub-cache/bin` is in your PATH:
```bash
export PATH="$PATH":"$HOME/.pub-cache/bin"
```
To make this permanent, add the above line to your shell profile (`~/.zshrc`, `~/.bashrc`, etc.).
### Usage
1. **Initialize fluttercn in your Flutter project:**
```bash
cd your-flutter-project
fluttercn init
```
2. **List available components:**
```bash
fluttercn list
```
3. **Add a component:**
```bash
fluttercn add button
fluttercn add card
```
That's it! Components are copied to `lib/widgets/common/` in your project.
## 📚 Documentation
Visit our [documentation website](https://fluttercn.site) for:
- Complete component reference
- Usage examples
- Theming guide
- Best practices
## 🏗️ Project Structure
This repository contains three main parts:
- **`dart-cli/`** - The fluttercn CLI tool (Dart package)
- **`playground/`** - Flutter app for developing and testing components
- **`www/`** - Documentation website (Next.js)
## 📦 Available Components
- **Card** - Flexible card component with header, content, and footer
- **Button** - Customizable button with multiple variants and sizes
- **Avatar** - Versatile avatar with network, asset, and initials fallback
- **Badge** - Badge, count badge, and status badge primitives
- **Checkbox** - Animated checkbox with tristate support
More components are coming soon! Check the [documentation](https://fluttercn.site/docs/components) for the complete list.
## 🤝 Contributing
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
### Quick Contribution Guide
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-component`)
3. Develop your component in the `playground/` directory
4. Test thoroughly
5. Submit a pull request
For detailed instructions, see [CONTRIBUTING.md](CONTRIBUTING.md).
## 📝 License
This project is licensed under the BSD-3-Clause License - see the [LICENSE](LICENSE) file for details.
## 🙏 Acknowledgments
Inspired by [shadcn/ui](https://ui.shadcn.com) and its philosophy of production ready components.
## 📞 Support
- 📖 [Documentation](https://fluttercn.site)
- 🐛 [Report Issues](https://github.com/pinak3748/fluttercn/issues)
- 💬 [Discussions](https://github.com/pinak3748/fluttercn/discussions)
---
Made with ❤️ for the Flutter community