Skip to main content
ninna-ui
Next.js

Next.js Component Library

Ninna UI is the best Tailwind CSS v4 component library for Next.js projects. 69 accessible React components, CSS-only theming, and zero runtime overhead.

Next.js

Next.js by Vercel is the leading React framework for production. It offers server-side rendering (SSR), static site generation (SSG), API routes, and the App Router architecture for building scalable web applications.

Next.js + Ninna UI

Here's why Ninna UI is the perfect component library for your Next.js project:

Full SSR & RSC compatibility — CSS-only theming means zero hydration mismatches. No useEffect-based theme detection needed.

No 'use client' pollution — Ninna UI's CSS-first approach avoids the client boundary issues that JS theming libraries cause.

Works with App Router and Pages Router — no special configuration for either.

Zero layout shift on theme load — CSS imports resolve at build time, not at hydration.

Tree-shakeable across server and client bundles — only the components you import are included.

Compatible with Next.js middleware, edge runtime, and ISR without any provider setup.

Install Tailwind CSS and Ninna UI for Next.js

Setting up Ninna UI with Next.js takes just a few minutes.

1

Install Ninna UI in your Next.js project:

npm install @ninna-ui/core @ninna-ui/primitives @ninna-ui/forms @ninna-ui/layout
2

Add theme import to your global CSS (app/globals.css):

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

Use components in your Next.js pages:

import { Button, Heading } from "@ninna-ui/primitives";
import { Container } from "@ninna-ui/layout";
import Link from "next/link";


export default function HomePage() {
  return (
    <Container className="py-16">
      <Heading as="h1" size="4xl">Welcome</Heading>
      <Button color="primary" asChild>
        <Link href="/dashboard">Get Started</Link>
      </Button>
    </Container>
  );
}

Example

Here's what a Next.js app looks like with Ninna UI — clean, minimal, no wrappers:

// app/layout.tsx — zero provider wrappers needed
import "@/app/globals.css";


export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}


// No ThemeProvider, no ColorModeProvider, no context setup.
// Just HTML + CSS. That's it.

69 components available

Ninna UI provides a comprehensive set of React components organized into focused packages:

@ninna-ui/primitives

Button, Heading, Text, Badge, Code, Kbd, Avatar

@ninna-ui/forms

Input, Select, Checkbox, Radio, Switch, Slider, Textarea

@ninna-ui/layout

Box, VStack, HStack, Container, Center, Grid, Separator

@ninna-ui/navigation

Tabs, Accordion, Breadcrumb, Pagination, Steps

@ninna-ui/data-display

Card, Table, DataTable, Stat, Timeline, Calendar, Tree

@ninna-ui/feedback

Alert, Toast, Progress, Skeleton, Loading, EmptyState

Browse all components

Start building with Next.js + Ninna UI

One CSS import, zero JavaScript config. Get started in under 60 seconds.

Install Guide Browse Examples

Ninna UI for other frameworks

React Component Library

React Router Component Library

Vite Component Library

Remix Component Library

Compare UI Libraries

Learn more about Next.js