Introduction
Glass UI is a moder light weight glassmorphic UI component library which provides you an easy and fast way to ship trendy looking websites. Glassmorphism is a design style of making UI elements look like frosted glass. We take away all your design worried when you want to create someting a glass-morphic.
Quick Setup
The fastest way to use Glass UI components in your repository is to copy and paste the code given below in the head of your html
Typography
Different types of text pre styled text utilities
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
This is a subtitle
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
This is a subtitle
Alert
An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
Basic Alerts
Success alert message
Error alert message
Warning alert message
Info alert message
Data uploaded to the server. Fire on!
Update is ready to be installed.
Seems your account is about to expire, upgrade now.
There was an error processing your request!
Avatar
Avatars are typically used to display a user profile as a picture, an icon, or short text.
Avatar sizes
Avatars come in 3 different sizes : sm, md and lg. You can set custom size by applying width and height
Badge
Badges are small indicators to notify about something. They are used to notify the user of some change.
Icon Badges
24
Avatar Badges
Button
Buttons are used everywhere on a site to perform major and minor functions.
Button Styles
Primary
Danger
Warning
Success
Info
Glass
Button Types
Filled
Outlined
Open
Float Button
Link
Icon Buttons
Filled
Outlined
Card
Card are used to show user related data collectively, like product details.
Card Types
Card can be of one of the 2 types either horizontal or vertical. The card by default is vertical
Card Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat tincidunt odio, in porttitor sapien faucibus in. Curabitur et luctus nulla, et sodales arcu.
Card Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat tincidunt odio, in porttitor sapien faucibus in. Curabitur et luctus nulla, et sodales arcu.
Card Title
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla consequat tincidunt odio, in porttitor
sapien faucibus in. Curabitur et luctus nulla, et
sodales arcu.
Buy Now
Add to Cart
Card Title
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla consequat tincidunt odio, in porttitor
sapien faucibus in. Curabitur et luctus nulla, et
sodales arcu.
Buy Now
Add to Cart
Text only cards
These cards don't involde images
Card Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat tincidunt odio, in porttitor sapien faucibus in. Curabitur et luctus nulla, et sodales arcu.
Card Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat tincidunt odio, in porttitor sapien faucibus in. Curabitur et luctus nulla, et sodales arcu.
Card Title
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla consequat tincidunt odio, in porttitor
sapien faucibus in. Curabitur et luctus nulla, et
sodales arcu.
Buy Now
Add to Cart
Card Title
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla consequat tincidunt odio, in porttitor
sapien faucibus in. Curabitur et luctus nulla, et
sodales arcu.
Buy Now
Add to Cart
Card Text Overlay
Add text over a card
Card Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat tincidunt odio, in porttitor sapien faucibus in. Curabitur et luctus nulla, et sodales arcu.
Sold Out
Card Title
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla consequat tincidunt odio, in porttitor
sapien faucibus in. Curabitur et luctus nulla, et
sodales arcu.
Buy Now
Add to Cart
Card with badge & close button
We can add a badge on the card and it has a close button if we want to add functionality to that
On Sale
Card Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat tincidunt odio, in porttitor sapien faucibus in. Curabitur et luctus nulla, et sodales arcu.
x
On Sale
Card Title
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla consequat tincidunt odio, in porttitor
sapien faucibus in. Curabitur et luctus nulla, et
sodales arcu.
Buy Now
Add to Cart
Image
Better images for your web app
Fluid Image
Gives fluid and responsive images which will change size according to the parent container
Circular Image
Circular images which you can size according to your needs
Input
Input Elements for forms
Text Input
Text Input is the most common form of input, just copy and past the below given code to enjoy such modern ui
First Name
First Name
First Name
Input Error
Handle input validation with prestyle input error state
First Name
Rating
Ratings are used at various places to take customer feedback, to show public opinion, etc.
Star Rating
Most common ui component used for ratings
(3.1)