{"id":18445,"library":"infima","title":"Infima CSS Framework","description":"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.","status":"active","version":"0.2.0-alpha.45","language":"javascript","source_language":"en","source_url":"https://github.com/facebookincubator/infima","tags":["javascript","css","responsive","front-end","framework","web","dark mode"],"install":[{"cmd":"npm install infima","lang":"bash","label":"npm"},{"cmd":"yarn add infima","lang":"bash","label":"yarn"},{"cmd":"pnpm add infima","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Autoprefixer compatibility; usually consumed via PostCSS pipeline.","package":"browserslist","optional":true},{"reason":"Needed for vendor prefixing when building the CSS; optional if using precompiled CSS.","package":"autoprefixer","optional":true}],"imports":[{"note":"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.","wrong":"import infima from 'infima';","symbol":"infima/dist/css/default/default.min.css","correct":"import 'infima/dist/css/default/default.min.css'; // in JS bundle"},{"note":"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.","wrong":"const infima = require('infima'); // infima is not a JS module","symbol":"infima/package.json","correct":"const pkg = require('infima/package.json'); // to check version"},{"note":"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.","wrong":"import 'infima/dist/css/dark/dark.css'; // no error but unminified","symbol":"infima/dist/css/dark/dark.min.css","correct":"import 'infima/dist/css/dark/dark.min.css'; // dark theme overrides"},{"note":"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.","wrong":"import infima from 'infima/dist/js/index.min.js';","symbol":"infima/dist/js/index.min.js","correct":"import 'infima/dist/js/index.min.js'; // includes JS behavior"}],"quickstart":{"code":"/* 1. Install: npm install infima@0.2.0-alpha.45 */\n/* 2. In your CSS or JS entry point: */\n@import 'infima/dist/css/default/default.min.css';\n@import 'infima/dist/css/theme/default.min.css'; /* optional theme */\n\n/* 3. HTML usage: */\n<nav class=\"navbar\">\n  <div class=\"navbar__inner\">\n    <div class=\"navbar__items\">\n      <a class=\"navbar__brand\" href=\"/\">\n        <img src=\"/img/logo.svg\" alt=\"Logo\" class=\"navbar__logo\" />\n        <span class=\"navbar__title\">My Site</span>\n      </a>\n    </div>\n    <div class=\"navbar__items navbar__items--right\">\n      <a class=\"button button--secondary button--sm\" href=\"/about\">About</a>\n    </div>\n  </div>\n</nav>\n<main class=\"container\">\n  <article class=\"markdown\">\n    <h1>Hello World</h1>\n    <p>This is a content-centric website built with Infima.</p>\n  </article>\n</main>","lang":"css","description":"Shows how to install Infima, import default CSS, and use basic navbar and markdown content classes."},"warnings":[{"fix":"Update your HTML classes and CSS variable references. See migration guide at https://infima.dev/docs/migration.","message":"Infima v0.2.0-alpha.x has breaking changes vs v0.1.x: class names and CSS variable names changed.","severity":"breaking","affected_versions":">=0.2.0-alpha.0"},{"fix":"Replace 'import \"infima/dist/css/theme/default.min.css\"' with 'import \"infima/dist/css/default/default.min.css\"'.","message":"The infima/dist/css/theme/default.min.css file is deprecated; use infima/dist/css/default/default.min.css instead.","severity":"deprecated","affected_versions":">=0.2.0-alpha.30"},{"fix":"Import default CSS first, then dark CSS: @import 'infima/dist/css/default/default.min.css'; @import 'infima/dist/css/dark/dark.min.css';","message":"Import order matters: default theme CSS must come before dark theme CSS, otherwise dark mode overrides may not apply correctly.","severity":"gotcha","affected_versions":">=0.2.0-alpha.0"},{"fix":"Use import 'infima/dist/js/index.min.js'; without any default import.","message":"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.","severity":"gotcha","affected_versions":">=0.2.0-alpha.0"},{"fix":"If you need to read package.json, use require('infima/package.json').","message":"Using require('infima') does not return a useful object; it returns the package root directory. This may change in future versions.","severity":"deprecated","affected_versions":">=0.2.0-alpha.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Import a CSS file directly: import 'infima/dist/css/default/default.min.css'; or use @import in CSS.","cause":"Incorrect import: trying to import the package as a JS module instead of a CSS file.","error":"Error: Cannot find module 'infima'"},{"fix":"Replace the import path from 'infima/dist/css/theme/default.min.css' to 'infima/dist/css/default/default.min.css'.","cause":"Using the old theme CSS path which has been deprecated in favor of the default path.","error":"Warning: [sass] The infima/dist/css/theme/default.min.css file is deprecated. Please use infima/dist/css/default/default.min.css instead."},{"fix":"Import the JS file as a side-effect only: import 'infima/dist/js/index.min.js'; It does not export anything.","cause":"Trying to use Infima's JavaScript as a module export, e.g., const infima = require('infima/dist/js/index.min.js'); infima.navbar()","error":"TypeError: Cannot read properties of undefined (reading 'navbar')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}