A free open source library which always comes in clutch when you need it the most. Build fast and responsive websites using ClutchUI.
In order to start using the ClutchUI in your projects, just copy code snippet below. Make sure to paste it in your <head> tag and above all your <link> tags.
<link
rel="stylesheet"
href="https://clutchui.netlify.app/stylesheets/index.css"
/>Here's a simple starter template to get you started.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
//ClutchUI CSS
<link
rel="stylesheet"
href="https://clutchui.netlify.app/stylesheets/index.css/"
/>
//Your stylesheets here
<title>Starter Template</title>
</head>
<body>
<h1>Hello World</h1>
<h2>Let's Clutch it!!</h2>
<script src="https://clutchui.netlify.app/docs/js/sidebar.js"></script>
<script src="https://clutchui.netlify.app/docs/js/nav.js"></script>
</body>
</html>- Alerts
- Avatar
- Badge
- Button
- Card
- Grid
- Image
- Input
- List
- Modal
- Navigation
- Rating
- Slider
- Typography
- Snackbar
ClutchUI provides the following components.
An alert is a simple block of useful information that is used to display and get the user's attention.
Types of alert:
An avatar is mini user profile image which is used to give an identity to the user.
Types of avatar:
Badges are commonly used to display status information such as notification count or user status.
Types of badges:
Buttons are essential part of any website. They are commonly used to interact and get feedback from the user.
Types of buttons:
Cards are generally used for conveying short or brief information about certain product. Cards are commonly used in e-commerce websites to showcase their wide variety for products.
Types of cards:
- Horizontal card
- Vertical card
- Card with text
- Card with text-overlay
- Card with dismiss
- Card with badge
Grids are one of the basic cornerstones for layouts in web. They are used to structure the web page and make them visually appleaing.
Types of grid:
Images are everywhere on the internet. With ClutchUI, implementing images so much more easier than before.
Types of Image:
Inputs are mainly used in Login or Sign-up forms and other general use cases.
Types of Input:
Lists are used to group together similar items.
Types of List:
Modals are generally used to display some information to the user and requires some action from the user to proceed.
You can check it out here.
Navigation are essential part of any website. With ClutchUI you can build quick and easy navigation sections.
You can check it out here.
For Mobile navigation here
Ratings are a good way for the user to share their feedback or opinion on anything.
You can check it out here.
Sliders are useful tools in getting information from the user. They can accept values in a specific range and are usually used as price range sliders in E-commerce websites.
You can check it out here.
Typography is an integral part of any component library. ClutchUI provides various typography class aswell as some text utilities.
Typography classes:
Snackbar contains useful information about a task which is presented to the user usually on the bottom of the screen. Snackbars are displayed only for a short peroid of time and usually used to gain the users attention or to notify them.
You can check it out here.
- Fully Responsive
- Integrated Carbon for code snapshots.