infima

library0.2.0-alpha.45jsnpmunverified

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.

web-framework

npm install infima

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · INFIMA

infima

web-frameworkjavascriptv0.2.0-alpha.45

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

infima/dist/css/default/default.min.css

✓ import 'infima/dist/css/default/default.min.css'; // in JS bundle

✗ import infima from 'infima';

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

✓ const pkg = require('infima/package.json'); // to check version

✗ const infima = require('infima'); // infima is not a JS module

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

✓ import 'infima/dist/css/dark/dark.min.css'; // dark theme overrides

✗ import 'infima/dist/css/dark/dark.css'; // no error but unminified

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

✓ import 'infima/dist/js/index.min.js'; // includes JS behavior

✗ import infima from 'infima/dist/js/index.min.js';

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.

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>

Debug

Known issues

breakingInfima 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.

affects: >=0.2.0-alpha.0

deprecatedThe 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"'.

affects: >=0.2.0-alpha.30

gotchaImport 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';

affects: >=0.2.0-alpha.0

gotchaInfima'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.

affects: >=0.2.0-alpha.0

deprecatedUsing 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').

affects: >=0.2.0-alpha.0

Errors

Common errors & fixes

Error: Cannot find module 'infima'

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.

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

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'.

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

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.

Upgrade

Version history

0.2.0-alpha.45latest on npm

Audit

Dependencies

browserslistoptionalRequired for Autoprefixer compatibility; usually consumed via PostCSS pipeline.

autoprefixeroptionalNeeded for vendor prefixing when building the CSS; optional if using precompiled CSS.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/facebookincubator/infima ↗

packagehttps://www.npmjs.com/package/infima ↗

homepagehttps://infima.dev ↗