pixl

Description:

pixl

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. Inspired by shadcn/ui.


Documentation


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.

copied to clipboard
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
copied to clipboard
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.