Unping UI

Desktop & Web first flutter components to build your component library with. Customizable, extendable, tested.

Design Resources 🎨

Check out our complete design system and component library in Figma:

Installation 💻

❗ In order to start using Unping Ui you must have the Flutter SDK installed on your machine.

Prerequisites

Before you can use Unping UI components in your project, you need to install and set up fpx (Flutter Paste X):

1. Install fpx globally:

   dart pub global activate fpx

2. Add the unping-ui repository to fpx:

   fpx repository add https://github.com/unping/unping-ui

3. Use fpx to paste components from unping-ui into your project:

   fpx add <component_name>

That's it! You're now ready to use Unping UI components in your Flutter project. 🎉

Usage 🚀

Once installed, you can browse and add any component from the unping-ui library:

# List all available components
fpx list

# Add a specific component to your project
fpx add button
fpx add card
fpx add input_field

Develop new widgets

For adding new widgets, place them in lib/ folder. And don't forget to add them to th widgetbook app. Add a wrapper in widgetbook/lib for your new widget. After adding a widget, don't forget to trigger the code generation for widgetbook:

cd widgetbook && dart run build_runner build -d

To see Widgetbook in action:

cd widgetbook && flutter run

The components will be copied directly into your project, ready to use and customize!

Contributing 🤝

We welcome contributions! Please see our Contributing Guidelines for details on how to submit pull requests, report issues, and contribute to the project.