Usage

To use the available components in your project, simply import (copy) the given stylesheet in your css or html file. If confused, watch the given demo video below, it covers all the required steps.

All components CSS - import url

All components CSS - HTML link tag

You can also import individual components if you require only some of the components. The links to import individual components can be found in their respective pages at the top.

Also, just to be clear, you can replace or remove any icons you don't need from the element as per your choice, just by deleting or modifying given html. Not just icons, you can modify any component by removing required html content.

If you are viewing on a laptop or big screen, you can directly copy HTML code by pressing copy button at the bottom right of code snippet. If viewing on a mobile phone, then to see the entire HTML code snippet you need to scroll rightwards, and to copy there will be a button at the top right corner.

What makes Spark UI unique?

It is a highly customizable component library. You can modify styles of the given components as per your need, no need to define classes for it. Spark UI makes it easy for you by providing CSS variables for all common properties like background-colour, colour, border-styles, border-radius, icon-size, icon-colour, hover-effect colour for buttons on few components, width control. CSS variable is even provided for outline on focus on the button or link. You can find these variables on the respective component pages.

Demonstration video of above steps -

Video coming soon ...

I will be adding a few more components later. If you have any feedback or suggestions, please let me know on any of my social handles (link top right corner).