@nofinite/nuicss

v1.0.0

Published

15 days ago

0High
0Medium
0Low

suyashdas

nofinite nuicss css utility-css design-system styling

NUI CSS

A zero-config, semantic utility CSS framework designed for modern web applications and effortless runtime theming.

Overview

NUI CSS provides a highly optimized, ahead-of-time (AOT) compiled utility class engine. It completely eliminates build-step complexities and solves the "dark mode class soup" by leveraging semantic CSS variables. Build beautiful, responsive layouts without ever touching a configuration file.

Zero-Config: Pure CSS. No PostCSS, no configuration files, and no JavaScript build steps required. Just link and build.
Semantic Theming: Effortless dark mode and runtime customizability powered by native CSS variables (e.g., bg-surface, text-primary).
Enterprise-Ready: Ships with both a standard version for rapid application development and a collision-proof nui- prefixed version to protect distributed UI components.

Installation

# pnpm
pnpm add @nofinite/nuicss

# npm
npm install @nofinite/nuicss

# yarn
yarn add @nofinite/nuicss

CDN (No build step)

You can use NUICSS directly in your HTML without any package manager or build tools.

Clean version (Standard utilities like .flex and .p-4):

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

Prefixed version (Collision-proof utilities like .nui-flex and .nui-p-4):

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

Quick Start

1. HTML Prototype

Simply link the CSS file from the CDN and start using the utility classes directly in your markup.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NUI CSS App</title>
  <link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/@nofinite/nuicss@latest/dist/index.css](https://cdn.jsdelivr.net/npm/@nofinite/nuicss@latest/dist/index.css)" />
</head>
<body class="bg-surface text-primary p-8">
  
  <div class="max-w-md mx-auto shadow-md rounded-lg p-6 border border-subtle">
    <h1 class="text-2xl font-bold mb-4">Hello NUI CSS</h1>
    <p class="text-muted">Building fast, semantic UIs without the configuration.</p>
  </div>

</body>
</html>

2. React / Modern Bundlers (Next.js, Vite, etc.)

If you installed via a package manager, import the utilities directly into your application's root layer (e.g., layout.tsx, main.tsx, or App.jsx):

// 1. Import the styling engine
import '@nofinite/nuicss'; // Standard clean utilities (.flex, .p-4)
// import '@nofinite/nuicss/prefixed'; // Collision-proof utilities (.nui-flex, .nui-p-4)

// 2. Build your component
export default function App() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-surface p-4">
      <div className="p-8 shadow-lg rounded-xl border border-default w-full max-w-lg">
        <h1 className="text-3xl font-sans font-bold text-primary mb-2">
          Welcome to NUI CSS
        </h1>
        <p className="text-muted mb-6">
          Building fast, semantic UIs without the configuration.
        </p>
        <button className="bg-primary text-inverse px-4 py-2 rounded-md hover:opacity-80 transition-all" onClick={() => window.open("https://opensource.nofinite.com/docs/nuicss", "_blank", "noreferrer")>
          Get Started
        </button>
      </div>
    </div>
  );
}

Documentation

For full setup guides, the complete utility class reference, and theming instructions, read documentation.

License

This project is licensed under the Apache License, Version 2.0.

Feel free to use, modify, and share this project in your applications, products, and services. Attribution is welcome and appreciated, but never required.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme