To start using the Max UI in your project, add this link tag before the closing </head> tag.
<link rel="stylesheet" href="https://maxui.netlify.app/components/max.css" />Alerts can be used to show a message to the user.
You can view the Alert component on https://maxui.netlify.app/docs#alert
- Primary Alert
- Secondary Alert
- Success Alert
- Warning Alert
Avatars can be used for user profile picture.
You can view the Avatar component on https://maxui.netlify.app/docs#avatar
- Diff Sized Avatars
Badge can be used to show either status of the user (online, or offline) or you can use it show notification count.
You can view the Badge component on https://maxui.netlify.app/docs#badge
- Pill Badges
- Badge on Text
Buttons can be used to make your web page interactive to your user. You can use them to take user action.
You can view the Button component on https://maxui.netlify.app/docs#button
- Filled Buttons
- Outlined Buttons
- Link Buttons
You can view the Card component on https://maxui.netlify.app/docs#card
- Horizontal Text Card
- Vertical Item Card
- Text Only Card
- Text Overlay Card
Image can be used to display large picture on the website.
You can view the Image component on https://maxui.netlify.app/docs#image
- Responsive Image
- Round Image
Input can be used to take input from your user. It can make your site more interactive.
You can view the Input component on https://maxui.netlify.app/docs#input
- Styled Input
- Error Input with Validation
Use Typography utilities to format text content on your web site.
You can view the Text component on https://maxui.netlify.app/docs#text
- Headings
- Gray Text
- Aligned Text
CSS Grid can be used to structure elements in rows and columns.
You can view the Grid component on https://maxui.netlify.app/docs#grid
- Two Columns Grid
- Three Columns Grid
Modal can be used for creating dialog boxes, to communicate with user.
You can view the Modal component on https://maxui.netlify.app/docs#modal
- Modal Component
Navigation can be used to give the user facility to navigate between different pages.
You can view the Navigation component on https://maxui.netlify.app/docs#navigation
- Responsive Navbar
List can be used to show a list of items.
You can view the List component on https://maxui.netlify.app/docs#list
- Numbered List
- Roman List
- Disc List
- Circle List
- Square List
- Notification Stacked List
Toast can be used to show notifications to the user.
You can view the Toast component on https://maxui.netlify.app/docs#toast
- Toasts
Rating can be used to show ratings on the product, or it can also be used for taking ratings from the user.
You will find the Rating on https://maxui.netlify.app/docs#rating
Sliders can be used to show range in various places like pricing info, video player seek etc.
You can view the Rating component on https://maxui.netlify.app/docs#rating
- Styled Slider
- Disabled Slider