NATIVE UI

Build Fast, Responsive Frontend with Native. Night Mode now available.

Use pre-made components to focus more on logic.

Normal Theme

Dark Theme

How to get started?

To start using the components in your project, you can add the below <link> inside your <head> section of your page. Make sure to keep this on top of all other stylesheets if you are using any. Also, if you import native-ui.css in your css file make sure it goes on the top too.

<link rel="stylesheet" href="https://native-ui.netlify.app/native-ui.css">

List Of Components Available.

More components would be coming soon. Also, the existing ones could be updated.

Alert
Avatar
Badge
Button
Card
Grid
Image
Input
List
Navigation
Rating
Slider
Snackbar
Typography

Overview of each component

Alert

Alerts are used to provide contexual feedback messages. It displays in a virtual box that pops up on the screen.
Types:

Simple Alert
- primary
- secondary
- danger
- warning
- success
Alert with icon
Alert with dismiss

Avatar

The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.
Types:

Avatar with Image
Avatar with Text

Badge

The Badge component is used to represent a user's status - online, offline etc. They can also be used to display a notification or cart count.
Types:

Badge on icons
Badge on avatar

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.
Types:

Button varieties
- Primary
- Secondary
- large
- ghost
- links
- Floating Buttons
- Icon Buttons

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.
Types:

Horizontal card
Vertical card
Text only card
Vertical card with badge
Vertical card with overlay
Vertical card with dismiss

Grids

Grids are very useful in arranging the content over the website hasle free.
Types:

2 column grid
3 column grid
4 column grid
20-80 column grid

Images

Images are an integral part of the content strategy of any website.
They convey some important information without the need of textual content. Types:

Square image
- responsive
Round image
- responsive
  - small
  - medium

Inputs and Forms

Inputs are the main component that is used for user's interaction with the web app. Inputs are used to take important information from the user, and then save the data.
Types:

Password input
Email input
Text area input
Checkbox group
Radio group
Form Validation

Lists

List are very useful components for handling structure and/or order of text on website.
Types:

Basic list
- Bullet
- Circle
- Square
- Roman
- Decimal
- Alphabet
- Triangle
Stacked list ( eg. notifications )

Modal (live example added)

Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the so that modal content scrolls instead.
Types:

Modal with two buttons

Navigation

A Navigation bar helps in accessing information. It is the UI element on a webpage that includes links for the other sections of the website.
The navbar provided by native is also responsive. It will turn into a hamburger menu when the width decreases.

Types:

Desktop navigation
Mobile Navigation (Hamburger Implemented)

Ratings

Native's 5-star ratings component can be used to allow the users to share their opinion about the
product, documentation page, photo and more.
Types:

Ratings

Toast (with live example)

Toasts, sometimes called snackbars or banners, make for great medium-attention notifications because they are non-disruptive.
Users can continue using the product while being informed about the (hopefully) important stuff and any
supplementary options to the current user action.