Forem: Cihan Koç

Copy-Paste Components vs npm Packages: shadcn/ui vs Ninna UI in 2026

Cihan Koç — Wed, 01 Apr 2026 19:47:48 +0000

The React component library debate used to be straightforward: pick an npm package, install it, use it. Then shadcn/ui arrived and proposed something radical: don't install components - copy them into your codebase.

Two years later, both approaches have proven themselves in production. This article is an honest comparison of the copy-paste model (shadcn/ui) and the npm package model (Ninna UI) - examining the trade-offs that matter at scale.

The Two Models

shadcn/ui: Copy-Paste

You run a CLI command that copies React component source files directly into your project. The components use Radix UI primitives and Tailwind CSS for styling. You own every line of code.

npx shadcn@latest add button dialog select

This creates files in your components/ui/ directory. They're yours. Modify them freely.

Ninna UI: npm Packages

You install packages from npm. Components are consumed as imports. You customize via CSS custom properties, Tailwind utilities, and data-slot CSS selectors - without modifying source code.

pnpm add @ninna-ui/primitives @ninna-ui/overlays @ninna-ui/forms

import { Button } from "@ninna-ui/primitives";
import { Modal } from "@ninna-ui/overlays";
import { Select } from "@ninna-ui/forms";

The Trade-Offs

1. Updates and Maintenance

shadcn/ui:
When a bug is fixed upstream, you have two options:

Re-copy the component (losing your customizations)
Manually apply the patch to your local copy

There's no npm update. No changelog. No semantic versioning. Each project has a unique fork that diverges from upstream over time.

Ninna UI:
Standard npm workflow. pnpm update @ninna-ui/primitives gets you bug fixes, accessibility improvements, and new features - while preserving your customizations (which live in CSS, not in component source).

pnpm update @ninna-ui/primitives
# Changelog at https://ninna-ui.dev/changelog

Verdict: npm packages win for teams that value maintenance predictability. Copy-paste wins for developers who rarely need upstream updates.

2. Customization Depth

shadcn/ui:
You own the code. You can change anything - the component structure, the HTML output, the ARIA behavior, the prop API. There's no abstraction between you and the implementation.

// You can literally rewrite the component
export function Button({ className, ...props }) {
  return (
    <button
      className={cn("my-completely-custom-button-styles", className)}
      {...props}
    />
  );
}

Ninna UI:
You customize via 3 layers without touching source code:

Tailwind utilities - className prop on every component
CSS custom properties - theme tokens (--color-primary, --radius-lg)
data-slot selectors - target any internal element

/* Customize any internal element via CSS */
[data-slot="trigger"] {
  border-radius: var(--radius-full);
  font-weight: 600;
}

[data-slot="content"] {
  animation: slide-down 200ms ease-out;
}

98 data-slot targets cover every customizable element across all 69 components - without forking a single file.

Verdict: shadcn/ui wins for unlimited structural changes. Ninna UI wins for styling customization without the maintenance cost of owning source code.

3. Cross-Project Consistency

shadcn/ui:
Each project gets a unique copy of every component. Over time, these diverge. A Button in Project A is different from Button in Project B. Keeping them synchronized requires manual discipline or a private component library (which is... an npm package).

Ninna UI:
Every project uses the same @ninna-ui/primitives version. Same API, same accessibility, same behavior. Different visual styles via CSS theme presets - but the component contracts are identical.

/* Project A: Default theme */
@import "@ninna-ui/core/theme/presets/default.css";

/* Project B: Ocean theme */
@import "@ninna-ui/core/theme/presets/ocean.css";

/* Same components, different look */

Verdict: npm packages win decisively for multi-project teams and agencies.

4. Dependency Management

shadcn/ui:
Each copied component may depend on specific Radix UI packages. A typical shadcn/ui project accumulates 10-15+ Radix packages:

{
  "@radix-ui/react-dialog": "^1.x",
  "@radix-ui/react-dropdown-menu": "^2.x",
  "@radix-ui/react-select": "^2.x",
  "@radix-ui/react-tooltip": "^1.x",
  "@radix-ui/react-popover": "^1.x",
  "@radix-ui/react-accordion": "^1.x",
  "class-variance-authority": "^0.7",
  "cmdk": "^1.x",
  "lucide-react": "^0.x"
  // ... more for each component
}

