n-components!

Stable Release Version:

Simple, lightweight web components for use with vanilla HTML, JS and CSS.

Import the latest version of n-components into your static vanilla HTML file using:

<script src="https://unpkg.com/@trenoxxious/n-components@latest/dist/n-components.umd.js"></script>

Then, simply call any of the below n-components to get started.

We have some useful drop-in utilities. Take a peek at things like n-copy and n-tooltip!

n-utility

Various quick utility to make things easy and intuitive. Visit the n-components Github to view the specifics of using n-utility.

<n-copy class="nc-large nc-dark" copy="127.0.0.1"></n-copy>
A simple copy-to-clipboard button.

Accepts: string, nc-classes

<n-button n-tooltip="Hover me!" class="nb-info nt-dark">Hello!</n-button>
A tooltip that attaches to the mouse on element hover.
Hello!

Accepts: string, nt-classes

You want some buttons? We have some cool, customizable n-buttons.

n-button

Basic usage:

<n-button>Button</n-button>

Variants:

Normal Info Warning Alert Success Cancel Sign Up Dark Static No

n-button Attributes

Combine any attributes to customize behavior and appearance.

class="nb-info"

Controls theme type.

Button

Options: normal, info, warning, alert, success

class="nb-fast"

Animation speed.

Fast

Options: fast, normal, slow, very-slow

class="nb-scale"

Scales on hover.

Scales!

Boolean

class="nb-thick"

Largest variant.

Thick

Boolean · Overrides thin

class="nb-thin"

Smallest variant.

Thin

Boolean

class="nb-rounded"

Rounded corners.

Rounded

Boolean · Overridden by sharp

class="nb-sharp"

Rounded corners.

Sharp

Boolean

class="nb-outline"

Outlined only style.

Outline

Boolean

class="nb-dp"

Disable click reaction.

Static

Boolean

class="nb-dynamic"

Disable min/max width.

Dyn

Boolean

style="background: blue;"

Regular styles work too!

Static

Boolean