Search documentation...
K

Getting Started

IntroductionInstallationTypographyThemingColorsMagic

Installation

React RouterNextVite

Components

AccordionAlert DialogAnchorAvatarBannerButtonButton GroupCheckboxCommandDialogIcon ButtonInline CodeInput

Magic

Logo

Vite

Install and configure natmfat for Vite.

The following guide is for Tailwind v4.
  1. 1

    Create project

    Create a Vite project.
    pnpm create vite@latest
  2. 2

    Install natmfat

    pnpm add natmfat
  3. 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.
    <link rel="preconnect" href="https://fonts.googleapis.com" />
<link
    rel="preconnect"
    href="https://fonts.gstatic.com"
    crossorigin="anonymous"
/>
<link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;500;600&display=swap"
/>
  4. 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";
  5. 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"],
  },
});
NextAccordion
On This Page