You manage version compatibility yourself. When Radix releases a breaking change, you update each component individually.

Ninna UI:
Radix is an internal implementation detail. You never import it. You never manage its versions. Ninna UI wraps 11 Radix primitives behind clean interfaces:

{
  "@ninna-ui/primitives": "^0.4.1",
  "@ninna-ui/overlays": "^0.4.1",
  "@ninna-ui/forms": "^0.4.1"
}

Three dependencies instead of fifteen. Radix version management is Ninna UI's responsibility, not yours.

Verdict: npm packages win for dependency hygiene. Copy-paste forces you to be a Radix version manager.

5. Bundle Size

shadcn/ui:
You only include the components you use, and since they're local files, tree-shaking is perfect. No unused code reaches the bundle.

However, each component pulls its own Radix dependency, and multiple components may include overlapping utility code (cn(), cva(), etc.).

Ninna UI:
12 tree-shakeable ESM packages with sideEffects: false. Import only what you use - unused components are eliminated by your bundler.

The theming layer is pure CSS (zero JavaScript), which means your theming overhead is literally 0 KB of JavaScript. shadcn/ui's theming is also CSS-based, so this is roughly equivalent.

Verdict: Roughly equal. Both approaches tree-shake well. Ninna UI has a slight edge because Radix dependencies are deduplicated internally.

6. TypeScript Experience

shadcn/ui:
Types depend on how well you maintain the copied code. Out of the box, components use cva for variant typing, which provides basic prop safety. But types can degrade as you modify components.

Ninna UI:
Full TypeScript generics on every component, maintained by the library team. Generic Select<T>, discriminated union props, strict event handlers:

type Role = "admin" | "editor" | "viewer";

<Select<Role>
  options={[
    { value: "admin", label: "Admin" },
    { value: "editor", label: "Editor" },
  ]}
  onChange={(role) => {
    // role is typed as Role, not string
  }}
/>

Verdict: Ninna UI wins for type depth and consistency. shadcn/ui types are "good enough" but degrade with customization.

7. Accessibility

Both use Radix UI primitives, so the accessibility foundation is identical. The difference is maintenance:

shadcn/ui: When Radix improves accessibility (new ARIA patterns, better screen reader support), you must manually update your copied components to benefit.

Ninna UI: Accessibility improvements ship via npm update. You get them automatically.

Verdict: Equivalent at install time. Ninna UI wins over time because updates are automatic.

Decision Framework

Choose shadcn/ui if:

You're a solo developer or small team
You want unlimited structural control over components
You rarely need upstream updates
You're comfortable managing Radix dependencies
You enjoy customizing component internals

Choose Ninna UI if:

You work across multiple projects
You want standard npm maintenance (update, audit, semver)
You prefer CSS customization over source code modification
You want Radix accessibility without managing Radix directly
You need consistent component behavior across your organization

Choose both if:

You want the npm package model for most components
But need to fork specific components for edge cases

Ninna UI's data-slot CSS API means you'll rarely need to fork. But when you do, nothing stops you from copying one component's source and customizing it.

The Bigger Picture

The copy-paste vs npm debate isn't really about shadcn/ui vs Ninna UI. It's about two different philosophies:

Copy-paste says: "Libraries are constraints. Own your code."

npm packages say: "Libraries are leverage. Own your product."

Both are valid. But the npm model has 20 years of proven infrastructure - semantic versioning, changelogs, automated updates, dependency auditing, security patches - that the copy-paste model intentionally abandons.

In 2026, with React Server Components, Tailwind CSS v4, and the increasing complexity of web accessibility requirements, the case for professional-grade npm packages has never been stronger.

Try Ninna UI

npx @ninna-ui/cli init my-app

→ Documentation
→ shadcn/ui vs Ninna UI comparison
→ All library comparisons

TailwindCSS Libraries You Should Know and Use in 2026

Cihan Koç — Fri, 27 Mar 2026 15:51:49 +0000

Tailwind CSS v4 didn't just improve the framework - it reshaped the entire ecosystem around it. The move to CSS-first configuration, the Lightning CSS engine, and native oklch color support have made some libraries more relevant and others obsolete.

This isn't another "top 10 UI kits" list. This is a curated guide to the libraries, plugins, and tools that make Tailwind CSS v4 development genuinely faster and better in 2026.

Component Libraries

