Infima CSS Framework

0.2.0-alpha.45 verified Sat Apr 25 auth: no javascript

Infima is a UI framework by Facebook focused on content-centric websites, such as documentation or blogs. As of v0.2.0-alpha.45 (pre-1.0, alpha releases), it provides a set of CSS classes for layouts, typography, and components optimized for readability and accessibility. Key differentiators: designed specifically for content sites, built-in dark mode support, and used as the underlying CSS framework for Docusaurus. It has no JavaScript dependencies and can be used as a standalone CSS framework or integrated via PostCSS. Release cadence is irregular as it's still in alpha.

Common errors

error Error: Cannot find module 'infima' ↓

cause Incorrect import: trying to import the package as a JS module instead of a CSS file.

fix

Import a CSS file directly: import 'infima/dist/css/default/default.min.css'; or use @import in CSS.

error Warning: [sass] The infima/dist/css/theme/default.min.css file is deprecated. Please use infima/dist/css/default/default.min.css instead. ↓

cause Using the old theme CSS path which has been deprecated in favor of the default path.

fix

Replace the import path from 'infima/dist/css/theme/default.min.css' to 'infima/dist/css/default/default.min.css'.

error TypeError: Cannot read properties of undefined (reading 'navbar') ↓

cause Trying to use Infima's JavaScript as a module export, e.g., const infima = require('infima/dist/js/index.min.js'); infima.navbar()

fix

Import the JS file as a side-effect only: import 'infima/dist/js/index.min.js'; It does not export anything.

Warnings

breaking Infima v0.2.0-alpha.x has breaking changes vs v0.1.x: class names and CSS variable names changed. ↓

fix Update your HTML classes and CSS variable references. See migration guide at https://infima.dev/docs/migration.

deprecated The infima/dist/css/theme/default.min.css file is deprecated; use infima/dist/css/default/default.min.css instead. ↓

fix Replace 'import "infima/dist/css/theme/default.min.css"' with 'import "infima/dist/css/default/default.min.css"'.

gotcha Import order matters: default theme CSS must come before dark theme CSS, otherwise dark mode overrides may not apply correctly. ↓

fix Import default CSS first, then dark CSS: @import 'infima/dist/css/default/default.min.css'; @import 'infima/dist/css/dark/dark.min.css';

gotcha Infima's JS bundle (index.min.js) is not tree-shakeable and must be imported as a side-effect. Do not assign it to a variable. ↓

fix Use import 'infima/dist/js/index.min.js'; without any default import.

deprecated Using require('infima') does not return a useful object; it returns the package root directory. This may change in future versions. ↓

fix If you need to read package.json, use require('infima/package.json').

Install

npm install infima

yarn add infima

pnpm add infima

Imports

infima/dist/css/default/default.min.css
wrong
```
import infima from 'infima';
```
correct
```
import 'infima/dist/css/default/default.min.css'; // in JS bundle
```
Infima provides CSS files; you must import the CSS file directly, not the package name. The default theme is at this path. Alternatively, use 'infima/dist/css/default/default.css' for unminified.
infima/package.json
wrong
```
const infima = require('infima'); // infima is not a JS module
```
correct
```
const pkg = require('infima/package.json'); // to check version
```
Infima does not export a JS module; require('infima') returns the package directory, not a useful API. Access only static files like CSS, or read package.json for version info.
infima/dist/css/dark/dark.min.css
wrong
```
import 'infima/dist/css/dark/dark.css'; // no error but unminified
```
correct
```
import 'infima/dist/css/dark/dark.min.css'; // dark theme overrides
```
The dark theme CSS is separate; you must import both default and dark CSS for full dark mode support, but order matters: default first, then dark.
infima/dist/js/index.min.js
wrong
```
import infima from 'infima/dist/js/index.min.js';
```
correct
```
import 'infima/dist/js/index.min.js'; // includes JS behavior
```
The JS file is a bundle with no default export. Import it for side effects only (e.g., mobile menu toggles). It is not tree-shakeable.

Quickstart

Shows how to install Infima, import default CSS, and use basic navbar and markdown content classes.

/* 1. Install: npm install infima@0.2.0-alpha.45 */
/* 2. In your CSS or JS entry point: */
@import 'infima/dist/css/default/default.min.css';
@import 'infima/dist/css/theme/default.min.css'; /* optional theme */

/* 3. HTML usage: */
<nav class="navbar">
  <div class="navbar__inner">
    <div class="navbar__items">
      <a class="navbar__brand" href="/">
        <img src="/img/logo.svg" alt="Logo" class="navbar__logo" />
        <span class="navbar__title">My Site</span>
      </a>
    </div>
    <div class="navbar__items navbar__items--right">
      <a class="button button--secondary button--sm" href="/about">About</a>
    </div>
  </div>
</nav>
<main class="container">
  <article class="markdown">
    <h1>Hello World</h1>
    <p>This is a content-centric website built with Infima.</p>
  </article>
</main>