Modern React UI Library

NewUI

A modern, developer-first React UI library designed to help teams build beautiful, scalable interfaces faster.

The Story Behind NewUI

NewUI is a modern, developer-first React UI library designed to help teams build beautiful, scalable interfaces faster. This project started from a need for cleaner components, better customization, and an easier workflow compared to existing UI libraries.

I built NewUI with a clear mission: Create a design system that feels beautiful out-of-the-box, yet gives developers full control over customization.

Today, NewUI powers dashboards, landing pages, admin panels, and internal tools — providing a growing library of components, themes, and a CLI for instant integration.

The Problem

Most UI libraries fall short in key areas that matter for modern development

🔒

Too Rigid

Libraries like MUI or Chakra provide components, but customization feels forced or heavy.

📋

Too Manual

Shadcn UI is great, but copying components manually is slow and repetitive, especially when building at scale.

💸

Too Expensive

Tailwind UI offers beautiful designs, but behind a paywall and not code-complete.

🎨

Lacking Design System

Developers want components and a theme engine… not just CSS snippets.

The Solution

NewUI combines the flexibility of Tailwind, the beauty of handcrafted components, and the convenience of an installation CLI

NewUI combines the flexibility of Tailwind, the beauty of handcrafted components, and the convenience of an installation CLI, creating a seamless workflow for building modern interfaces.

NewUI offers:

✓✔ Beautiful, modern components
✓✔ Fully customizable with design tokens
✓✔ CLI support for installing components instantly
✓✔ Full component registry for browsing + previews
✓✔ Accessible, responsive, production-ready code
✓✔ Built with TypeScript and Next.js in mind

Core Features

Comprehensive tools for modern UI development

🧩

Component Library

A growing library of essential UI elements including Buttons, Cards, Inputs & Forms, Modals, Navigation, Sidebar, Tables, Alerts, Avatars, Code blocks, Loaders & Skeleton - each with variants, sizes, and accessibility built-in.

⚡

NewUI CLI

A major DX improvement - npx newui add button instantly installs the component file, style tokens, variants, and types with no manual copy/paste or hunting through docs.

# Install a component

npx newui add button

🎨

Theming System

NewUI uses a token-based design system to control colors, fonts, radius, shadows, and animation presets. Developers can override them via newui.config.ts.

📚

Component Registry

A visual, searchable registry where users can browse components, preview live demos, inspect props, copy code instantly, and install from CLI with one click.

♿

Accessibility

All components are built with accessibility in mind, following WCAG guidelines and ARIA patterns for keyboard navigation and screen readers.

👨‍💻

Developer Experience

Thoughtful type definitions, comprehensive documentation, and a development environment that makes building UIs a pleasure.

Design Philosophy

NewUI follows a clean, modern style built on solid principles

✓

✓ Soft shadows

✓

✓ Beautiful minimal UI

✓

✓ Balanced typography

✓

✓ Delightful micro-animations

✓

✓ Modular architecture

✓

✓ Accessible foundations

Technical Architecture

Built with modern tools for optimal performance and developer experience

Frontend

•React
•Next.js App Router
•MDX for documentation
•Tailwind CSS
•Radix Primitives (optional)

Package Build

•TypeScript
•tsup bundler
•ESM + CJS outputs
•Registry / Docs
•Hosted on Vercel
•Optimized for SEO

Engineering Challenges & Solutions

How I solved complex technical problems during development

Challenge 1: Making components customizable but elegant

✓

Solution:

A token-based system baked into Tailwind config.

Challenge 2: Delivering a CLI that installs coded components

✓

Solution:

Built a Node-based CLI that copies components, injects configs, and updates imports automatically.

Challenge 3: Keeping bundle size small

✓

Solution:

Zero runtime CSS. Everything is generated by Tailwind.

Challenge 4: Ensuring accessibility & keyboard support

✓

Solution:

Used ARIA patterns & Radix primitives as foundations.