Building NexoreUI v2.0: An Open-Source React 19 & Tailwind CSS v4 Component Library, CLI, and Visual Builder

Umar Alimov — Tue, 27 Oct 2026 16:19:00 +0000

Over the past few months, I have been working on NexoreUI v2.0 — a component library, CLI, and template studio built for Next.js 15, React 19, Tailwind CSS v4, Radix UI, and Framer Motion.

Live Documentation & Playground: nexoreui.site
Interactive Templates Studio: nexoreui.site/templates
Visual Component Sandbox: nexoreui.site/nexoremake
GitHub Repository (MIT): github.com/Al1mov77/NexoreUI

Here is a breakdown of why I built v2.0, the architecture decisions behind it, and what is included right now.

1. The Problem: Why Modern UI Templates Started Looking Identical

If you browse recent SaaS landing pages or AI templates, you quickly notice the same patterns repeated everywhere:

Heavy purple/rainbow blur blobs and glowing borders on every card
Decorative pill badges above every single heading
Animations that ignore prefers-reduced-motion and hurt performance
Hardcoded hex colors that break when switching between light and dark themes

With NexoreUI v2.0, the goal was to build a system where hierarchy comes from typography, proportion, 1px borders, and semantic tokens — so the interface remains clear even if you view it in grayscale, while still supporting rich interactive moments when needed.

2. How the Core Library & CLI Work (MIT Open Source)

Instead of locking you into an opaque dependency, NexoreUI supports two workflows:

Workflow A: Copy-Paste / CLI Source Ownership (Recommended)

You can initialize nexore.json in your project and pull the exact TypeScript component source into your @/components/ui folder:

npx nexoreui init
npx nexoreui add button card dialog tabs table

Or scaffold a new Next.js / Vite + Tailwind CSS v4 project from scratch:

npx nexoreui create my-app

Workflow B: Standard NPM Package

If you prefer importing components directly from node_modules:

npm install nexoreui framer-motion lucide-react clsx tailwind-merge

import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "nexoreui";
import "nexoreui/styles.css";

export default function ClusterStatusCard() {
  return (
    <Card className="max-w-md">
      <CardHeader>
        <CardTitle>Production Deployment</CardTitle>
        <CardDescription>
          Primary region nodes are synced and healthy.
        </CardDescription>
      </CardHeader>
      <CardContent className="flex items-center justify-between">
        <span className="text-xs font-mono uppercase tracking-wider text-muted-foreground">
          12 / 12 nodes active
        </span>
        <Button size="sm">Inspect Logs</Button>
      </CardContent>
    </Card>
  );
}

What's in the Open-Source Core (60+ Components):

Accessible Primitives: Dialogs, Selects, Tabs, Accordions, Tooltips, Checkboxes, Switches, and Sliders built on Radix UI.
Data & Workflow UI: Data Tables, Command Palettes, Steppers, File Uploads, Node Flow Graphs, and AI Prompt Inputs.
Tailwind CSS v4 Native: Configured around semantic CSS variables (--background, --foreground, --card, --border, --muted, --primary) and @theme directives.
Accessible Motion: Every Framer Motion animation checks useReducedMotion() so users who prefer reduced motion see instant, static states without layout shift.

3. Nexore Make: Visual Component Builder in the Browser

Sometimes you don't want to tweak Tailwind classes blindly in your IDE.

Inside the docs, I built Nexore Make — a visual drag-and-drop sandbox where you can:

Reposition layers and adjust padding, border radius, shadows, and borders visually
Preview changes in both Light and Dark mode on a blueprint grid
Export clean TSX / JSX + Tailwind CSS code directly into your clipboard

4. Production Templates: App UI & 240-Frame Canvas Scrubbing

In NexoreUI Templates, every template runs live in an interactive multi-device player (Desktop 1280px, Tablet 768px, Mobile 375px) with live theme switching.

Each template in v2.0 is designed around an Identity Ledger rule — meaning no two templates are allowed to share the same font pairing, surface treatment, layout archetype, and motion signature.

They are split into two main engineering categories:

App UI & CRUD Consoles: Admin dashboards (Nex Core Admin), high-density user tables with FLIP layout transitions, Swagger/OpenAPI form builders, auth flows, and storefronts.
3D & HTML5 Canvas Scroll Scrubbers: Product sheets and editorial showcases that scrub 240-frame video sequences on an HTML5 <canvas> using piecewise-linear scroll mapping and static poster fallbacks for prefers-reduced-motion.

5. What is Free vs. What is Paid (Full Transparency)

I want to be 100% upfront about how the project is licensed:

Free & Open Source (MIT Forever):
- All 60+ core UI components, motion helpers, and node graph components
- The CLI (npx nexoreui init, npx nexoreui add, npx nexoreui create)
- Full interactive browser previews of all templates + 5–10 code exports per session in the Nexore Make visual builder
Optional Lifetime Pro ($39 one-time launch price, no subscription):
- Unlocks full standalone TSX source code and CLI scaffolding (npx nexoreui add <template-slug>, including automatic media/canvas asset downloads) for all 30+ flagship templates
- Unlimited code exports in Nexore Make
- Includes a workspace dashboard with 2 permanent teammate invite links so two other developers on your team get full Pro access at no extra cost

Looking for Feedback

If you are building with Next.js 15 / React 19 / Tailwind CSS v4, I would love to hear your honest technical feedback:

How does the live multi-device preview in /templates perform on your machine?
Are there specific CRUD or data-heavy components you wish component libraries handled better out of the box?

Thanks for reading and checking out the repo!

DEV Community: Umar Alimov