Introduction to Polish

Get started with Polish, a fully responsive component library for building your next project.

Polish UI is a collection of pre-built, fully responsive Components you can drop into your Front End projects. Get started by checking out our components, or browsing the categories you're most curious about.

Get Started

To quickly add polish ui into your project, add the below line into your HTML boilerplate code.

And Voila! now you have the power of Polish UI in your project.

Avatar

Avatars are found throughout in all the applications with uses in everything from tables to dialog menus.

Avatar Fallback

Alert

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task. Alerts are used to communicate a state that affects a system, feature or page.

Badge

A Badge is used for quick recognition of an element. Badges can be used on any element like icons, card,etc.,

Button

A Button is one of the essential element of a HTML document. It can be used for different purposes like form submission, order placing, checkout, etc.,

Card

A card is a collection of html elements which collectively describes the item description along with other data in a visually suitable mode.

Images

An Image Component is a simple component which is used to display images.

Input

The Input component is a component that is used to get user input in a text field.

List

List component is used to display list items. It renders a <ul> element by default.

Navigation

A navigation component is used for redirecting the page from the current page. We can achieve this by using a <a> tag with a href attribute inside it.

Modal

A modal or a dialog is a window overlaid on either the primary window or another dialog window. Content behind a modal dialog is inert, meaning that users cannot interact with it.

Show Modal

Rating

A rating component displays the product rating on the page. It helps the user to make the decision whether to chose this product or not.

Grid

Grid layout is used to create complex layouts easily with comparatively less number of code.

Text Utilities

This sections contains different variants of text sizes.

This is h1 text

This is h2 text

Paragraph with a font size of 16px

Paragraph with a font size of 18px

Paragraph with a font size of 20px

This is a grayed out text

This is a center aligned text

Toast

Toast components are used to show acknowledgement to the users.