Ninna UI - The CSS-First React Library

If you're building with React 19 and Tailwind CSS v4, Ninna UI is the library that was built for this exact stack. 69 accessible components, zero-runtime theming, oklch colors, and a setup that takes literally two lines of CSS.

@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";

What makes it different from every other React component library: no ThemeProvider. Your design system is a CSS file, not a JavaScript object. That means zero hydration cost, instant theme switching, and compatibility with any SSR framework.

12 tree-shakeable packages - install only what you use
Radix UI accessibility internals (zero API leakage)
5 theme presets with oklch perceptual colors
98 data-slot CSS targets for granular customization
Full TypeScript generics on every component

→ ninna-ui.dev

DaisyUI v5 - Semantic CSS Classes

DaisyUI remains the go-to Tailwind plugin for developers who want semantic class names. v5 brought Tailwind v4 compatibility and oklch-based themes. If you're building static sites or prefer CSS-only components, DaisyUI is hard to beat.

→ daisyui.com

shadcn/ui - Copy-Paste Components

The copy-paste model that launched a thousand forks. shadcn/ui gives you full code ownership of Radix + Tailwind components. Great if you want to customize everything, but be prepared to manage updates yourself.

→ ui.shadcn.com

Animation Libraries

Tailwind CSS Animate

The official-feeling animation plugin for Tailwind CSS. Provides utility classes for common CSS animations - animate-in, fade-in, slide-in-from-top, zoom-in, etc. Used extensively by shadcn/ui and other libraries.

<div class="animate-in fade-in slide-in-from-bottom-4 duration-500">
  Content appears with a smooth entrance
</div>

In Tailwind v4, these integrate cleanly with the new @source inline() safelist pattern if you're consuming them from npm.

Framer Motion

Not Tailwind-specific, but Framer Motion remains the gold standard for React animations in 2026. Use it alongside Tailwind for complex gesture-driven and layout animations that CSS alone can't handle.

Motion One

A lightweight alternative to Framer Motion (~3.5KB) built on the Web Animations API. Perfect when you want smooth animations without the bundle weight. Works great with Tailwind's utility classes for initial styling.

Typography & Content

@tailwindcss/typography

The official typography plugin for beautiful prose content. Essential for blogs, documentation, and content-heavy pages. v4 brought simplified configuration:

@plugin "@tailwindcss/typography";

Use the prose class to get beautiful defaults for Markdown-rendered content, with full dark mode support.

Tailwind CSS Container Queries

Container queries landed in all major browsers in 2024, and Tailwind v4 supports them natively with @container variants. This eliminates the need for third-party plugins - just use @container in your CSS or @min-width / @max-width in your Tailwind classes.

Icon Libraries

Lucide React

The community-maintained fork of Feather Icons, Lucide provides 1500+ beautiful SVG icons as React components. Tree-shakeable, consistent 24×24 grid, and perfect with Tailwind's size-* utilities:

import { Search, ArrowRight, Check } from "lucide-react";

<Search className="size-5 text-base-content/60" />

Heroicons

Made by the Tailwind CSS team, Heroicons provides 300+ icons in outline, solid, and mini styles. Slightly smaller set than Lucide but with an extremely consistent visual language.

Phosphor Icons

If you need variety, Phosphor offers 9,000+ icons across 6 weight variations (thin, light, regular, bold, fill, duotone). The React package is tree-shakeable.

Developer Tools

Tailwind CSS IntelliSense (VS Code)

The official VS Code extension is essential. In 2026, it supports Tailwind v4's CSS-first configuration, providing autocomplete and hover previews for @theme values, custom utilities, and @variant definitions.

Prettier Plugin for Tailwind CSS

Automatically sorts your Tailwind utility classes in a consistent, readable order. With v4, the plugin understands the new class naming patterns and works seamlessly.

pnpm add -D prettier-plugin-tailwindcss

Tailwind Merge

When building component libraries, tailwind-merge is essential for resolving class conflicts. It ensures that when a consumer passes className="p-4" to a component that already has className="p-6", the consumer's class wins:

import { twMerge } from "tailwind-merge";

function Button({ className, ...props }) {
  return <button className={twMerge("px-4 py-2 bg-blue-500", className)} {...props} />;
}

Ninna UI uses this internally via a cn() utility (clsx + tailwind-merge).

Form Libraries

React Hook Form + Tailwind

