Your new CSS tool

Design System for Bootstrap 5

The perfect foundation for your design system that includes a comprehensive styleguide, new components, and an entire set of utility classes to extend the default look and feel of your website.

$ npm install @webpixels/css

Atomic

Everything is built around the atomic design principles.

Themeable

Customize, and extend the design system with Sass, a boatload of global options, and more.

Component-centric Sass

Build production-ready pages by using pre-made and customizable UI components and pages.

Utilities

Use them into your HTML markup to cutomize the default look and feel of your components.

Easy to install

Make your own prototyping sandbox with our ready-to-use starter template for new npm projects or learn how to integrate this CSS framework with your favorite tools.

Install now ->
$ npm install @webpixels/css
# Everything in installed

$ npm run watch
# SCSS watching
# LiveReload started
# Opening localhost:3000

$ build something great
# That's it! when you're done run the command below:

$ npm run production
# Your CSS and JS were compiled and minified

Extended utility classes

Utilities are great when used in combination with the existing UI components. You start from a strong foundation and built on top of that by extending components directly in your markup. This is a great approach that promotes re-usability and consistency.

See utilities ->
Utility classes

Ready-to-use components

All the UI components are meant to solve common design problems. We used all the prebuilt components in Bootstrap and took them to the next level of usability and customizability.

Browse components ->
UI components

1400+ icons included

Free, high quality, open source icon library with over 1,300 icons. Include them anyway you like — SVGs, SVG sprite, or web fonts. Use them with or without Bootstrap in any project.

Browse icons ->
1400+ Bootstrap icons

Figma assets for designers

The powerful design system for Figma based on our UI library will help you design production-ready pages by using pre-made styles, UI components and pages.

See the Preview ->
Webpixels Figma Design System
Roadmap

What is next?

The second batch of UI components and pages is already under development. In parallel, we are working on a system that will allow us to generate React and Vue components based on the HTML versions automatically.

We have plenty of new ideas. Here are some of the important stuff we will release in the near future.

1.

Release the second batch of components

2.

Include landing, inner, contact, and pricing pages

2.

Include more dashboard and app page examples

3.

Include e-commerce components

4.

Add dark mode support

5.

Add React and Vue support to all UI components

6.

Release the third batch of UI components

Support

Still haven't found what you're looking for?

Check out our Docs and Support first, then if you still can't find it drop us an email.