DEV Community

Marek Jóźwiak
Marek Jóźwiak

Posted on

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

Nocta UI Thumbnail

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

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

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

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

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

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

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

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.

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

Top comments (0)