Skip to content

Components

Pre-built UI components: alerts, badges, tables, lists, avatars, and the navbar.

Alerts

Contextual feedback messages with left accent borders.

Info: This is a primary alert — useful for general information and tips.
Success! Your changes have been saved successfully. Everything is working as expected.
Warning: Please review your input before continuing. Some fields may need attention.
Error! Something went wrong while processing your request. Please try again.
Tip: You can customize alert colors using CSS variables in your project.
<div class="n-alert n-alert-success"> <strong>Success!</strong> Your changes have been saved. </div> <div class="n-alert n-alert-danger"> <strong>Error!</strong> Something went wrong. </div>

Badges

Small pill-shaped labels for status indicators, counts, and tags.

All Variants

Primary Secondary Success Danger Warning Info Dark

In Context

Notifications 3
Server Status Online

Tags

JavaScript CSS HTML React Vue TypeScript

Tables

Responsive tables with striped rows, hover effects, and borders.

Striped + Hover

# Name Email Role Status
1
AJ
Alice Johnson
 alice@example.com Engineer Active
2
BS
Bob Smith
 bob@example.com Designer Active
3
CD
Carol Davis
 carol@example.com Manager Away
4
DW
Dan Wilson
 dan@example.com Intern Offline
5
EL
Eve Li
 eve@example.com Lead Active

Bordered

FeatureFreeProEnterprise
Projects1UnlimitedUnlimited
Storage500 MB50 GB1 TB
SupportCommunityEmail24/7 Phone
<table class="n-table n-table-striped n-table-hover"> <thead> <tr><th>Name</th><th>Role</th></tr> </thead> <tbody> <tr><td>Alice</td><td>Engineer</td></tr> </tbody> </table>

Lists

Three list styles: separated, unstyled, and inline.

Separated List .n-list

  • Dashboard New
  • Settings
  • Profile
  • Team Members
  • Billing

Unstyled .n-list-unstyled

  • • Apple
  • • Banana
  • • Cherry
  • • Date
  • • Elderberry

Inline .n-list-inline

Avatars

Circular placeholders for user profiles in three sizes.

Sizes

S

sm

M

default

L

lg

Color Variations

AB
CD
EF
GH
IJ
KL
MN

Avatar Stack

A
B
C
+5

Dividers

Horizontal rules for separating content sections.

Content above the divider

Content below the divider

<hr class="n-divider">