Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Sep 21 15:26
    layershifter commented #4066
  • Sep 21 15:25
    layershifter commented #4066
  • Sep 21 14:55
    bguillou edited #4066
  • Sep 21 14:53
    namezero commented #4066
  • Sep 21 14:52
    bguillou edited #4066
  • Sep 21 14:51
    welcome[bot] commented #4066
  • Sep 21 14:51
    bguillou opened #4066
  • Sep 21 08:46
    ThiefMaster opened #4065
  • Sep 18 15:00
    callain commented #4061
  • Sep 18 14:17
    layershifter commented #4061
  • Sep 18 13:51
    layershifter commented #4061
  • Sep 18 13:46
    callain commented #4061
  • Sep 18 13:25
    callain commented #4061
  • Sep 18 09:46
    callain commented #4061
  • Sep 18 09:30
    layershifter commented #4061
  • Sep 18 09:16
    layershifter commented #4061
  • Sep 18 09:15
    callain commented #4061
  • Sep 18 09:15
    callain commented #4061
  • Sep 18 09:12
    layershifter commented #4061
  • Sep 18 08:58
    callain commented #4061
Levi Thomason
Hey folks, the repo should be visible now. There was an issue with the public/private setting for a moment. It is now public and will remain so :thumbsup:
Also, for questions regarding the state of the project, it is still active. It will not be deprecated nor drop support. A new release just went out this weekend. Semantic UI React is in a slower phase of development than it has been but not on its way out. I will continue iterating on it, fixing issues, and tackling the larger picture goals for the project. Cheers and happy holidays :beers:
Is it intended behavior for a sidebar component with the direction: bottom prop to create scrollable empty space under the the pusher when the sidebar is closed?
The "transitions" example on the semantic react page shows what I am seeing if you select the "bottom" direction.
I'm trying to implement a full page vertical sidebar, but I'm having trouble getting it to push my sticky menu bar and page footer as well as my main page content
Darshan Talati
Hello - I am getting started with Semantic-UI implementation in react and found this example project link on github README -
This link doesn't seems to be working.
Is there a different link that I can take a look at the webpack example?
Grigor Yeghiazaryan
Hi all! Is there a way to get a horizontal accordion with with Semantic UI React?
Javier Castro
I need to customize my Progress label: by looking on the sources, i see that providing children, wraps on <div className='label'>
also, providing content does the same wrapping <div className='label'>
also, providing label would apply defaultProps: { className: 'label' }
how can i avoid that className: "label" on the contents ?
Ryan Taylor

Our team would like to use fonts from Font Awesome Pro with the Semantic UI React Icon component. I have it kind of working but the sizes are slightly off and I wonder if there is a better way... here was my approach...

import { faHurricane } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

<Button icon={<FontAwesomeIcon icon={faHurricane} />} />

This is one button in a group. However, what I found is that the icon size is slimmer than it is than when I use a stock (i.e., free) font awesome icon that is baked into Semantic UI React itself.

Is this the recommended way to use Pro fonts in Icon components?

hey, I am looking for a way to specify a custom onMouseEnter on Rating.Icon but I can't find a way to do this
seems like it is not feasible?
I tried overriding Rating.Icon = function Icon(...props) but to no avail
Ryan Taylor
I'm attempting to create a function component that takes another component (an input) and adds a label to the upper left of the input that shows the number of characters currently typed into the input and the max number of allowed characters. I have a partially working example using Semantic UI React and hooks (link below). However, I would prefer that "FieldWithCounter" was able to determine the props directly from the Input, rather than me specifying them as props. Is there an more elegant solution to this?
Chris Berns
Does anyone have a working solution for a first column locked scrolling table?
Harun Sheikhali
Got a quick question:
Why am I getting this error : UNSAFE_componentWillReceiveProps when I use the pagination component?
import React, { useState, useEffect } from 'react';
import { List, Pagination } from 'semantic-ui-react';

