Installation

This guide explains how to install and start using NUI CSS in your project.

NUI CSS can be installed using a package manager or loaded directly through a CDN.

Install via Package Manager

Install the package using your preferred package manager.

npm install @nofinite/nuicss

yarn add @nofinite/nuicss

pnpm add @nofinite/nuicss

After installing the package, import the stylesheet into your application entry point.

import "@nofinite/nuicss"

Once imported, all NUI CSS utility classes become available globally.

Example utilities:

flex
items-center
justify-between
p-4
gap-4
w-full

NUI CSS also provides a prefixed version of all utilities.

Prefixed utilities help avoid class name conflicts when building reusable UI components or libraries.

import "@nofinite/nuicss/prefixed"

Example prefixed utilities:

nui-flex
nui-items-center
nui-p-4
nui-gap-4

Both versions provide identical functionality.

If you prefer not to install the package, you can load NUI CSS directly using a CDN.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@nofinite/nuicss/dist/index.css"
/>

This provides the standard utility classes such as:

flex
items-center
justify-between
p-4
gap-4
w-full

If you are building reusable UI components or libraries, you can load the prefixed utilities.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@nofinite/nuicss/dist/prefixed.css"
/>

This exposes utilities such as:

nui-flex
nui-items-center
nui-p-4
nui-gap-4

The prefixed version prevents style collisions in shared environments.

<div class="flex items-center justify-between p-4">
  <span>Logo</span>

  <nav class="flex gap-4">
    <a>Home</a>
    <a>Docs</a>
  </nav>
</div>

This example creates a simple navigation layout using flex utilities.

Continue to the Setup guide to integrate NUI CSS into your project.