What's New
An introduction to new features found in the latest release

One big step ahead

Fomantic 2.9 once again includes more than 200 new features, improvements and bugfixes.

The few SUI 2.5.0 fixes, which were not already fixed within the past 4 years in previous Fomantic UI Versions , are included as well

New UI Component


Flyouts are the result of a marriage between Modal and Sidebar.

If you are upgrading from a previous FUI version, be sure to add @flyout to your theme.config to include the flyout component in your code.
$.flyout({ autoShow: true, title: 'Flyout Notice', class: 'wide', closeIcon: true, content: 'Fomantic-UI 2.9.0 was released today!', actions: [{ text: 'Awesome, thanks!', class: 'green', icon: 'save' }] });

New features


New variable@supportIE controls whether IE/old Edge specific CSS Code should be compiled
Only woff/woff2 font files are supported, eot/svg/ttf have been removed
All onShow and onHide callbacks now have cancel support. Returning false from such callbacks will prevent the related module to be shown/hidden
Emoji, Flag and Icon are now build out of LESS-maps which can then be easily overridden or reduced to only the ones needed in your own theme
A11y as well as jQuery short notation$. support for dynamically created modal, toast and the new flyout
Focus trap in modals and flyouts
Dependency to jquery serialize-object in Api was removed. It's now built-in and enhanced.
Added input support for color,week,month,file (see below) and url inputs
All elements can now have their individual color variants
Accordion now has an inverted, basic styled and tree variant and icon can be displayed to the right
Button Groups now supports wrapping and can be spaced
Calendar now supports disabledHours
Table now supports inverted colors
Toast now allows clickable items as content without closing the toast

Bundled Lato Font

The Lato font of the default theme is now bundled and upgraded to 2.0 to also support cyrillic and greek characters. Loading via googleFonts is now disabled by default.

File Inputs

File inputs are supported now

SVG Flags

Flags now use the same SVG icons as Emoji, making them now resizable and added lots of missing countrycodes and other global identifications.

Calendar Token Format

Calendar now supports tokens as string formatter

$('.ui.calendar') .calendar({ formatter: { date: 'DD.MM.YYYY' } }) ;

Icon Update

We have updated the icons to FontAwesome 5.15.4

You can see a list of all the available icons here.

As we optimized the way to reduce the icon list to only those you need in your custom theme via LESS maps, we also released a new version of Create-Fomantic-Icons which supports FUI 2.9.0.

Scrolling and Stuck Table

Tables now support scrolling tbody and stuck columns


Accordion CSS Only

Accordion can now be used without Javascript using the details/summary tag

How many people are working on Fomantic-UI

Many people from the community helped improving Fomantic-UI over the past 4 years. Thanks!

Breaking changes

Installing from npm does not automatically start the building script anymore to make other package managers, like yarn, work.
New default value for rawResponse is true
@tertiaryLinePadding variable was split into @tertiaryVerticalPadding and @tertiaryHorizontalPadding
ampm setting is removed. Use the new token string formatters instead
Legacy v1 box styling (instead of using label in v2) was removed
New default value for showOnFocus is false
New default value for fullTextSearch is 'exact'
New default value for forceSelection is false
@upwardMenuBorderRadius was renamed into @upwardSelectionMenuBorderRadius
Emoji and Flag
The default line height was slightly reduced to match usage inside dropdowns. In case your emojis/flags appear too small, add a size class to them.
New default value for errorFocus is true
"length" rule was removed, use minlength instead
chart line was renamed to chartline
line graph was renamed to linegraph
left icon and right icon have to be declared in exact that class order
onShow and onVisible callbacks have swapped to match the same logic as in all other modules
beforeChange was renamed to onBeforeChange
Behavioris touch was removed
Tabular menus and their related segments have to stay in a dedicated parent node to allow more than two attached segments
When marked cells should also be colored you have to use an additional colored class and follow a fixed class order like red colored right orange marked


More than 80 Bugs were fixed, some important to mention are

Step had double semicolon in font face breaking webpack 5
Dropdown additions were encoded in some cases and broke on mobile
node 15+ / npm 7, yarn, pnpm broke on install
Firefox font gap warning and Firefox 103+ broke Accordion
ScrollLock in sidebar was not working
Pressing Escape-Key in inputs inside modals closed the modal itself

Toasty Emotion

Fomantic 2.8 brings some of the best updates yet including variation feature customization for components, more toast changes and EMOTES and of course A LOT of critical and much needed bug fixes.

Since this is a breaking changes update here is a list of breaking changes:

