Installation

You can import the Shade UI component library in 2 ways.

Link in HTML

Include the below link the head section of your HTML file.

Import in CSS

Include the below link in your main css file.

Import the JavaScript

Include the required javascript in the end of the body section of your HTML file.

Alerts

Alerts are the simple message indicating that an event has occurred, or they can be detailed with contextual information that describes why the event happened or provide options for responding to the exception.

Solid Alerts

Outline Alerts

Avatars

An avatar is an image or a graphic associated with your username. Avatars are also used on social media profiles like Facebook, Twitter and Instagram. Avatars are great for differentiating yourself from everyone else.

Buttons

Buttons are a simple element of interactive design, used everyday by people browsing the web. They are do a given action once the user interacts with them.

Solid buttons

Outline Buttons

Buttons with icons

Cards

A card is container for a few short, related pieces of information. It roughly resembles a playing card in size and shape, and is intended as a linked, short representation of a conceptual unit.

Normal Card

Horizontal Card

This is card title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam debitis aspernatur est exercitationem fugit delectus voluptas dolorum ipsam vero dolore non eos eveniet rerum

Read more

Vertical Card

This is card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus accusantium et illum eum optio quae?

Read more

Testimonial Card

John Doe

Project Manager

Lorem ipsum dolor sit amet consectetur adipisicing elit. At possimus, necessitatibus maiores dicta quasi, quou liquid nost

Image

Images component helps you to display an image on to the screen.

Rounded Image

Square Image

Input

Input component helps to take information and later these information can be used in further operations.

Text Input

Email Input

Password Input

Number Input

Checkbox Input

Radio Input

Slider Input

Dropdown

A dropdown helps to select the values from the series of different options.

DropDown on Click

DropDown on Hover

Colors

Color paletes helps to make the webpages colorful and visually pleasing to the eyes.

Base

Blue

Green

Red

Pink

Gray

Yellow

Orange

Background Color on Hover

Utilities to add background color to the element on hover. Use the class hover-bg-{color}-{shade}

Background Color

Utilities to add background color to the element. Use the class bg-{color}-{shade}

Text Color

Utilities to add text color to the element. Use the class text-{color}-{shade}

Typography

Typography component helps to arrange the texts in legible, readable and appealing when displayed.

Font Size

Text Alignment