pixl 1.0.0-alpha 
pixl: ^1.0.0-alpha copied to clipboard
konstant.isA cli for Pixl.
Pixl #
Pixl is a component generator package that simplifies the creation of UI components, allowing for more efficient Flutter app development.
Pixl draws significant inspiration from shadcn/ui, leveraging its design principles and component structures. Our aim is to offer a collection of components that deviate from the conventional Material Design styles, providing developers with a fresh perspective on UI design and development.
Like Shadcn UI, Pixl is not your typical component library. We've adopted the philosophy that it's more than just a set of pre-packaged components—it's a resource for developers seeking to explore alternative UI paradigms and craft distinctive user experiences.
By providing raw component code that can be copied and pasted directly into projects, Pixl gives developers full ownership and control over their UI implementations. This enables extensive customization and adaptation to specific design goals without being tied down by predefined styles or limitations.
In essence, Pixl is a tribute to the innovative spirit of Shadcn UI, offering developers the tools and inspiration they need to craft UI experiences that stand out from the crowd. Whether you're looking to break away from Material Design norms or seeking a fresh perspective on UI development, Pixl is here to support your creative journey.
Table of Contents #
Getting started #
Install #
Start by adding pixl as a dev dependency in your project
dart pub add pixl --dev
Initialize #
Run the following command to initialize pixl
dart run pixl init
When you run the init command, you will be asked a few questions to configure pixl.json:
Where do you like to generate your components?? › lib
Which color would you like to use as base color? › Slate
Define a base inset for spacing? › 8.0
Would you like to use widgetbook?? › no / yes
Write configuration to "pixl.json". Proceed? › no / yes
This will generate a pixl.json file in at the root of your project and styles folder based on your configuration
Adding Components #
Add a component by running the following command:
dart pub run pixl add
You will be prompted to select the desired component which will be generated in the directory components/ui, and install nesessary dependencies
Available Components
- ✅ accordion
- ✅ alert
- ✅ alert-dialog
- ❌ aspect-ratio
- ✅ avatar
- ✅ badge
- ✅ button
- ❌ calendar
- ❌ card
- ✅ checkbox
- ❌ collapsible
- ❌ combobox
- ❌ command
- ❌ context menu
- ❌ data-table
- ❌ date-picker
- ✅ dialog
- ❌ dropdown-menu
- ❌ form
- ❌ hover-card
- ✅ input
- ❌ label
- ❌ menubar
- ❌ navigation-menu
- ❌ popover
- ❌ progress
- ✅ radio-group
- ❌ scroll-area
- ❌ select
- ✅ seperator
- ❌ sheet
- ✅ skeleton
- ❌ slider
- ✅ switch
- ❌ table
- ✅ tabs
- ❌ textarea
- ❌ toast
- ✅ toggle
- ❌ tooltip
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.
unknown (
