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.

✨ 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:

dart pub global activate fluttercn

Important: Make sure ~/.pub-cache/bin is in your PATH:

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:

cd your-flutter-project
fluttercn init

2. List available components:

fluttercn list

3. Add a component:

fluttercn add button
fluttercn add card

That's it! Components are copied to lib/widgets/common/ in your project.

📚 Documentation

Visit our documentation website 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 for the complete list.

🤝 Contributing

We welcome contributions! Please see our Contributing Guide 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.

📝 License

This project is licensed under the BSD-3-Clause License - see the LICENSE file for details.

🙏 Acknowledgments

Inspired by shadcn/ui and its philosophy of production ready components.

📞 Support

• 📖 Documentation
• 🐛 Report Issues
• 💬 Discussions

---

Made with ❤️ for the Flutter community