React Hook Form v8 remains the performance king for React forms. Pair it with Tailwind CSS components for a fast, accessible form experience:

import { useForm } from "react-hook-form";
import { Input, Field } from "@ninna-ui/forms";
import { Button } from "@ninna-ui/primitives";

function LoginForm() {
  const { register, handleSubmit } = useForm();
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Field label="Email">
        <Input {...register("email")} placeholder="you@example.com" />
      </Field>
      <Button type="submit" color="primary">Sign In</Button>
    </form>
  );
}

Zod + Form Validation

Zod continues to dominate TypeScript-first schema validation. Combined with React Hook Form's zodResolver, you get end-to-end type-safe forms with zero runtime overhead from the validation layer.

Build Tools

@tailwindcss/vite

The official Vite plugin for Tailwind v4. Zero-config - just add it to your Vite config and import Tailwind in CSS:

import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

@tailwindcss/postcss

For Next.js and other PostCSS-based setups. Same zero-config approach as the Vite plugin.

The 2026 Tailwind Stack

Here's what a modern Tailwind CSS stack looks like in 2026:

Layer	Tool
Framework	React 19 + Next.js 15 / Vite 7 / React Router v7
Styling	Tailwind CSS v4 (`@tailwindcss/vite` or `@tailwindcss/postcss`)
Components	Ninna UI (69 accessible components, CSS-only theming)
Icons	Lucide React (1500+ tree-shakeable icons)
Typography	@tailwindcss/typography
Animation	tailwindcss-animate + Framer Motion (when needed)
Forms	React Hook Form + Zod
DX	Tailwind IntelliSense + Prettier plugin + tailwind-merge

This stack gives you:

Zero runtime theming (CSS custom properties)
WCAG AA accessibility (Radix internals)
Full type safety (TypeScript generics throughout)
Sub-second builds (Lightning CSS engine)
Tree-shakeable everything (ESM packages)

Try the full stack with Ninna UI

Top 5 Free Tailwind Component Libraries in 2026

Cihan Koç — Wed, 25 Mar 2026 20:42:57 +0000

Building a production app shouldn't require a four-figure UI kit license. The Tailwind CSS ecosystem in 2026 has matured to the point where free, open-source component libraries rival-and in many cases surpass-their commercial counterparts.

Here are the 5 best free Tailwind CSS component libraries you can use today, ranked by how well they solve the real problems developers face: accessibility, theming, type safety, and Tailwind v4 compatibility. Of course there are many other good components as well but we will check about Ninna ui, Daisyui, Shadcn ui, Flowbite ui and Preline ui.

1. Ninna UI - Zero-Runtime React Components

GitHub: github.com/ninna-ui/ninna-ui · License: MIT · Stars: Growing fast

Ninna UI is a full React component library purpose-built for Tailwind CSS v4 and React 19. Unlike CSS-only libraries, every component is a real React element with forwardRef, displayName, TypeScript generics, and Radix-powered accessibility.

Why it stands out

The killer feature is zero-runtime theming. Most React UI libraries require a ThemeProvider wrapper that adds JavaScript overhead and hydration cost. Ninna UI eliminates this entirely - your design system is a single CSS import:

@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";

That's the complete setup. No tailwind.config.ts. No ExtraProvider. No createTheme(). Just CSS.

What you get (for free)

69 components across 12 tree-shakeable packages
5 theme presets (Default, Ocean, Sunset, Forest, Minimal) - all oklch-based
WCAG 2.1 AA accessibility on every component
98 data-slot CSS targets for customizing any internal element
700+ tests covering every component
CLI scaffolding - npx @ninna-ui/cli init my-app

import { Button, Badge } from "@ninna-ui/primitives";
import { Modal } from "@ninna-ui/overlays";
import { DataTable } from "@ninna-ui/data-display";

Best for

React teams who want npm-installable, accessible components with native Tailwind CSS v4 theming and zero configuration overhead.

→ Get started · Live examples

2. DaisyUI - The Beloved CSS Plugin

GitHub: github.com/saadeghi/daisyui · License: MIT · Stars: 35k+

DaisyUI v5 is the most popular Tailwind CSS component plugin. It adds semantic class names to Tailwind - btn, card, modal, badge - so you write less utility markup.

Why it stands out