const mockItems = (count) => {
  return new Array(count).fill(0).map(() => Math.floor(Math.random() * 10000));

function PaginationExample(props) {
  const [page, setPage] = useState(1);
  const [itemList, setItemList] = useState([]);
  const itemsPerPage = 5

  useEffect(() => {
  }, []);

  const setPageNum = (evt, { activePage }) => {

  const totalPages = itemList.length / itemsPerPage;
  const renderItems = itemList.slice((page - 1) * itemsPerPage, (page - 1) * itemsPerPage + itemsPerPage);

  return (
    <div className='list-container'>
      <List divided>
        {, idx) => (
          <List.Item key={idx}>{item}</List.Item>
        onPageChange={setPageNum} />

export default PaginationExample;
Sumit Nihalani
Vicenzo Naves
I am starting to study Semantic to evaluate if it will be flexible enough for my company.
Currently I am trying to enhance an data driven menu.
I've settled on the look and feel of Dropdown.Menu.
But I think I've hit a limitation of the display maybe...
I can't nest Dropdown menus.
I get 1 level and that's it.
Is it by design?
Screen Shot 2020-05-07 at 10.13.16 PM.png
For some reason my dropdown text dissapear if I add Link so Im able to redirect see below:
<Dropdown item simple text=' Customers '>
<Dropdown.Item icon='plus' text='Add User' as={Link} to='/users/add/' />
David Constantine
@Kublick You can try as={<Link to="">Add User</Link>}
I noticed that: disabled FormCheckbox, with a Popup as label, will show the popup when standalone, but will not, when wrapped inside Form.
probably intended behavior, no complaint there, but can someone explain why is it so? and is there a workaround?
Dima Lapeto
Hello! I see that Semantic-Org/Semantic-UI-React#3174 is closed and @layershifter has done Semantic-Org/Semantic-UI-React#3734 , but I've already had this problem. Is it really fixed?
Don't use semantic UI.
It's abandoned project, the owner did not pass ownership to anyone for some stupid reasons which led to current situation of great framework being totally not usable.
There is Fomantic UI which is a maintained fork
Dima Lapeto
@murbanowicz thanks! But how can I use Fomantic UI with React?
not sure if possible yet :/
I know, it sucks... such a great project abandoned
at this moment much safer to go with either MUI or Ant
Dima Lapeto
@murbanowicz Ok, finally we haven't all fixes from SUIR github repo in NPM module v.0.88.2? That's right? :((
Gary Berger
Hello all, are there any patterns for Search component such that if an element is not found in the results state one can choose the value input in the text input?
Balla Attila
anyone alive here? :D
Oleksandr Fediashov
@murbanowicz SUIR 1.0.0 was released on the previous week
Guilherme Taschetto
Dropped Semantic-UI for material-ui a long time ago. No regrets. material-ui is a real project and will be for a long time.
Guilherme Taschetto
@vinchbr don't use SUI. go for another library.
Balla Attila

@taschetto If you don't like the lib then how about moving on from here?! Your comments are useless.

I'm making a small hobby project with this right now, noted the following issues:
Progress component has a min-width css property, making it incorrectly display very low or 0% progress.

Tab component doesn't use keys when looping through it's tabs, React doesn't like this.

Somewhere in Tab or Button there is a call to findDOMNode, which is deprecated.

Oleksandr Fediashov

Progress component has a min-width css property, making it incorrectly display very low or 0% progress.

It's intentional and may be confusing, but can be fixed with CSS if you don't like it :)

Tab component doesn't use keys when looping through it's tabs, React doesn't like this.

Do you have an example? Tab component needs API redesign as it's API is confusing, I am slowly working on it.

Somewhere in Tab or Button there is a call to findDOMNode, which is deprecated.

It's deprecated only for StrictMode now, but you're correct. We have a tracking issue for Semantic-Org/Semantic-UI-React#3819 and I am going to push there some updates soon.

@murbanowicz The situation with Semantic UI is not good at all, it's great that community maintains Fomantic UI. Small goal is to fix compatibility issues with Fomantic (Semantic-Org/Semantic-UI-React#4021), bigger - introduce more features that we added recently.
Marco 'Lubber' Wienkoop
The progress 0% issue was fixed in Fomantic-UI by fomantic/Fomantic-UI#625
You may try to use the progress.css from there
Javier Castro
hard to question this on this channel, but which libraries besides material-ui are good alternatives to semantic-ui-react ?

Hi I'm trying to test on change for React Semantic-UI dropdown with

await act(async () => {
    const input = getByTestId("dropdown-test-id").firstChild; // the input field
    await fireEvent.change(input!, { target: { value: 2}})

and the component is <Form.Dropdown />. But this isn't working. Any idea what the fix is?

Oleksandr Fediashov
@ZeroDarkThirty In this case you need to click on a .dropdown to open it and then select .item via click