Skip to main content
ninna-ui
React Router v7

React Router v7 Component Library

Ninna UI is the best Tailwind CSS v4 component library for React Router v7 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 v7 + Ninna UI

Here's why Ninna UI is the perfect component library for your React Router v7 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 v7

Setting up Ninna UI with React Router v7 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 v7 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 v7 + 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

Astro Component Library

Compare UI Libraries

Learn more about React Router v7