DaisyUI's approach is beautifully simple: it's a Tailwind plugin that adds component classes. Zero JavaScript. Framework-agnostic. Works with any HTML. The 35 built-in themes (now with oklch colors in v5) let you switch design flavors instantly.

Limitations to consider

No accessibility - CSS classes can't add ARIA attributes, manage focus, or handle keyboard navigation
No TypeScript safety - component "APIs" are class name strings
Interactive components require manual JS - dropdowns, modals, selects need your own implementation
Not React-native - you're working with class names, not component props

Best for

Rapid prototyping, static sites, and projects where you handle interactivity and accessibility yourself.

3. shadcn/ui - Copy-Paste Components

GitHub: github.com/shadcn-ui/ui · License: MIT · Stars: 80k+

shadcn/ui popularized a radical idea: instead of installing components from npm, you copy their source code directly into your project. A CLI handles the copying, and you get full ownership of every line.

Why it stands out

The code-ownership model means you can customize anything without fighting library abstractions. Components are built on Radix UI primitives with Tailwind CSS styling, giving you solid accessibility foundations.

Limitations to consider

Manual updates - no npm update. When bugs are fixed upstream, you re-copy or manually patch
Dependency sprawl - each component may pull in specific Radix packages as peer deps
No versioning - no changelogs, no semantic versioning, no migration guides
Per-project forks - every project gets a unique copy, making consistency across projects challenging

Best for

Solo developers or small teams who want complete control and are comfortable maintaining their own component code.

4. Flowbite - Cross-Framework UI Kit

GitHub: github.com/themesberg/flowbite · License: MIT (core) · Stars: 8k+

Flowbite provides Tailwind CSS components in vanilla HTML/JS with official React, Vue, and Svelte wrappers. The free tier is generous, though some advanced components and templates are behind a paid plan.

Why it stands out

If you work across frameworks - React for the app, Astro for the marketing site, Svelte for the dashboard - Flowbite gives you a consistent visual language everywhere. The vanilla core means components work with anything.

Limitations to consider

React wrappers are less polished than the vanilla HTML versions
Accessibility coverage varies by component
Some pro components are paywalled
Tailwind v4 support is still maturing

Best for

Multi-framework teams and projects that need consistent Tailwind components across React, Vue, and Svelte.

5. Preline UI - Large Component Library

GitHub: github.com/htmlstreamofficial/preline · License: MIT · Stars: 5k+

Preline offers 70+ Tailwind CSS components with a vanilla JS plugin approach. It includes a large collection of marketing blocks, application UI, and landing page components.

Why it stands out

Preline has one of the largest free component collections in the Tailwind ecosystem. The marketing-focused blocks (hero sections, pricing tables, feature grids, testimonials) are particularly useful for landing pages.

Limitations to consider

Vanilla JS plugin - not React-native, requires manual integration
Accessibility is partial - not all interactive components have proper ARIA
TypeScript integration limited
Less active maintenance compared to top-tier libraries

Best for

Landing pages, marketing sites, and projects that need a large variety of pre-built sections.

Quick Comparison

	Ninna UI	DaisyUI	shadcn/ui	Flowbite	Preline
Price	Free (MIT)	Free (MIT)	Free (MIT)	Free core	Free (MIT)
Components	69	65+	40+	44+	70+
React-native	✅	❌	✅	Wrapper	❌
Accessibility	WCAG AA	None	Radix-based	Partial	Partial
Tailwind v4	Native	v5 plugin	v3 + v4	Early	v3 + v4
TypeScript	Full	N/A	Good	Partial	Limited
Theming	5 CSS presets + CSS vars	35 themes	CSS vars	CSS vars	CSS vars
Runtime cost	Zero	Zero	Radix runtime	Small JS	Small JS
Updates	`npm update`	`npm update`	Manual copy	`npm update`	`npm update`

———
Every library on this list is free and MIT-licensed. The choice comes down to your stack and priorities:

React + best DX + accessibility → Ninna UI
Any framework + CSS-only simplicity → DaisyUI
Full code ownership → shadcn/ui
Multi-framework consistency → Flowbite
Maximum component variety → Preline

The trend in 2026 is unmistakable: CSS-first theming is winning over JavaScript runtime approaches. Libraries that embrace Tailwind CSS v4's native capabilities - @import configuration, oklch colors, CSS-only dark mode - deliver better performance and simpler developer experience.