Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. Inspired by shadcn/ui.
About
Pixl offers a repository of reusable components that can be easily copied and pasted into your applications.
You have the flexibility to select the components you require, insert them directly into your project, and tailor them to suit your preferences—all while retaining ownership of the code.
Think of it as a toolkit for constructing your own component libraries, providing a solid foundation to build upon according to your unique specifications.
Getting started
Head over to Pixl docs and copy and paste the components you need into your project.
Alternatively, you can use the cli to generate the components.
Using the CLI
Go to the Installation page of the documentation to start using Pixl CLI
Commands
Usage: pixl <command> [arguments]
Global options:
-h, --help Print this usage information.
Available commands:
init Initialize a new project
add Add a new component
clean Clean all generated files
update Update project
Run "pixl cli help <command>" for more information about a command.
What does a Pixl workspace look like?
A default file structure looks something like this:
my_app
├── lib
│ ├── components
│ │ └── ui
│ │ ├── accordion.dart
│ │ ├── button.dart
│ │ └── ...
│ ├── styles
│ │ ├── styles.dart
│ │ ├── ui_colors.dart
│ │ └── ui_insets.dart
│ └── widgetbook (optional)
│ ├── widgetbook_app.dart
│ └── widgetbook_components.dart
├── pixels.json
└── pubspec.yaml
The location of your components can be configured via the pixl.json configuration file if the default is unsuitable.
Contributing
Contributions to Pixl are welcome! Feel free to open issues, make feature requests, or submit pull requests. Please follow the Contributing Guidelines when contributing to this project.