The new Webpixels website is finally coming out, after 4 months of continuous development. This update is focused on how the component library works. The goal is to make it much more easier to navigate through examples so here are some of the new stuff you can try starting today:
π€© New components explorer
Instead of having categories and click each one of them, now youβll be able to see them all in one place and filter out the ones you need. Also, there will be a search bar to easily get the result you want.

Preview components in a new sexy modal
Once you find the component you need, click on it to preview the UI, but also the code. Now you will be able to tweak it and see the changes before copying it into your project.

Live code editing
Once you find the component you need, click on it to preview the UI, but also the code. Now you will be able to tweak it and see the changes before copying it into your project.

Organize components into collections
Since our components are part of an ever-growing library, collections will allow you to create smaller batches of elements based on the category or the projectβs type.

Added a new tab for listing templates
Instead of mixing components and templates in one place, we thought it would be much better to separate them in two separate sections. This way you can work closer to Atomic Principles.
See it live
Improved documentation
We still have many things to add to our docs, but we are pretty happy with the result, so far. We'll keep ading more examples and features, now that Bootstrap started its big move with the v5.2 update. Here are some things you should expect in the near future:
- Component CSS variables
- New helpers and utilities
- Groups of variables for root, components and utilities
- Improved theming capabilities
- Dark mode support out of the box
We expect to release the next major update for @webpixels/css in one month from now.
Ready to get started with Webpixels? Checkout the new Start page our new website to work in your next project!