Skip to main content
ninna-ui
React Router

React Router Component Library

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

React Router (v7 framework mode)

React Router v7 has evolved from a routing library into a full-stack React framework. With server-side rendering, loaders, actions, and nested layouts, it's a powerful alternative to Next.js for building modern React applications.

React Router + Ninna UI

Here's why Ninna UI is the perfect component library for your React Router project:

Built with React Router — Ninna UI's own documentation site uses React Router v7 in framework mode.

Perfect loader/action compatibility — CSS-only theming works seamlessly with React Router's data loading patterns.

Nested layouts work naturally — no provider wrappers to worry about in layout hierarchies.

Full SSR support — CSS theme imports resolve at build time, zero hydration issues.

Compatible with React Router's lazy loading and code splitting — tree-shakeable imports.

Install Tailwind CSS and Ninna UI for React Router

Setting up Ninna UI with React Router takes just a few minutes.

1

Install Ninna UI in your React Router project:

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

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

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

Use components in your routes:

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


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

Example

Here's what a React Router app looks like with Ninna UI — clean, minimal, no wrappers:

// app/root.tsx — zero providers needed
import "./app.css";
import { Outlet } from "react-router";


export default function Root() {
  return (
    <html lang="en">
      <body>
        <Outlet />
      </body>
    </html>
  );
}

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 React Router + 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

Next.js Component Library

Vite Component Library

Remix Component Library

Compare UI Libraries

Learn more about React Router