Remix / React Router

Install and configure NNUI-KIT for Remix and React Router v7 with web standards and native form participation.

Create project

Create a new Remix project:

Terminalbash

npx create-remix@latest my-app
cd my-app

Install NNUI-KIT

Install the package from npm:

Terminalbash

npm install nnuikit

Link Stylesheets in root.tsx

Export a links function in app/root.tsx to load NNUI design tokens:

app/root.tsxtsx

import type { LinksFunction } from '@remix-run/node'
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'

// 1. Import NNUI design tokens stylesheet URL
import nnuiTokensStyles from 'nnuikit/tokens/theme.css?url'

export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: nnuiTokensStyles },
]

export default function App() {
  return (
    <html lang="en" data-theme="dark">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

Add components to your route

Use typed React components from nnuikit/react in your route files:

app/routes/_index.tsxtsx

import { Button, Card, Input, Badge } from 'nnuikit/react'

export default function Index() {
  return (
    <main style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '2rem' }}>
      <Card style={{ width: '100%', maxWidth: '440px', padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h1 style={{ margin: 0, fontSize: '1.35rem', fontWeight: 700 }}>Remix + NNUI-KIT</h1>
          <Badge variant="info">Remix</Badge>
        </div>

        <p style={{ margin: 0, color: 'var(--ui-text-secondary, #a1a1aa)', fontSize: '0.875rem' }}>
          Full web standards compliance. Native Light-DOM form participation works out of the box with Remix Actions.
        </p>

        <Input placeholder="Search records..." />

        <Button variant="primary">
          Search
        </Button>
      </Card>
    </main>
  )
}

Run development server

Start the Remix development server:

Terminalbash

npm run dev

← All Frameworks Explore All Components →