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

I highly recommend using TailwindCSS with natmfat, which will enable you to easily modify existing components. Admittedly, you must set important to true because this library uses CSS modules and layers (all of which will have greater precedence compared to a random Tailwind class name).

natmfat remaps the standard Tailwind classes to more sensible defaults that match the design system. This includes shadows, border radius, and colors.

import { tailwindConfig } from "natmfat/integrations/tailwind";
import type { Config } from "tailwindcss";

export default {
  content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
  plugins: [],
  ...tailwindConfig,
} satisfies Config;

@todo: tokens do not take tailwind opacity into account, fix that

Layers

natmfat also exports its layers in case you want to create your own ccomponents.

@todo guidance on layers & skipping w/ interactive/colorway

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

/* must import so PostCSS knows what precedence to assign each layer */
/* @layer theme, ..., override; */
@import url("natmfat/styles/layers.css");

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

/* override component completely  */
@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