Fully coded UI Kit


Uilib Components is a collection of UI components based on HTML and CSS, made for any web project. Its ready-to use 200+ components let you create amazing website and landing page easily. Moreover, its variety of components helps developers integrating complex website design.

Components


Uilib adds more than 200 new components, grouped into 7 categories, on top of existing Bootstrap components.

Ready to use HTML and CSS blocks

Uilib helps you develop beautiful designed websites or landing pages easier and faster thanks to its ready to use HTML blocks and CSS classes helpers.

More than 200 different components

Cards, buttons, page headers, navigation bars, inputs … 200 is just the number of provided samples, it’s actually unlimited, thanks to additional CSS helper classes which let you have unlimited options.

Reduce the time spent on coding

Reduce your CSS coding. Choose among the 40+ ready-made buttons or the 200+ available components.

HTML Sample buttons
<a class="btn btn-solid-f btn-blue color-invert" href="#">
    <span class="text">Super Button</span>
</a>
<a class="btn btn-outline-e btn-black" href="#">
    <span class="text">Another Button</span>
</a>

Utility and helper classes

Want to change background, border, spacings or typography? Uilib brings utility and helper classes to help you modifying or building beautiful components and pages without additional CSS coding.

HTML Uilib utility classes
<div class="text-left bd-left bd-width-4 bd-blue bd-rounded-1 bg-blue-0 shadow-6 px-3 py-3 pos-rel">
    <h5 class="fs-1 mb-0 text-blue mb-1">Alert! Please, read me</h5>
    <p class="mb-0 text-blue-7 fs-1">This alert is made out of Uilib's helper classes</p>
    <div class="btns pos-abs top-2 right-2">
        <a class="btn btn-icon-d fit btn-white bg-blue bd-rounded-8 h-1p5rem w-1p5rem" href="#">
            <i class="icon ion ion-close fs-1"></i>
        </a>
    </div>
</div>
Alert! Please, read me

This alert is made out of Uilib’s helper classes

HTML blocks

Uilib blocks use HTML, they are compatible with any web-based projects or any web technologies you know.

SASS Customization

Customize the color scheme, edit components CSS rules, compile only components that you need.

Extends Bootstrap 4

Customize the color scheme, edit components CSS rules, compile only components that you need.

category

All Products

Discover all available products.

Stay tunned

Subscribe to our newsletter and receive freebies, tutorials, news and many more right in your inbox.