Getting Started
Learn how to install and use NoUi components in your React application. Get up and running in minutes with our comprehensive guide.
Quick Links
Installation
1Install the Package
Use your preferred package manager to install NoUi components
npm install @noui/componentsyarn add @noui/componentspnpm add @noui/components2Import Components
Import the components you need into your React application
import { Button, Modal, Input } from "@noui/components";3Use in Your App
Start using components in your JSX code with full TypeScript support
export default function App() {
return (
<div>
<Button variant="primary" size="lg">
Click me
</Button>
</div>
);
}Key Features
React Ready
Built specifically for React 18+ with hooks and modern patterns
TypeScript First
Full TypeScript support with complete type definitions and IntelliSense
Accessible
WCAG 2.1 compliant with ARIA attributes and keyboard navigation
Dark Mode
Built-in dark mode support with automatic theme switching
Responsive
Mobile-first design that works seamlessly on all devices
Zero Config
Works out of the box with sensible defaults and minimal setup
Available Components
Explore our comprehensive collection of 16 production-ready components
Best Practices
Import Only What You Need
Use tree-shaking by importing specific components instead of the entire library to reduce bundle size and improve performance.
Leverage TypeScript
Take advantage of full TypeScript support for better type safety, autocomplete, and developer experience.
Customize with CSS Variables
Use CSS custom properties to customize colors, spacing, and other design tokens to match your brand.
Ensure Accessibility
Always provide proper labels, ARIA attributes, and keyboard navigation for accessible interfaces.
Ready to Build?
Start exploring our component library and build beautiful, accessible user interfaces in minutes.