Architecture.

Under the hood of Nectar UI. A look at the technical decisions, folder structure, and utility functions that power the system.

src/lib/utils.ts

Configuration

Open Source Philosophy
While this is a personal portfolio piece, I treat it as production software. The repository is public to demonstrate proper Git hygiene, semantic versioning, and clean project structure.

Why this stack?
I chose Tailwind v4 for its new zero-runtime engine and CSS variable support.

StylingTailwind v4

MotionFramer Motion

Source Code

Inspect the commit history and typescript config.

Next.js 14 App Router • Public Repo

Colocation Strategy

I follow a strict colocation pattern. Components live in `src/components/ui`, while business logic stays in feature folders. This creates a clear separation between 'The System' (Nectar) and 'The Product'.

The 'cn' Utility

To allow for safe style overrides, every component uses a `cn()` helper that merges Tailwind classes using `clsx` and `tailwind-merge`. This prevents specificity conflicts.

src/lib/utils.ts

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

// The glue that holds the design system together.
// Allows merging default styles with user overrides safely.

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}