Fomantic UI

Fomantic UI is an open-source CSS framework — the official community fork of Semantic-UI — for building responsive websites with concise HTML and intuitive JavaScript.

What is Fomantic UI?

Fomantic UI is the official community fork of Semantic-UI, created to continue active development of the popular framework. It takes plain HTML markup and applies semantic class names to produce styled, responsive UI components and page layouts directly in the browser. The framework is distributed as npm packages (fomantic-ui, fomantic-ui-css, fomantic-ui-less, and the third-party fomantic-ui-sass), and it is maintained by the open-source Fomantic community, with sponsorship from BrowserStack and JetBrains.

Key Features

• Concise HTML — UI elements are constructed using semantic class names, reducing the need for custom CSS and JavaScript.
• Responsive by default — layouts scale on multiple devices; supported browsers include Chrome >= 88, Edge >= 88, Safari >= 14.1, Firefox >= 82, Opera >= 75, Samsung Internet >= 15, iOS >= 14.1, and Android >= 8.
• Interactive installer — the npm package includes a command-line installer that guides you through project setup.
• Theming system — a dedicated theming guide explains how to customize site variables and component styles to fit your brand.
• Multiple distribution formats — install the full framework, a CSS-only build, a LESS source version, or a SASS port (third-party), depending on your build toolchain.
• Nightly builds — npm install fomantic-ui@nightly provides early access to new features and bug fixes.
• Community support — get help via the official Discord server, Twitter account, or GitHub issues.
• Open source — the project is public under an open-source license, with a contributing guide and code of conduct.

Who is it for?

• Front-end developers — build responsive component-based UIs quickly by using Fomantic's classes instead of writing custom CSS.
• Designers and themers — use the theming guide to adjust the visual language of a project to match a design system.
• Teams already using Semantic-UI — migrate to this actively maintained fork to keep receiving updates and fixes.
• Open-source contributors — submit bug reports, enhancements, and pull requests following the contributing guide.

What can you do with Fomantic UI?

• Build a responsive marketing site — combine navigation, forms, and layout classes to assemble a mobile-friendly front end.
• Rapid-prototype an MVP — install the npm package, run the interactive installer, and start styling components within minutes.
• Theme a product's UI — use the theming guide to define brand colors and component variations across an app.
• Choose a packaging format — adopt the CSS, LESS, or SASS distribution that integrates with your existing build system.

How does Fomantic UI work?

Install the framework with npm install fomantic-ui, then run the interactive installer to configure your project. For customization, read the getting started and theming guides on fomantic-ui.com. The framework requires no build step for the CSS version, while LESS and SASS packages expect you to compile them with your preferred preprocessor.

Pricing

Fomantic UI is free and open-source. The npm packages are available at no cost, and nightly builds are also freely installable via the @nightly tag.

Alternatives

• Bootstrap — a component framework with a larger built-in JavaScript plugin ecosystem.
• Tailwind CSS — a utility-first CSS framework that takes a different approach by styling via utility classes directly in markup.

FAQ

Is Fomantic UI free?

Yes, Fomantic UI is open-source and freely available through npm. The packages are free to install and use, and the source code is public on GitHub.

How do I install Fomantic UI?

Run npm install fomantic-ui in your project. For the latest unreleased features, use npm install fomantic-ui@nightly. After installation, an interactive installer helps with setup.

What browsers are supported?

Fomantic UI supports modern browsers: Chrome and Edge at least version 88, Safari at least version 14.1, Firefox at least version 82, Opera at least 75, Samsung Internet at least 15, iOS at least 14.1, and Android at least 8.

What is the difference between Fomantic UI and Semantic-UI?

Fomantic UI is the official community fork of Semantic-UI, created to continue development after the original project stalled. The Fomantic team intends to merge changes back into Semantic-UI once active development resumes. The current focus is on Fomantic UI v3.

How can I contribute to Fomantic UI?

Read the Contributing Guide and Code of Conduct, then submit issues or pull requests on the GitHub repository. For bug reports, create a reproducible example using the linked JSFiddle boilerplate.