NUI

A robust, accessible, and lightweight React component library designed for modern web applications.

Overview

NUI provides a set of accessible, production-ready components to help you build modern web applications faster. It handles the complex details—like focus management and accessibility—so you can focus on building your product.

• Accessible: WAI-ARIA compliant out of the box.
• Type-Safe: Built with TypeScript for a great developer experience.
• Lightweight: Modular design with zero heavy dependencies.

Architecture

NUI is designed to be completely standalone and zero-config: All component styles, animations, and semantic design tokens are compiled into a single optimized stylesheet at build-time. You do not need to install any external CSS framework or configure UnoCSS/Tailwind to use NUI.

Installation

# pnpm
pnpm add @nofinite/nui

# npm
npm install @nofinite/nui

# yarn
yarn add @nofinite/nui

Quick Start

1. Import Styles

Import the pre-compiled stylesheet once at the root of your application (e.g., main.tsx, _app.tsx, or layout.tsx):

import '@nofinite/nui/styles.css';

2. Add the Provider

Wrap your application in the <NUIProvider> to automatically manage dark mode, theme toggling, and layout state.

import { NUIProvider } from '@nofinite/nui';

function App({ children }) {
  return (
    <NUIProvider defaultTheme="system">
      {children}
    </NUIProvider>
  );
}

3. Use Components

import { Button } from '@nofinite/nui';

export default function MyPage() {
  return <Button variant="primary">Click Me</Button>;
}

Documentation

For full setup guides, component examples, and API references, 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.