Search documentation...

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

Logo

Next.js

Install and configure natmfat for Next.js.

The following guide is for Tailwind v4.

1
Create project
Create a Next.js project. Choose any configuration.
```
pnpm create next-app@latest
```
2
Install natmfat
```
pnpm add natmfat
```

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 { IBM_Plex_Mono, IBM_Plex_Sans } from "next/font/google";

const fontMono = IBM_Plex_Mono({
weight: ["400"],
subsets: ["latin"],
variable: "--font-family-code",
});

const fontSans = IBM_Plex_Sans({
weight: ["400", "500", "600"],
subsets: ["latin"],
variable: "--font-family-default",
});

export default function RootLayout() {
    return (
      <body
        className={`${fontSans.variable} ${fontMono.variable} antialiased`}
        data-theme="dark"
      ></body>
    )
}

4
Setup TailwindCSS
I highly recommend using TailwindCSS to create layouts and apply basic styles to components. After installing TailwindCSS, you must overwrite the globals.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";
```

React Router Vite

On This Page