n-components!

Light-weight, simple 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.

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

Base Buttons

Input:

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

Output:

Button

Examples:

Normal Info Warning Alert Success Cancel Sign Up Dark Mode

Button Settings

Mix and match any of these component variables.

variant="info"
Button theme type.
Button

Accepts: normal, info, warning, alert, success

Default: normal

dontPunch
Won't react to clicks.
Button

Default: false

scaleOnHover
Scales when hovered.
Scales!

Default: false

animation="fast"
Control most animation speeds.
Fast Button

Accepts: fast, normal, slow or very-slow

Default: normal

thick
The largest button variant.
Thick Button

Overrides: thin

Default: false

thin
The smallest button variant.
Thin Button

Default: false

dark
Colors button text lighter.
Dark Mode

Typically combined with outlineOnly or dark.

Default: false

outlineOnly
Colors button text lighter.
Outline

Default: false

bgColor="#cd50ec"
Colors background and border.
Custom

Accepts: any CSS-valid color string

Default: null

rounded
Rounds the corners.
Rounded

Default: false

sharp
Sharpens the corners.
Sharp

Overrides: rounded

Default: false