Utilities

Low-level utility classes for spacing, layout, color, borders, shadows, and more.

Spacing

Margin (n-m-*) and padding (n-p-*) with a 6-step scale (0–5).

Padding Scale

p-0

p-1

p-2

p-3

p-4

p-5

Scale Reference

Step	Value	Margin	Padding
0	0	`.n-m-0`	`.n-p-0`
1	0.25rem (4px)	`.n-m-1`	`.n-p-1`
2	0.5rem (8px)	`.n-m-2`	`.n-p-2`
3	1rem (16px)	`.n-m-3`	`.n-p-3`
4	1.5rem (24px)	`.n-m-4`	`.n-p-4`
5	3rem (48px)	`.n-m-5`	`.n-p-5`

Directional Variants

Suffix	Direction	Property
`t`	Top	`margin-top / padding-top`
`b`	Bottom	`margin-bottom / padding-bottom`
`l`	Left	`margin-left / padding-left`
`r`	Right	`margin-right / padding-right`
`x`	Horizontal	`margin-inline / padding-inline`
`y`	Vertical	`margin-block / padding-block`

<div class="n-mb-3">...</div>  <div class="n-px-4">...</div>  <div class="n-mx-auto">...</div>

Flexbox

Flex direction, justify, align, wrap, and gap utilities.

Justify Content

.n-justify-start

A

B

C

.n-justify-center

A

B

C

.n-justify-between

A

B

C

.n-justify-evenly

A

B

C

Align Items

.n-items-start

A

B

.n-items-center

A

B

.n-items-end

A

B

Direction & Wrap

.n-flex-col

Row 1

Row 2

Row 3

.n-flex-wrap .n-gap-2

Tag 1

Tag 2

Tag 3

Tag 4

Tag 5

Tag 6

Display

Control element visibility and display type. Includes responsive variants.

Class	Value	Responsive
`.n-d-none`	display: none	`.n-d-sm-none`, `.n-d-md-none`, `.n-d-lg-none`
`.n-d-block`	display: block	`.n-d-sm-block`, `.n-d-md-block`, `.n-d-lg-block`
`.n-d-flex`	display: flex	`.n-d-sm-flex`, `.n-d-md-flex`, `.n-d-lg-flex`
`.n-d-inline`	display: inline	—
`.n-d-inline-block`	display: inline-block	—
`.n-d-grid`	display: grid	—

Live Example (resize browser)

Hidden on ≥768px

Visible only ≥768px

Always visible

Background Colors

Apply semantic background colors to any element.

Primary Secondary Success Danger Warning Info Dark Light

Borders & Radius

Border utilities and six border-radius levels.

Border Radius

none

sm

default

lg

xl

full

Border Colors

Primary

Success

Danger

Warning

Directional Borders

border-t

border-b

border-l

border-r

Shadows

Five elevation levels for visual depth and hierarchy.

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

Opacity

Control element transparency.

0%

25%

50%

75%

100%

Position

Positioning and z-index utilities.

Class	Property
`.n-relative`	position: relative
`.n-absolute`	position: absolute
`.n-fixed`	position: fixed
`.n-sticky`	position: sticky
`.n-top-0` / `.n-right-0` / `.n-bottom-0` / `.n-left-0`	Set edge to 0
`.n-inset-0`	inset: 0 (all edges)
`.n-z-10`, `.n-z-50`, `.n-z-100`	z-index levels

Width & Height

Common sizing utilities for responsive layouts.

Class	Value
`.n-w-full`	width: 100%
`.n-w-half`	width: 50%
`.n-w-auto`	width: auto
`.n-max-w-sm` / `md` / `lg` / `xl`	max-width: 24rem → 36rem
`.n-h-full`	height: 100%
`.n-h-screen`	height: 100vh
`.n-min-h-screen`	min-height: 100vh

Overflow

Control how content overflows its container.

.n-overflow-hidden .n-overflow-auto .n-overflow-scroll .n-overflow-visible .n-overflow-x-auto .n-overflow-y-auto

Transitions & Transforms

Smooth animations and transform helpers. Hover the boxes to see effects.

Scale

Lift

Color

Fade

Available Classes

Class	Applies
`.n-transition`	all properties
`.n-transition-colors`	color, bg, border
`.n-transition-shadow`	box-shadow
`.n-transition-transform`	transform

Class	Duration
`.n-duration-75`	75ms
`.n-duration-150`	150ms (default)
`.n-duration-300`	300ms
`.n-duration-500`	500ms

Helpers

Miscellaneous utility classes for common needs.

Class	Purpose
`.n-sr-only`	Visually hidden, accessible to screen readers
`.n-pointer`	cursor: pointer
`.n-select-none`	Prevent text selection
`.n-select-all`	Select all text on click
`.n-img-fluid`	Responsive image (max-width: 100%)
`.n-img-cover`	Cover its container (object-fit: cover)
`.n-clearfix`	Clear floated children