Tarang UI

Its a pure CSS component library, using which you can create clean and reusable components on the go. All you need to do is import the CSS file through the link provided below, and give appropiate class names to your HTML elements, as specified in the documentation website and voila! your components are ready to use.

Live URL

https://tarang-ui.netlify.app

Preview

screen-capture.mp4

Link to import the CSS

• To link in the HTML file -
• <link rel="stylesheet" href="https://tarang-ui.netlify.app/stylesheets/main.css">

or

• To link in the CSS file - @import url("https://tarang-u.netlify.app");

Features

Typography

Tarang uses 3 fonts primarily

• Montserrat Alternates for H1
• Montserrat for all other heading tags and
• Poppins for Paragraphs.

Colors

The four main colors used by Tarang are

• Primary-color: hsl(234, 71%, 25%)
• Secondary-color: hsl(234, 22%, 44%)
• Accent-color: hsl(180, 100%, 40%)
• Text-color: hsl(71, 38%, 16%)
• Background-color: hsl(0, 0%, 100%);

Components

The components list is as follows

• Avatar
• Alert
• Badge
• Button
• Card
• Image
• Input
• Text Utilities
• Lists
• Navigation
• Modal
• Rating
• Toast
• Grid layout