Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • 11:44
    Afreeca commented #3977
  • 11:35
    jjavierdguezas commented #3979
  • 11:30
    elias-garcia commented #3979
  • 11:27
    triage-new-issues[bot] labeled #3979
  • 11:27
    welcome[bot] commented #3979
  • 11:27
    jjavierdguezas opened #3979
  • 02:46
    webdestroya commented #3977
  • Jul 07 18:37
    aendrew commented #3361
  • Jul 07 18:35
    aendrew commented #3361
  • Jul 07 15:42
    rafaels-dev closed #3940
  • Jul 07 15:42
    rafaels-dev commented #3940
  • Jul 07 02:54
    webdestroya commented #3978
  • Jul 07 02:38
    triage-new-issues[bot] labeled #3978
  • Jul 07 02:38
    welcome[bot] commented #3978
  • Jul 07 02:38
    webdestroya opened #3978
  • Jul 06 22:06
    triage-new-issues[bot] labeled #3977
  • Jul 06 22:06
    welcome[bot] commented #3977
  • Jul 06 22:06
    Afreeca opened #3977
  • Jul 06 14:44
    amanjainn closed #3976
  • Jul 06 14:19
    codecov-commenter commented #3976
any CMS (content management system) for reference which has been built on semantic UI ?
Hi there..wondering if anyone can assist. I have a dynamically rendered table with a dropdown in each cell (~150 rows) . However when dealing with state changes (on dropdown change) at each index Im having a really laggy UI. My codesandbox example here:
Two panel or three panel layout with search....Any example ....with code...
how to append popup to other dom than the body ?
there is no props in the documentation, maybe a hidden prop?
Vincent de Grandpré
Hi, we have a request for Semantic-UI-React's DropDown. What is needed is to be able the change the appearance of the selected items in a multi-select dropdown. Instead of having the tags shown IN the textbox we need to show them BELOW, and with some custom style. What is the way of getting there and if a development is needed, we can achieve it, but we'd need then to know to process to contribute back.
Here is a screenshot of what we want to do with the DropDowns :
i want a beautiful responsive HTML datatable with search for static data which works offline. Can anyone help me with a good reference?
Marco 'Lubber' Wienkoop
Ramakrishnan S
Hi, What happened to Till yesterday the project was live. But now seems to be removed from github :(
Yeah would really like to know whats going on? repo rename perhaps?
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?