Skip to main content
ninna-ui
Remix

Remix Component Library

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

Remix

Remix has merged into React Router v7, bringing its full-stack capabilities — loaders, actions, nested routes, and progressive enhancement — directly into the React Router framework. If you are starting a new project, use React Router v7 in framework mode.

Remix + Ninna UI

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

Progressive enhancement friendly — CSS-only theming works with and without JavaScript enabled.

Loader/action compatible — no provider setup interfering with Remix's data flow patterns.

Nested layouts work naturally — components render correctly in any layout hierarchy.

Full SSR support — zero hydration mismatches because theming is pure CSS.

Remix is now React Router v7 — Ninna UI's own documentation site runs on React Router v7 framework mode, proving full compatibility.

Install Tailwind CSS and Ninna UI for Remix

Setting up Ninna UI with Remix takes just a few minutes.

1

Install Ninna UI in your Remix project:

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

Add theme import to your app CSS:

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

Use components in your Remix routes:

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


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

Example

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

// app/root.tsx — zero providers, just CSS
import "./tailwind.css";
import { Outlet } from "react-router";


export default function App() {
  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 Remix + 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

React Router Component Library

Vite Component Library

Compare UI Libraries

Learn more about Remix