Nexus UI Components

Feedback

Progress

A dynamic progress bar the shows real-time loading.

Skeleton

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Wrapped date to display structure while loading.

Layout

Accordion

Item 1
Item 2
Item 3
A collapsible panel for displaying content.

Center

Center
Center's data in parent element.

Tabs

  • One
  • Two
  • Three
Lorem ipsum dolor sit amet.
Provides an easy way to implement tabs into website.

Container

Container - w:150px

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, in? Fugiat nisi numquam fuga ducimus.
Constrain's a child element within a specified size.

Data Display

Badge

Elevated SuccessHover-Outline FailureDefaultHover New
Used to highlight an item's status

Card

Header
Body
Footer
Card used to display data.

Divider

Divider used to separate sections.

Keyboard Key

shift + K
Used to represent keyboard keys.

Forms

Button

Typical Button.

Switch

Checkbox that looks like a switch.

Other

Close Button

X
An X mark with an onClick prop.

Portal

Unable to display.

Easy way to use portals in React.

Back Drop

Unable to display.

Used behind Modal, Menu, Drawer, etc to allow users to exit.

Media Query

Resize your screen.

Use media query in React.

Overlay

Drawer

Unable to display.

Opens a side panel with the click of a button

Menu

Opens a menu panel with the click of a button

Modal

Unable to display.

A window that overlays the primary content.

Tool Tip

Hover Me