Welcome Aboard Fellow Developer, Muffin UI is the user-friendly component library. It helps you to design your responsive website quickly just by importing it in your project.
To use the Muffin UI in your project, copy the below code and add it in the head section of your HTML file.
<link rel="stylesheet" href="https://muffinui.netlify.app/style.css">
- Alerts
- Avatars
- Badges
- Buttons
- Cards
- Chips
- Image
- Input
- Lists
- Modal
- Navigation
- Rating
- Simplified Grid
- Slider
- Tabs
- Toast
- Utilities
Alerts give a short, important message in a way that attracts the user's attention without interrupting the user's task. Check out about Alerts here.
Different Types of Alerts in Muffin UI :
- Default Alerts
- Filled Alerts
- Dismissable Alerts
Avatars are used widely across the website for profiles, blogs and many more. You can find the detailed documentation for avatars here.
Below Avatars are covered by Muffin UI in 4 different sizes extra-small, small, medium and large.
- Image Avatars
- Letter Avatars
- Square Avatars
Badges can be combined with Avatars, they are useful for status of user like busy, offline and away. They can also be used on icons for notifications. More detailed information on badges can be found here.
Badges featured by Muffin UI :
- Badges for Image Avatars
- Round Avatar Badges
- Square AVatar Badges
- Badges for Icons
Buttons are useful in performing various actions on a single click. The Documentation for buttons can be found here.
Types of Buttons in Muffin UI :
- Default Buttons
- Outline Buttons
- Link Buttons
- Buttons with Icons
- Floating Action Buttons
Cards contain content and actions about a single subject. Cards are surfaces that display content and actions on a single topic. The documentation for cards can be found here.
Cards covered in Muffin UI :
- Basic Cards
- Dismissable Cards
- Vertical Cards
- Horizontal Cards There are more sub categories in the cards.
Chips are compact elements that represent an input, attribute, or action. Check out the documentation here.
Chips featured by Muffin UI :
- Default Chips
- Chips with Icons
- Dynamic Chips
Images are integral part of the website, useful for profile, logos and carousels. More information of images can be found here.
Types of Images in Muffin UI :
- Responsive
- Round
Inputs are used to take data from the users, mostly by forms. Check out here for more information.
Lists are a continuous group of text or images. Here is the documentation for lists.
Types of Lists featured in Muffin UI :
- Ordered
- Unordered
- Stacked There are more sub categories in the lists.
Modals are used to show interactive dialogs and notifications to your website users. Further information on CSS classes can be found here.
Modals in Muffin UI :
- Default
- List
- Scrollable
Navigation are helpful for switching between different pages. Check out Navigation Documentation here.
Navigations featured in Muffin UI :
- Simple Navigation
- Navigation with Icons
Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own. Check out more information here.
Grids adapt to screen size and orientation, ensuring consistency across layouts. For more information, check out the documentation.
Types of Grid Formats in Muffin UI :
- Grid 50-50
- Grid 30-70
- 3 Column Grid
Sliders allow users to make selections from a range of values. Check out documentation.
Tabs are useful when we have to navigate to different sections on the same page. Check out here.
Tabs featured in Muffin UI :
- Fixed Tabs
- Tabs with Left Icon
- Tabs with Top Icon
Toasts provide brief notifications. Check out the documentation.
Utilities are helpful in maintaining the consistency all the pages while building the website. For more information, visit the documentation.
- HTML
- CSS
- Javascript
- WebP format of images is used in the Muffin UI which ensure fast loading and less render blocking.
- For CSS, alphabetical ordering of the properties is followed which helps in easy debugging.
- Use of reponsive units and media queries to make it Mobile Responsive.
- The properties like aria-label and rel are added in anchor tags which increase the accessibility.
- Dark Mode
muffinui.mp4
