natmfat v0.0.25

natmfat

Design system built with CSS Modules and Radix Primitives.

Not open source (yet), but actual documentation coming soon.

• CSS Modules + Class Variance Authority are used to style components and component variants
• Radix Primitives are used to make all components accessible
• Tokens use CSS variables as a source of truth exlusively (this makes it difficult to access raw token values, but makes it easier to swap variables and themes).

Installation

pnpm add natmfat

Usage

Because natmfat imports CSS modules for each component, you must add this to your Vite config.

import { defineConfig } from "vite";

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

Styling

Tailwind (v4)

I highly recommend using TailwindCSS with natmfat, which will enable you to easily modify existing components.

natmfat remaps the standard Tailwind classes to more sensible defaults that match the design system (such as shadows and border radii).

With v4, add the following CSS imports to your main entrypoint.

@import "natmfat/styles/layers.css";
@import "natmfat/styles/core.css";

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);
@config "natmfat/integrations/tailwind.config.ts";

CSS Modules & Layers

If you're just planning on using CSS modules or some other styling solution to modify components, you will need to import the base natmfat styles.

// main.ts
import "natmfat/styles/core.css";

natmfat exports its layers for you to effectively modify components and create themes. PostCSS adds support for layers (I refer you to their documentation on setting it up, but I provide the required packages for clarity).

pnpm add @csstools/postcss-cascade-layers postcss-import -D

In each stylesheet you plan on using the layers, you must import them so PostCSS knows what's up.

/* @layer theme, component, override */
@import "natmfat/styles/layers.css";

/* custom theme */
@layer theme {
  [data-theme="custom-theme"] {
    --primary-default: blue;
  }
}

/* override a component  */
@layer override {
  .button {
    color: blue;
  }
}

Fonts

Fonts are provided by Google Fonts and are not automatically imported.

• IBM Plex Sans
• IBM Plex Mono

// root.tsx for Remix
import { fonts } from "natmfat/integrations/remix";

export const links: LinksFunction = () => fonts;

<!-- index.html -->
<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"
/>

Development

Run the Storybook development server

pnpm run storybook

Build the package, mainly to make sure that it works before publishing a new version.

pnpm run typecheck
pnpm run build:icons
pnpm run build

Publish a new version to NPM. Do not upgrade versions manually, as they are created automatically (you might notice some missing versions on NPM...)

pnpm run release