Working with the Semantic UI Component Library

We created a beautiful collection of ready-made components from the Semantic UI component library. These components come complete with all the necessary imports, hooks, states, JSX properties, and styling. You can immediately use them in your project with little to no effort. Additionally, you can see their previews in the Add Elements panel before adding them to other components in your boards.
To add our rich content library to the Add Elements panel, follow these steps:
  1. Start a new project in Codux and add the Semantic UI library.
  2. Install the Semantic UI library's dependencies.
  3. Install the Codux rich content npm package (@codux-boards/react-semantic).
  4. Add the library name to codux.config.json (addPanel/assets key).
  5. Import the library's CSS file through your boards-global-setup.ts file.

1. Start a new project in Codux 

When you start a new project in Codux, you'll be asked which external component libraries you want to add to your project.
Choose Semantic UI to include the ready-made components from this library.

2. Install the Semantic UI library's dependencies 

Install the Semantic UI library and its dependencies with the following command:
1
npm install semantic-ui-react semantic-ui-css
Or, if your project uses yarn:
1
yarn add semantic-ui-react semantic-ui-css
Refer here for their official documentation.

3. Install The Rich Content npm Package 

Install the Codux Semantic UI rich content npm package to see the library's components in their ready-for-use states in the Add Elements panel:
1
npm i -D @codux-boards/react-semantic
If your project uses yarn, use the equivalent command instead.

4. Add the library name to codux.config.json 

Add the rich content library installed in the step above to your project's codux.config.json file through the addPanel/assets key like this:
1
2
3
4
5
6
7
8
// codux.config.json
   
{  
  …
  "addPanel": {
"assets": ["@codux-boards/react-semantic"]
  },
   …

5. Import the library's CSS files 

The Semantic UI library depends on a stylesheet to use its components. You can find this stylesheet (semantic.min.css) and several others on their docs page.
You need to import the sheet globally through boards-global-setup.ts setup like this:
1
2
// boards-global-setup.ts
import 'semantic-ui-css/semantic.min.css';
In this example, boards-global-setup.ts is in the src\_codux directory in the project's root directory, and the Semantic UI CSS file is in src\semantic-ui-css.