DEV Community

Umar Alimov
Umar Alimov

Posted on

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

#nextjs #react #tailwindcss #webdev


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.

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
Enter fullscreen mode Exit fullscreen mode

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

npx nexoreui create my-app
Enter fullscreen mode Exit fullscreen mode

Workflow B: Standard NPM Package

If you prefer importing components directly from node_modules:

npm install nexoreui framer-motion lucide-react clsx tailwind-merge
Enter fullscreen mode Exit fullscreen mode 
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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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:

  1. 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.
  2. 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:

  1. How does the live multi-device preview in /templates perform on your machine?
  2. 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!

Top comments (0)