NextUI Documentation

Usage

NextUI is a pleasing, minimal and modern UI library

It consists of a ton of Custom properties, Utility classes and UI components for your basic uses

//CSS

@import url("https://nextui.netlify.app/nextui.css");

// HTML

<link rel="stylesheet" href="https://nextui.netlify.app/nextui.css">

Colors

NextUI uses HSL colors

HSL colors are easy to understand from reading them and to create a lighter or darker shade of a color quickly

hsl(338, 81%, 41%)

hsl(198, 74%, 47%)

hsl(153, 57%, 82)

hsl(46, 100%, 90%)

hsl(0 0% 100%)

hsl(0 0% 100% / 0.9)

hsl(0 0% 100% / 0.8)

hsl(0 0% 100% / 0.7)

hsl(0 0% 100% / 0.6)

hsl(0 0% 100% / 0.5)

hsl(0 0% 100% / 0.4)

hsl(0 0% 100% / 0.3)

hsl(0 0% 100% / 0.2)

hsl(0 0% 100% / 0.1)

hsl(230 35% 7% / 0.1)

hsl(230 35% 7% / 0.2)

hsl(230 35% 7% / 0.3)

hsl(230 35% 7% / 0.4)

hsl(230 35% 7% / 0.5)

hsl(230 35% 7% / 0.6)

hsl(230 35% 7% / 0.7)

hsl(230 35% 7% / 0.8)

hsl(230 35% 7% / 0.9)

hsl(230 35% 7%)

Typography

NextUI uses Open-Sans font family.

This is .fs-800: 4.5rem

This is .fs-800 gray text

This is .fs-700: 3.5rem

This is .fs-600: 2rem

This is .fs-500: 1.75rem

This is .fs-400: 1.125rem

This is .fs-300: 1rem

This is .fs-200: 0.875rem

Text Utilities

This is 10% lighter than black : text-dark-90

This is 20% lighter than black : text-dark-80

This is 30% lighter than black : text-dark-70

This is 40% lighter than black : text-dark-60

This is 50% lighter than black : text-dark-50

This is 60% lighter than black : text-dark-40

This is 70% lighter than black : text-dark-30

This is 80% lighter than black : text-dark-20

This is 90% lighter than black : text-dark-10

This is a center aligned text

Alerts

Alerts are feedbacks for an action triggered by the users

Four basic types of alerts are:

Error alert uses .bg-red which is background: hsl(338, 81%, 41%)

Warning alert uses .bg-blue which is background: hsl(198, 74%, 47%)

Information alert uses .bg-yellow which is background: hsl(46, 100%, 90%)

Success alert uses .bg-green which is background: hsl(153, 57%, 82%)

This is a error alert

This is a warning alert

This is a Info alert

This is a Success alert

<p class="alert bg-red">
    <span class="alert-message">This is a error alert</span>
    <i class="closeError fas fa-times"></i>
</p>
<p class="alert bg-red">
    <span class="alert-message">This is a error alert</span>
</p>
<p class="alert bg-yellow">
    <span class="alert-message">This is a warning alert</span>
    <i class="closeWarning fas fa-times"></i>
</p>
<p class="alert bg-yellow">
    <span class="alert-message">This is a warning alert</span>
</p>
<p class="alert bg-blue">
    <span class="alert-message">This is a Info alert</span>
    <i class="closeInfo fas fa-times"></i>
</p>
<p class="alert bg-blue">
    <span class="alert-message">This is a Info alert</span>
</p>
<p class="alert bg-green">
    <span class="alert-message">This is a Success alert</span>
    <i class="closeSuccess fas fa-times"></i>
</p>
<p class="alert bg-green">
    <span class="alert-message">This is a Success alert</span>
</p>

Avatars

Avatars are used to potray people or objects.

They have 5 sizes: width-5rem, width-6rem, width-7rem, width-8rem, width-9rem

.width-5rem is width: 5rem

.width-6rem is width: 6rem

.width-7rem is width: 7rem

.width-8rem is width: 8rem

.width-9rem is width: 9rem

.radius-50 is border-radius to 50

<div class="width-5rem">
    <img class="radius-50" src="....." alt="random_picture">
</div>
<div class="width-7rem">
    <img class="radius-50" src="....." alt="random_picture">
</div>
<div class="width-9rem">
    <img class="radius-50" src="....." alt="random_picture">
</div>
<div class="width-10rem notification notification-color-yellow">
    <img class="radius-50" src="....." alt="random_picture">
</div>

Badges

Badges indicates a status informations from a component

Here blue, green, yellow and red badges are used with different components

.notification is used to design the notification content

.notification-color-blue gives background: hsl(198, 74%, 47%) to its pseudo element

.notification-color-green gives background: hsl(153, 57%, 82%) to its pseudo element

.notification-color-yellow gives background: hsl(46, 100%, 90%) to its pseudo element

.placeholder, .placeholder-face and .placeholder-hands are used to design the placeholder

<div class="width-5rem">
    <div class="placeholder">
        <div class="placeholder-face"></div>
        <div class="placeholder-hands"></div>
    </div>
  </div>
  <div class="width-7rem notification notification-color-green">
    <div class="placeholder">
        <div class="placeholder-face"></div>
        <div class="placeholder-hands"></div>
    </div>
  </div>
  <div class="width-9rem notification notification-color-blue">
      <div class="placeholder">
        <div class="placeholder-face"></div>
        <div class="placeholder-hands"></div>
    </div>
  </div>
<div class="width-10rem">
    <div class="placeholder">
        BK
    </div>
</div>

<div class="notification notification-color-green">
  ICON
</div>
<div class="notification notification-color-blue">
  ICON
</div>
<div class="notification notification-color-yellow">
  ICON
</div>

Cards

Cards are content container with wide variety of content

Cards maybe Verticle, Horizontal, text overlayed or text-only

.close-icon is a letter X

.card-overlay is set to filter: blur(0.12rem) and opacity: 0.2

Horizontal

Verticle