A simple, modular and accessible component libray to make your development process more enjoyable.
To get started with BreezeUI, copy the code and paste it in the head tag of your html document for the css to get loaded.
<link rel="stylesheet" href=https://breezeui.netlify.app/styles/breezeUI.css>Alerts are notifications that keeps the user informed of the status of the system, which may or may not require the user to respond. This includes general updates, errors, and warnings.
Types of alerts available in BreezeUI :
- Primary Alert
- Secondary Alert
- Success Alert
- Warning Alert
- Danger Alert
- Alert with Dismiss Button
Examples : BreezeUI Alerts
Avatar can be used to show user's profile picture on profile information page.
Types of avatars available in BreezeUI :
- Image Avatars
- Different sized Image Avatars
- Difference Sized Text Avatars
Examples : BreezeUI Avatars
Badges are used to dispaly status information or count notification on top of other UI elements like avatars, icons and also text.
Types of badges available in BreezeUI :
- Status Badge
- Count/Notification Badge
Examples : BreezeUI Badges
Buttons are important UI elements that make it possible for users to interact with a system and take action by making selections. Buttons are used on forms, website homepages, dialog boxes, and toolbars.
Types of buttons available in BreezeUI :
- Solid Primary Button
- Outlined Secondary Button
- Link Button
- Icon Button
- Floating Action Button
Examples : BreezeUI Buttons
Cards can be defined as a small rectangle/square associated to a singular thought. Cards are full of interactive elements such as text, links, buttons or images but they suggest just one main action: the one of "clicking" through the card to further discover the content.
Types of cards available in BreezeUI :
- Vertical Card
- Horizontal Card
- Card with Badge
- Card with Dismiss Button
- Card with Shadow
- Card with Overlay
- Text only Card
Examples : BreezeUI Cards
Images are multimedia elements added to make websites more interesting. The images can be formatted to have round and square borders. Responsive images can also be created which automatically adapt to the width of the container.
Types of images available in BreezeUI :
- Round Image
- Square Image
- Responsive Image
Examples : BreezeUI Images
Input elements are used to take infromation from user. Input components are used in a variety of usecases like forms, sign-up/sign-in pages etc.
Type of input elements available in BreezeUI :
- Primary Input
- Secondary Input
- Valid Input
- Invalid Input
Examples : BreezeUI Inputs
Text content can be styled using with the help of classes from the component library.
Type of text utilities available in BreezeUI :
- Heading Text
- Paragraph Text
- Aligned Text
- Styled Text
Examples : BreezeUI Text Utilities
Lists are used to specify a collection of information. A list may contain one or more list elements. Lists can be of ordered or unordered type.
Types of lists available in BreezeUI :
- Unordered (circle, disc, square)
- Ordered (alphabet, numeric, roman numerals)
- Stacked List
Examples : BreezeUI Lists
It is a section of a graphical user interface intended to aid visitors in accessing information. Navigation bars are implemented in file browsers, web browsers and as a design element of some web sites.
Types of navigation components available in BreezeUI :
- Nav Bar
- Sub Menu
- Hamburger Menu
Examples : BreezeUI Navigation
It is a web page element that is displayed in front of the screen and deactivates all other page content including the ability to scroll.
Example : BreezeUI Modal
Ratings are web components that are used to measure how good a product/service is. Ratings are renowned for representing the credibility and quality of the product. They are used to take in user feedback and appreciation.
Types of rating available in BreezeUI :
- Read-only rating
- Interactive rating
Examples : BreezeUI Rating
It is a UI feature where an event causes a small text box to appear at the bottom of the screen.
Types of toasts available in BreezeUI :
- Information Toast
- Success Toast
- Error Toast
Examples : BreezeUI Toast
Grid layout enables us to align elements into columns and rows. It excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
Types of grids available in BreezeUI :
- Two row grid
- Two column grid
- Three row grid
- Three column grid
Examples : BreezeUI Grids
The slider component allows you to create a slider that can be used to for cases where the user can drag it to pick a number from a range that is specified. Sliders are useful when you don't need an exact numeric value.
Types of sliders available in BreezeUI :
- Slider
- Disabled Slider
- Slider with icon
Examples : BreezeUI Slider
