NextUI - Component Library
mobile.mp4
Demo_desktop.mp4
<link rel="stylesheet" href="https://nextui.netlify.app/nextui.css" />@import url("https://nextui.netlify.app/nextui.css");NextUI uses HSL colors.
HSL colors are easy to understand from reading them.
HSL colors are used to create a lighter or darker shade of a color quickly.
NextUI contains utilities for:
- Font Sizes
- Font Weights
- Text Colors
- Background Colors
- Letter Spacings
- Word Spacings
- Text alignment (right, left, center, justify)
Avatars are used to potray people or objects.
NextUI contains avatars of 5 sizes: width-5rem, width-6rem, width-7rem, width-8rem, width-9rem.
Avatars maybe:
- Profile Avatars
- Placeholder Avatars
- Text Avatars
Badges indicates a status informations from a component.
NextUI uses blue, green, yellow and red badges
Badges can be used :
- With or Without Content,
- With different icons or avatars.
Alerts are feedbacks for an action triggered by the users.
NextUI contains the following types of Alerts with or without actionable close icons:
- Information Alert
- Success Alert
- Warning Alert
- Error Alert
Buttons allow users to take actions.
NextUI contains the following types of Button:
- Standard Button
- Disabled Button
- Rounded Button
- Outlined Button
- Icon Button
- Icon Button with text
- Floating Button
Cards are content container with wide variety of content.
NextUI contains the following types of Card:
- Vertical Cards with and without badges
- Vertical Cards with and without dismiss
- Horizontal Cards with and without badges
- Horizontal Cards with and without dismiss
- Card with text-overlay
- Text-only Card
By default, NextUI uses max-width to 100% and display to block to make images easier to work with
NextUI contains:
- Responsive Images
- Round Images
- Responsive Images for different screen widths, image widths and file-types
- Responsive Round Image for different screen widths, image widths and file-types
NextUI contains the following types of Input:
- Text Input
- Input with validation
- Input Checkbox
Lists are a continuous group of text or images.
NextUI contains the following types of Lists:
- Simple Lists
- Stacked / Notification Lists
NextUI contains the following types of Navigation:
- Desktop Navigation
- Mobile Hamburger Navigation
Modals are separate windows within an application for providing information or requiring confirmation
Rating component helps capture the user feedback in form of rating.
The toast component provides quick, at-a-glance feedback on the outcome of an action.
NextUI contains the following types of Grid:
- Simple Grid Layout
- Autofitting Responsive Grids
- Responsive Grids with Breakpoints
Sliders allow users to make selections from a range of values.
Submenus are menus contained within another menu