Search documentation...

K

Getting Started

Introduction Installation Typography Theming Colors Magic

Installation

React Router Next Vite

Components

Accordion Alert Dialog Anchor Avatar Banner Button Button Group Checkbox Command Dialog Icon Button Inline Code Input

Magic

React Router

Install and configure natmfat for React Router (v7).

The following guide is for Tailwind v4.

1
Create project
Create a React Router (v7) project in "framework" mode.
```
pnpm create react-router@latest
```
2
Install natmfat
```
pnpm add natmfat
```
3
Add fonts
Fonts are not included in the natmfat package. We recommend using Google Fonts. Note that applying a data-theme attribute somewhere (preferably the body) or using a ThemeProvider is required for styles to appear.
```
import { fonts } from "natmfat/integrations/remix";

export const links: LinksFunction = () => fonts;
```
4
Setup TailwindCSS
I highly recommend using TailwindCSS to create layouts and apply basic styles to components. After installing TailwindCSS, you must overwrite the app.css file with our own custom styles. natmfat already ships with a version of preflight, so re-including it is unnecessary and may create visual inconsistencies. Our recommended TailwindCSS config gives you access to natmfat colors and applies TailwindCSS classes with maximum precedence.
```
@import "tailwindcss";
@import "natmfat/styles/reset.css"; /* Do not include if using Tailwind */
@import "natmfat/styles/core.css";
@config "natmfat/integrations/tailwind.config";
```

5

Setup Vite

natmfat imports CSS modules directly within components, so you may need to add this to your Vite config.

import { defineConfig } from "vite";

export default defineConfig({
  // ... rest of config
  ssr: {
    noExternal: ["natmfat"],
  },
});

On This Page