Context for the beforeSend function now is set to the initialized element instead of the content of stateContext (was already correct in the docs)
New callback onBeforeChange does, what onChange was doing before (being called before changing the date, given the chance to deny the change)
onChange instead is now called after the date was changed
When a month is parsed it is now mapped against the whole month name instead of only the first three characters
A "required" attribute on a select-tag gets removed automatically
When a search entry is not found in the dropdown list and no additions are allowed, the searchterm is now removed on blur
When multiple items are selected set.value() internally provided a wrong additional parameter which probably isn't correctly fetched in an own onChange callback
An existing theme.config needs to have @emoji: 'default'; added to the elements block
New option preventCrossover is set to true by default to avoid range sliders to cross each other avoiding wrongly calculated values
New defaults (progressbar decreases, title uses ui header having a slightly larger font size, shadow, white background, centered icon)
Possible heavy reduce of the created CSS file via dynamic LESS compilation: A new file variation.variables exists to control, which variants of the elements should be created in LESS. Setting some of them to false (in your own site.variables, you don't need to (but of course can) touch the variation.variables files!) By default everything is enabled and every component is rendered in any existing size (just as before)

Sneak peek at some new features


In 2.8 we added lots of new variations and features to the toast component, here is just a few of the amazing new changes.

A Toast created from a DOM element


2.8 introduces the new emoji element with support for all Unicode 12.1 Emoji Characters.

You can find a full list of all emojis here.

Dynamic LESS Compilation

In 2.8 we are introducing a new feature for building custom themes, Dynamic LESS Compilation. This new feature allows you to disable specific variations of components allowing you to generate CSS files which only contain features you require. This makes your custom distribution files much smaller in size speeding up your website

Icon Update

Once again we have updated the icons to FontAwesome 5.11.2

You can see a list of all the available icons here.

Merry Christmas 🎅

Fomantic 2.7 brings lots of new goodies and fixes and just in time for christmas!


With 2019 around the corner and a lot of discussion we (core contributors) have agreed to move our core focus to FUI v3.0. This doesn't mean we won't be working on 2.x but means releases may be slowed down a little due to more work being put into v3.0. You can read more about the future of FUI and v3.0 here


  • With this release we removed the dependency of prompt-sui which removes the child dependency of event-stream this ensures that the library won't be downloading any (now deprecated) malicious code. If you want to learn more about the recent security issues with event-stream please read this issue.
  • In this release we had a big focus on removing a lot of the !important usage which in turn produced lots of issues. Now with a big help from our core contributors we have removed ~85% of the usage and reduced the complexity of a lot of the color code base which makes it easier to make changes and helps reduce the size of the general code base as well as removing duplicate code.

New features


In 2.7 we renamed the range component to slider and also add a lot of new features to play around with.

Labeled & Ticked Sliders

Range Slider (yes an actual range slider)

Vertical Slider

And a lot more, check the release notes to see all slider changes


We have added some new loader styles in 2.7 so your not restricted to a boring spinner



You can also apply all loader modifiers to these loaders


In 2.7 we went colors mad and changed a lot of the code base to make colors more consistent across the framework and to make it so you can define your own colors 🎉

In /globals/colors.less you will find a list of colors which you can tweak to your liking. You can change color values and even rename or add your own colors! You will notice there is a lot of variables like @primaryColor which are located in /globals/site.variables this allows this change to stay backwards compatible.

We also have added a new element called text which allows you to color text with the framework colors via wrapping text in side of a <span>.

As you can see I am red and I am blue.

Oh and you can use inverted colors like this inverted purple and orange text


In 2.7, we can position modals. Default is middle aligned.

$('').modal('show') ;
$('.ui.bottom.aligned.modal') .modal('show') ;

We can open modals that completely overlay the entire screen.

$('.ui.overlay.fullscreen.modal') .modal('show') ;


In 2.7, dropdown module has new variant to display more contents at glance. These could be useful if you have tons of options in dropdown.

One is columnar. We can make dropdown columnar, from three column to five column.

Another is height variation. We can make dropdown long or very long.

Show me classes currently available.


In 2.7, progress now can have multiple bars.

We didn't just stop there we also added a lot of cool new features for other components and addressed lots of bugs. You can find a full list of changes here

Toasty loaders

Fomantic 2.6 brings a new components for handling content loading ui placeholder, as well as a new type of segment used to reserve space for content: ui placeholder segment.

Additionally several important component updates are included in this release.

Modals have been re-architected to use hybrid flex support, falling back to JS positioning for more complex use-cases (or older browsers).
Dropdowns now include a clearable setting for letting users reset dropdowns to its empty state.

We are also introducing the new Toast component

If you are upgrading from a previous SUI version, be sure to add @placeholder & @toast to your theme.config to include the placeholder or toast components in your code.

New UI Component


Placeholders can be used to reduce the jarringness, and perceived load time when loading new content

Simulate Loading
Joined in 2013
Primary Contact
Updated 22 mins ago

Placeholder Segment

Placeholder segments allow you to reserve space in your design for where content is intended to appear. This is useful when a page should prompt a user about its intended functionality, even when no content is present.

No users have been added yet
Add User
Find Country
Add New Country

New Features

Clearable Dropdowns

Now dropdowns can specify that their content can be cleared with clearable: true.

Show me classes currently available.

Improved Flexbox Modals

Although flex-box were introduced in 2.3.0 there were limitations which may have prevented some advanced use-cases. For example, flexbox modals did not support modals that used detachable: false and weren't directly inside dimmer flex containers. Also some flex browsers (IE11) do not support absolutely positioned elements inside flex containers, so multiple overlapping modals could not be used in those cases.

2.4.0 solves this by introducing a hybrid flex system, that will fall back to javascript positioning for browsers or layouts that aren't compatible with flex.

The beginning of something new

Fomantic-UI is starting to mature and we are starting to push bigger and better updates, we hope you like the new Calendar and Range slider modules!

New Components


Range Slider

FontAwesome 5.3.1

We have updated the icons to the newest FontAwesome release

Colored Loaders

More Inverted Components

In 2.5 we made a big push to add more support for inverted components



How artistic!
Elliot Fu

This has been very useful for my research. Thanks as well!

Jenny Hess
Elliot you are always so right :)
Joe Henderson
Dude, this is awesome. Thanks so much
Just now
Elliot Fu posted on his page
Hey there !
Elliot Fu added you as a friend
1 Hour Ago
Choose your shipping options
Enter billing information
Confirm Order
Verify order details
Matt Giampietro
Matthew is an interior designer living in New York.
Joined in 2013 75 Friends
Molly is a personal assistant living in Paris.
Joined in 2011 35 Friends
Elyse is a copywriter working in New York.
Joined in 2014 151 Friends

