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:

Install the Semantic UI library and its dependencies with the following command:

Or, if your project uses yarn:

Refer here for their official documentation.

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:

If your project uses yarn, use the equivalent command instead.

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:

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:

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.