Forem: Marek Jóźwiak

Why I Rewrote Nocta CLI in Rust (Even Though I Didn't Need To)

Marek Jóźwiak — Fri, 17 Oct 2025 21:58:06 +0000

The Backstory

When I first built the Nocta UI CLI, it was a simple JavaScript tool — a few Node scripts that let developers initialize projects, install components, and sync their design tokens. It worked great, and honestly, it didn't need to change.

But like many dev experiments, this rewrite started with curiosity, not necessity.

I'd recently come across how packages like @openai/codex ship native Rust binaries inside an npm package — completely transparent to the end user. You install or run it via npx, and under the hood, you're actually executing optimized compiled code. That idea stuck with me.

Could I make Nocta CLI work the same way — still npm-first, but powered by Rust under the hood?

Turns out, yes.

Introducing the New Nocta CLI

The new CLI lives here:

👉 @nocta-ui/cli on npm
👉 GitHub repo

You can still run it exactly like before:

npx @nocta-ui/cli init
npx @nocta-ui/cli add button card accordion

But now, when you do, you're running native Rust binaries — distributed through npm and executed transparently via a lightweight JavaScript wrapper.

Why Rewrite Something That Worked Fine?

Honestly? Curiosity.

This rewrite wasn't driven by performance bottlenecks or bugs — it was driven by fascination. I wanted to explore what happens when you combine the ergonomics of npm with the performance and reliability of Rust.

And it turned out to be a surprisingly elegant setup.

Under the Hood

The project is now structured as a polyglot monorepo:

.
├── Cargo.lock
├── Cargo.toml
├── crates
│   ├── cli          # Handles commands like init, add, list
│   └── core         # Core logic: config, fs ops, registry, deps
├── js
│   ├── bin/nocta-ui.js   # Tiny Node wrapper around the native binary
│   └── package.json
└── package.json

Here's what happens when you run npx @nocta-ui/cli init:

Node wrapper runs → detects your platform
Loads the right Rust binary → compiled for macOS, Linux, or Windows
Executes native logic — all the heavy lifting (file ops, config parsing, dependency detection) is done in Rust

No crazy runtime setup, no dependencies — just a fast native executable doing its job.

What's New Under the Hood

The CLI still does everything you'd expect:

Initializes new projects
Detects frameworks like Next.js, Vite + React, Tanstack Start or React Router 7
Installs Tailwind v4 tokens
Scaffolds components with their dependencies
Integrates seamlessly with your existing package manager

But now it feels instant. Every command runs with near-zero startup time, thanks to Rust's compiled performance.

The Real Win: Simplicity in Distribution

What made this rewrite truly interesting wasn't the Rust code itself — it was how simple npm makes distributing native binaries once you step outside the "pure JS" mindset.

Each platform gets its own small binary, published alongside the npm package. The JavaScript layer just picks the right one and runs it. No users even notice the difference — except for the speed.

It's a hybrid model that feels… right.

Lessons Learned

Rust + npm is a surprisingly powerful combo.
Native performance can live inside your JS workflow without friction.
And most importantly: rewrites don't always need a reason — sometimes, they're just how we learn.

The Future

This rewrite won't change how developers use Nocta UI — it'll just make their CLI faster, more stable, and easier to maintain.

If you're curious about how native binaries and npm can coexist, check out the repo and peek under the hood:

👉 https://github.com/nocta-ui/nocta-ui-cli

And if you're already using Nocta UI, just keep running the same command:

npx @nocta-ui/cli init

It's the same CLI you know — just rebuilt for fun, and made faster by Rust.

Why I Built Nocta UI: A Developer-First Alternative to shadcn/ui

Marek Jóźwiak — Sat, 05 Jul 2025 11:42:19 +0000

Why I Built Nocta UI: A Developer-First Alternative to shadcn/ui

Building a React component library that puts developer experience and customization first

The Problem That Started It All

Picture this: You're building a beautiful accordion component for your app. You want to add some smooth GSAP animations to make it feel premium. You're using shadcn/ui, which is fantastic, but then you hit a wall.

The accordion component uses Radix UI primitives under the hood.

These primitives are great for accessibility and basic functionality, but they're black boxes. You can't modify their internal behavior. You can't add complex animations. You can't change how they handle state transitions.

I needed my accordion to have sophisticated GSAP animations with custom easing, staggered reveals, and precise timing control. But the Radix primitives were fighting me every step of the way.

That's when I realized: What if we could have the copy-paste philosophy of shadcn/ui, but with components that are truly yours to modify?

Introducing Nocta UI

Nocta UI is a modern React component library that follows the copy-paste approach pioneered by shadcn/ui, but with a crucial difference: every component is built from the ground up for maximum customization.

# Initialize your project
npx nocta-ui init

# Add components to your project
npx nocta-ui add button card accordion

# Components are now in your /components/ui directory
# You own the code and can modify it however you want

The Philosophy: Four Core Principles

Minimal

Clean components with no unnecessary complexity. Every element serves a purpose, every interaction feels natural. We believe in doing less, but doing it perfectly.

Performant

Copy-paste approach with CLI tooling. Components live in your codebase, giving you full control and customization power. No bundle bloat, no version conflicts.

Accessible

WCAG 2.1 AA compliant components with keyboard navigation, screen reader support, and semantic HTML. Accessibility isn't an afterthought—it's built in from the ground up.

Developer First

Full TypeScript support, intuitive APIs, and comprehensive documentation. Components that just work, and when they don't work exactly how you want, you can make them work.

What Makes Nocta UI Different

1. True Source Code Ownership

Unlike libraries that use primitives or complex abstractions, Nocta UI components are built with standard React patterns:

// This is YOUR accordion component after copying
const Accordion = ({ children, className, ...props }) => {
  const [openItems, setOpenItems] = useState(new Set())

  // Want to add GSAP animations? Go ahead!
  // Want to change state management? It's your code!
  // Want to modify accessibility behavior? You control it!

  return (
    <div className={cn("space-y-2", className)} {...props}>
      {children}
    </div>
  )
}

2. Beautiful Design System

Choose from 4 carefully crafted themes during initialization:

Charcoal - Neutral gray theme (default)
Jade - Subtle green theme
Copper - Warm copper theme
Cobalt - Cool blue theme

The CLI automatically adds the complete color palette to your Tailwind config:

<div className="bg-nocta-50 text-nocta-900 border-nocta-200">
  <Button className="bg-nocta-500 hover:bg-nocta-600 text-white">
    Primary Action
  </Button>
</div>

3. Smart CLI with Zero Config

The CLI is built for developer experience:

npx nocta-ui init

⠦ Checking Tailwind CSS installation...
✔ Found Tailwind CSS ^3.4.0 ✓
⠦ Detecting project framework...
✔ Found Next.js 15.0.3 (App Router) ✓

Select a color theme:
  1. Charcoal - Neutral gray theme (default)
  2. Jade - Subtle green theme
  3. Copper - Warm copper theme
  4. Cobalt - Cool blue theme

? Choose your theme: Jade - Subtle green theme
✔ Selected theme: Jade

✔ nocta-ui initialized successfully!

What happens automatically:

Validates Tailwind CSS installation
Detects your framework (Next.js, Vite)
Installs required dependencies (clsx, tailwind-merge, class-variance-authority)
Creates utility functions (@/lib/utils.ts)
Adds design tokens to your Tailwind config
Protects existing files with overwrite confirmation

4. Unlimited Customization

Since you own the component source code, customization is limitless:

// Want to add custom animations? Easy!
const CustomAccordion = ({ children, ...props }) => {
  useEffect(() => {
    // Add your GSAP timeline here
    gsap.timeline()
      .to(".accordion-content", { height: "auto", ease: "power2.out" })
      .to(".accordion-icon", { rotation: 180 }, "<")
  }, [])

  return <Accordion {...props}>{children}</Accordion>
}

// Want to change the styling system? Go for it!
const variants = {
  brand: "bg-purple-600 text-white hover:bg-purple-700",
  danger: "bg-red-600 text-white hover:bg-red-700",
  success: "bg-green-600 text-white hover:bg-green-700",
}

Real-World Usage Example

Here's how you'd use Nocta UI in a real project:

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion"

export default function Dashboard() {
  return (
    <div className="min-h-screen bg-nocta-50">
      <div className="container mx-auto py-8">
        <Card className="border-nocta-200">
          <CardHeader className="bg-nocta-100">
            <CardTitle className="text-nocta-900">Feature Overview</CardTitle>
          </CardHeader>
          <CardContent className="bg-white">
            <Accordion>
              <AccordionItem value="performance">
                <AccordionTrigger className="text-nocta-800 hover:text-nocta-900">
                  Performance
                </AccordionTrigger>
                <AccordionContent className="text-nocta-600">
                  Copy-paste approach means zero bundle bloat and full control.
                </AccordionContent>
              </AccordionItem>
              <AccordionItem value="accessibility">
                <AccordionTrigger className="text-nocta-800 hover:text-nocta-900">
                  Accessibility
                </AccordionTrigger>
                <AccordionContent className="text-nocta-600">
                  WCAG 2.1 AA compliant with keyboard navigation and screen reader support.
                </AccordionContent>
              </AccordionItem>
            </Accordion>

            <div className="mt-6 space-x-4">
              <Button 
                variant="primary" 
                size="lg"
                className="bg-nocta-500 hover:bg-nocta-600"
              >
                Get Started
              </Button>
              <Button 
                variant="outline" 
                size="lg"
                className="border-nocta-300 text-nocta-700 hover:bg-nocta-50"
              >
                Learn More
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

Technical Features

Design System

4 beautiful color themes with automatic dark mode support
Consistent spacing system based on 4px base unit
Typography hierarchy optimized for readability

Performance

Copy-paste approach eliminates bundle bloat
Minimal re-renders with optimized component architecture
Efficient animations and transitions

Accessibility

WCAG 2.1 AA compliant out of the box
Keyboard navigation for all interactive elements
Screen reader support with proper ARIA attributes

Developer Experience

Full TypeScript support with comprehensive type definitions
Intuitive APIs that follow React best practices
Comprehensive documentation with interactive examples
CLI with smart framework detection and zero config setup

Getting Started

Ready to try Nocta UI? Here's how to get started:

# Make sure you have Tailwind CSS installed
npm install -D tailwindcss

# Initialize your project
npx nocta-ui init

# Add your first components
npx nocta-ui add button card accordion

# Start building!

Requirements:

React 18+
Tailwind CSS v3 or v4
TypeScript (recommended)
Node.js 16+

Framework Support:

Next.js (App Router & Pages Router)
Vite + React

The Future of Component Libraries

I believe the future of component libraries lies in giving developers true ownership of their code. Not black box abstractions, not complex primitives you can't modify, but actual source code that you can read, understand, and customize.

Nocta UI represents this philosophy: beautiful, accessible, performant components that are truly yours.

Try It Today

Whether you're building a simple landing page or a complex dashboard, Nocta UI provides the foundation you need with the flexibility you want.

Documentation: https://github.com/66HEX/nocta-ui
CLI Repository: https://github.com/66HEX/nocta-ui-cli
Quick Start: npx nocta-ui init

Have you struggled with component library limitations? What features would you want in a truly customizable component library? Let me know in the comments!

Tags: #react #typescript #tailwindcss #ui #components #accessibility #performance #developer-experience