Horizontal Cards

Matt Giampietro
Matthew is an interior designer living in New York.
Molly is a personal assistant living in Paris.

A new life

With active development slowing down the community has stood up to start a new life for Semantic, welcome to Fomantic-UI.

You can read the release notes here.

New Features

Inverted & basic Primary and Secondary buttons

You can now use primary and secondary basic and inverted buttons.

Tertiary buttons

New tertiary buttons allow for less important buttons

Primary & Secondary colors

Headers, Icons and Cards now all have primary and secondary colors

Primary Header
Secondary Header

Inverted dropdown variation

Dropdowns can now be inverted, they look sweet in inverted segments.

A New Approach

After an extended period of patches, Semantic UI 2.3 marks the return to significant feature changes for the project.

In upcoming Semantic releases we will be releasing more frequently, but with smaller changesets, to make it easier for users to upgrade and adjust to global changes.

New Features

Font Awesome 5.0 & Better Icon Searching

In 2.3 icons now include a full port of Font Awesome 5.0.6, including 929 icons.

Icon categories now match icon categories in Font Awesome's documentation, making it easier to find icons between docs.

Smile Outline
Hand Rock
Hand Paper
Hand Scissors

Semantic UI icon docs now includes a global icon search with easy copy and paste access to html

Global Font Weight Variables

Theming now uses two no global variables @bold and @normal making it easier to modify font weights in a more complex font stack

/* Use some custom font weights */ @bold: 600; @normal: 400;

Local Category Search

You can now use category search with the source option without having to add API callbacks

var categoryContent = [ { category: 'South America', title: 'Brazil' }, { category: 'South America', title: 'Peru' }, { category: 'North America', title: 'Canada' }, { category: 'Asia', title: 'South Korea' }, { category: 'Asia', title: 'Japan' }, { category: 'Asia', title: 'China' }, { category: 'Europe', title: 'Denmark' }, { category: 'Europe', title: 'England' }, { category: 'Europe', title: 'France' }, { category: 'Europe', title: 'Germany' }, { category: 'Africa', title: 'Ethiopia' }, { category: 'Africa', title: 'Nigeria' }, { category: 'Africa', title: 'Zimbabwe' }, ]; $('.local-category.example') .search({ type: 'category', source: categoryContent, searchFields: [ 'title', 'category' ] }) ;

Arrow Alignment on Small Popups

Semantic popups now detects when horizontally aligning the popup on it's arrow is more reasonable than matching edges with a popup.

To use this feature be sure to specify movePopup: false in your settings
$('.centering.example .avatar.image').popup();

Popups Support Multiple Coordinate Systems

Popups now can correctly place elements with two different coordinate systems. These are typically caused by having a parent element with css properties transform or position.

Button is in here


Popup is in here

Button is in here


Popup is in here

/* Activating element is inside #one with different positioning context */ #one { display: block; position: relative; padding: 50px 100px; background-color: #F0F0F0; } /* Popup is inside two with position relative (creating another positioning context) */ #two { display: block; background-color: #E2EAE4; position: relative; top: 10px; padding: 50px 8px; }
$('.complex-popup.example .ui.button') .popup({ movePopup: false, popup: $('.complex-popup.example .popup') }) ;

New Matching Options

In addition, search now includes three tiers of matched results, similar to the options available in dropdown. Fuzzy results now are turned off by the new default fullTextSearch: 'exact'

Query matches the start of field exactly
Query matches any part of field
Query "fuzzy" matches field
$('') .search({ fullTextSearch: 'exact' // only matches exact matches (no fuzzy matching) }) ;

Dimmer Message
Dimmer sub-header