Halcyon is a CSS component library, with fully functional and modular pre-defined styled classes that will help you create beautiful UI in a matter of seconds. It is built in pure HTML, CSS and JavaScript. Just copy paste the code and you're ready to go!
Halcyon-UI.mp4
You can simply install the library in your code by importing it as so:
<link rel="stylesheet" href="https://halcyon-ui.netlify.app/halcyon.css">- OR in the CSS file
@import "https://halcyon-ui.netlify.app/halcyon.css";-
- Alerts can be used to inform the user about some important information usually with a pop up on the screen. There are different variants for Simple Alert here - primary, secondary, success, error and warning. The second alert type is Alerts with Close Button with JS functionality.
- To use alerts in your project, add the following URL-
- in the HTML file
<link rel="stylesheet" href="https://halcyon-ui.netlify.app/css/alert.css" />
- OR in the CSS file
@import "https://halcyon-ui.netlify.app/css/alert.css";
-
- Avatars are used to show a user's profile picture on a website. There are 2 variants here. Image Avatars are available in 5 different sizes - extra small (xs), small (sm), medium (md), large (lg) and extra large (xl). The second one is Text Avatar available in same variants.
- To use avatars in your project, add the following URL-
- in the HTML file
<link rel="stylesheet" href="https://halcyon-ui.netlify.app/css/avatar.css" />
- OR in the CSS file
@import "https://halcyon-ui.netlify.app/css/avatar.css";
-
- Badges are used to display certain information such as user status or a notification number as small circles in the top or bottom right. The first is Status badges with options online (green), offline (grey) and do not disturb (red). The badges are available according to three avatar sizes - large (lg), medium (md) and very small (xs). The second is Icon with Number Badge used to show notification numbers.
- To use badges in your project, add the following URL-
- in the HTML file
<link rel="stylesheet" href="https://halcyon-ui.netlify.app/css/badge.css" />
- OR in the CSS file
@import "https://halcyon-ui.netlify.app/css/badge.css";
-
- Buttons are used by the website user to perform important actions, or navigate the site. The first is Primary Button with the types: btn-solid, btn-outline, button-text-icon, button-icon and button-link. The second is Secondary Button with the types: btn-solid, btn-outline, button-text-icon, button-icon and button-link. The third is Disabled Button. The fourth is Floating Button that remains at the top of all content on the website and remains fixed at the bottom left of the screen.
- To use buttons in your project, add the following URL-
- in the HTML file
<link rel="stylesheet" href="https://halcyon-ui.netlify.app/css/button.css" />
- OR in the CSS file
@import "https://halcyon-ui.netlify.app/css/button.css";
-
- Cards are used to display all information together for one entity, like a product being sold on a site. The first is Text Only Card, the second is Horizontal Card, the third is Vertical Card, the fourth is Card with Badge, the fifth is Cards with Dismiss, the sixth is Cards with Text Overlay and all these are available in the variant Cards with Shadow.
- To use cards in your project, add the following URL-
- in the HTML file
<link rel="stylesheet" href="https://halcyon-ui.netlify.app/css/card.css" />
- OR in the CSS file
@import "https://halcyon-ui.netlify.app/css/card.css";
-
- Grids are used to display content in columns on a website. They make the site look cleaner and more consistent. The first one is Grid with 2 Columns, the second one is Grid with 3 Columns. Note that it also makes use of the Image component - responsive image, but you can easily replace the content.
- To use grids in your project, add the following URL-
- in the HTML file
<link rel="stylesheet" href="https://halcyon-ui.netlify.app/css/grid.css" />
- OR in the CSS file
@import "https://halcyon-ui.netlify.app/css/grid.css";
-
- Images are a very critical part of websites and should be responsive. The first one is Responsive Image and the second one is Round Image.
- To use the image component in your project, add the following URL-
- in the HTML file
<link rel="stylesheet" href="https://halcyon-ui.netlify.app/css/image.css" />
- OR in the CSS file
@import "https://halcyon-ui.netlify.app/css/image.css";
-
- Websites need one must have component, which is often overlooked in terms of design. Input fields and forms are present everwhere and are very crucial. The first variant is Normal Active Input, the second is Disabled and Read Only Input and the third is Input Form with Validation which contains both error and success validation messages, that can be manipulated by using JavaScript.
- To use the input component in your project, add the following URL-
- in the HTML file
<link rel="stylesheet" href="https://halcyon-ui.netlify.app/css/input.css" />
- OR in the CSS file
@import "https://halcyon-ui.netlify.app/css/input.css";
-
- Lists are used to arrange items together and present information using numbered text or bullets. The available types are - Normal Lists which have numbered (ordered) or not-numbered (unordered), the second is Nested Lists, the third is Spaced List and the fourth is Stacked List.
- To use the list component in your project, add the following URL-
- in the HTML file
<link rel="stylesheet" href="https://halcyon-ui.netlify.app/css/lists.css" />
- OR in the CSS file
@import "https://halcyon-ui.netlify.app/css/lists.css";
-
- A modal is a small box of content that appears on the screen to grab the user's attention. It typically disables scrolling, thus it should be used only for very important information. There is a Simple Modal with two action buttons which disables scrolling.
- To use a modal in your project, add the following URL-
- in the HTML file
<link rel="stylesheet" href="https://halcyon-ui.netlify.app/css/modal.css" />
- OR in the CSS file
@import "https://halcyon-ui.netlify.app/css/modal.css";
-
- Navigation is a very important part of any website. It is made for the user to navigate around the website and access different links. It is usually at the top of the page, and should look clean and be easily accessible. The first is Simple Navigation which is for the desktop and is not fully responsive. The second is Submenu Navigation that contains submenus when you hover on the items, the third is Hamburger Navigation which is responsive in nature. Note that the navbars here use the badge component, but you can easily modify this.
- To use the navbars in your project, add the following URL-
- in the HTML file
<link rel="stylesheet" href="https://halcyon-ui.netlify.app/css/navigation.css" />
- OR in the CSS file
@import "https://halcyon-ui.netlify.app/css/navigation.css";
-
- Rating is used to display the overall reviews of an item or a product. The available variant is Normal Read-only Rating which can be made dynamic using JS.
- To use the rating component in your project, add the following URL-
- in the HTML file
<link rel="stylesheet" href="https://halcyon-ui.netlify.app/css/rating.css" />
- OR in the CSS file
@import "https://halcyon-ui.netlify.app/css/rating.css";
-
- Sliders are very useful to display the range of particular values such as price in a shopping store or volume level. The available variant is Simple Styled Slider which is easily customizable.
- To use a slider in your project, add the following URL-
- in the HTML file
<link rel="stylesheet" href="https://halcyon-ui.netlify.app/css/slider.css" />
- OR in the CSS file
@import "https://halcyon-ui.netlify.app/css/slider.css";
-
- Text utilities or typography is used to ease the process of styling headings and text. The utilities are - Headings, Small Text, Gray Text, and Center Text
- To use these in your project, add the following URL-
- in the HTML file
<link rel="stylesheet" href="https://halcyon-ui.netlify.app/css/text-utilities.css" />
- OR in the CSS file
@import "https://halcyon-ui.netlify.app/css/text-utilities.css";
-
- Toasts are basically notification messages that appear on the screen to inform the user about something. They disappear after a few seconds. The type is Simple Toast which disappears in 3.5 seconds and has a close button. You can change the background color of the toast according to various scenarios like success or failure.
- To use a toast in your project, add the following URL-
- in the HTML file
<link rel="stylesheet" href="https://halcyon-ui.netlify.app/css/toast.css" />
- OR in the CSS file
@import "https://halcyon-ui.netlify.app/css/toast.css";
- There is also a utility.css file which contains styled classes for margins, padding etc. These are used in the library so you should include it either by using the all css import link or by including the following-
- in the HTML file
<link rel="stylesheet" href="https://halcyon-ui.netlify.app/css/utility.css" />
- OR in the CSS file
@import "https://halcyon-ui.netlify.app/css/utility.css";
- Lightweight
- Easy to use
- Highly Customizable
- Modular
- Modern and Clean Design
- HTML
- CSS
- JavaScript
Clone the project
git clone https://github.com/bhavyaj12/HalcyonUI.git- This project is meant to be open source! Do feel free to add bugs and fork the repo for contribution.
- Liked the project? Do please ⭐ it :)
-
Have a job/internship/project opportunity or want to talk about photography, gaming, books, travel or movies and tv-shows? Ping me here:-
