Lunar UI
Home Docs

Alerts

Alerts are used to communicate a state that affects a system, feature or a page.

Usage and Example

  • alert-error : Alert for an error
  • alert-success : Alert for success
  • alert-info : Alert for information
  • alert-warning : Alert for warnings

There was an error processing your request
There was an error processing your request
There was an error processing your request
There was an error processing your request

Code

Avatar

Avatar are typically used to display a user profile as a picture, an icon, or short text.

Variants

Use these classes to apply the styles

  • avatar-img: Avatar with image
  • avatar-icon: Avatar with icon
  • avatar-text: Avatar with text

AC

Code :

Shapes

There are two shapes in whicxh you can style your avatar. JUst add the following classes to your avatar to give it the desired shape!

  • avatar-circle: Circle shaped avatar
  • avatar-box: Box shaped avatar

AC
AC

Code

Sizes

There are 5 sizes available for different usecases! Change the size using the following classes:

  • avatar-xs
  • avatar-sm
  • avatar-md
  • avatar-lg
  • avatar-xl

Code

Badges

Badges are used to highlight an item's status for quick recognition.

Variants

Use img-badge

    Avatar with a badge. These badges can be used with 4 variants of avatar: avatar-xs, avatar-sm, avatar-md, avatar-lg
    You can use:
    1. badge-online: A badge for online status

    2. badge-offline: A badge for offline status

    3. badge-dnd: A badge for do not disturb

    Use icon-badge

      This icon badge must be used with the btn-lg icon button: btn-tertiary-icon

2

Code

Buttons

The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

Variants

  • btn-primary : Solid Button
  • btn-secondary : Button with an outline
  • btn-ghost : Button without an outline
  • btn-link : Button for links
  • Button with an icon

Button Button Button Button
Button

Code

Sizes

There are 4 sizes provided for the buttons:

  • btn-xs
  • btn-sm
  • btn-md
  • btn-lg

Button Button Button Button

Code

Custom Buttons

2 more types of buttons:

  • btn-tertiary-float : Floating button
  • btn-tertiary-icon : Icon button

Code

Input

The Input component is a component that is used to get user input in a text field.

Basic

  • input-box : A basic input field

Code

Variants

These are the following variants provided:

  • A basic input field with icon
  • valid-input : Used when the text entered is valid
  • invalid-input : Used when the text entered is invalid
  • filled-input : A basic input field with filled background
  • input-rounded : A basic input field with rounded edges

Code

Sizes

3 sizes provided:

  • input-sm : A basic input field
  • input-md : A basic input field
  • input-lg : A basic input field

Code

Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Horizontal Cards

Our Changing Planet

By Aryan Chaudhary

Visit ten places on our planet that are undergoing the biggest changes today.
Read This Bookmark

Our Changing Planet

By Aryan Chaudhary

Visit ten places on our planet that are undergoing the biggest changes today.
Read This Bookmark

Code

Small Cards

Our Changing Planet

By Aryan Chaudhary

Visit ten places on our planet that are undergoing the biggest changes today.
Read This Bookmark

Our Changing Planet

By Aryan Chaudhary

Read This Bookmark

Code

Vertical Cards

  • Card with a Badge
  • Simple Card
  • Card with dismiss button

New

Green Tea Face Serum

₹100 ₹100
ADD TO CART

Green Tea Face Serum

₹100 ₹100
ADD TO CART

Green Tea Face Serum

₹100 ₹100
ADD TO CART

Code

Responsive Images

Responsive images will automatically adjust to fit the size of the screen.

Usage and Example

  • responsive-img : Makes the image fit to the container.
  • round-img : Makes the image round.

Code

Typography

Documentation and examples for typography, including global settings, headings, body text and more!

Headings

  • heading-1
  • heading-2 bold-1
  • heading-3
  • heading-4 bold-2
  • heading-5

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Code

Paragraphs

  • p-sm : paragraph with small text
  • p-md : paragraph with medium text
  • p-lg : paragraph with large text

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, commodi. Consequuntur, nesciunt illo blanditiis nihil accusamus quisquam placeat fugiat maiores.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, commodi. Consequuntur, nesciunt illo blanditiis nihil accusamus quisquam placeat fugiat maiores.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique quasi maxime nulla tempore provident ipsum velit aperiam nihil doloremque non.

Code

Text Alignment

  • text-centered : Text aligned at the center of the screen
  • text-right : Text aligned at the right side of the screen
  • text-left : Text aligned at the left side of the screen

Heading-Center

Heading-Center

Heading-Center

Code

Lists

Lists can be used at so many places, navigation bar, stacked notifications, article pages, etc.

Unordered Lists

    Use the code provided below to create an unordered list.

  • Item 1
  • Item 1
  • Item 1
  • Item 1
  • Item 1
  • Item 1
  • Item 1
  • Item 1
  • Item 1
  • Item 1
  • Item 1
  • Item 1

Code

Ordered Lists

    Use the code provided below to create an ordered list.

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  1. Item Item with Capital letters in Lowercase 1
  2. Item Item with Capital letters in Lowercase 2
  3. Item Item with Capital letters in Lowercase 3
  4. Item Item with Capital letters in Lowercase 4
  1. Item with Capital letters in Uppercase 1
  2. Item with Capital letters in Uppercase 2
  3. Item with Capital letters in Uppercase 3
  4. Item with Capital letters in Uppercase 4
  1. Item with Roman numerals 1
  2. Item with Roman numerals 2
  3. Item with Roman numerals 3
  4. Item with Roman numerals 4
  1. Item with Capital letters but reversed 1
  2. Item with Capital letters but reversed 2
  3. Item with Capital letters but reversed 3
  4. Item with Capital letters but reversed 4

Code

Stacked Components

    Use the code provided below to create stacked list of components.

Code

Snackbar & Toasts

Snackbar & toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.

Snackbar

Snackbars provide brief feedback about an operation through a message at the bottom of the screen.

  • The code below can be used to add snackbars!

Code

Toast

  • The code below can be used to add Toasts!

Code

Rating

Rating components can be used as read-only badge or in reviews section. Can be used in reviews section as form too.

Code

Grids

Use grid when you want sections in view. Check below some examples of side by side cards.

50-50 Grid

  • grid-50-50 : Makes a grid of 50-50 ratio

col-1
col-2

Code

70-30 Grid

  • grid-70-30 : Makes a grid of 70-30 ratio

col-1
col-2

Code

30-70 Grid

  • grid-30-70 : Makes a grid of 30-70 ratio

col-1
col-2

Code

Slider

Sliders are used to decide range for something like sound in videos, price in shopping sites, etc.

Usage and Example

The code provided can be used to add the slider.

Code

Components