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:

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.

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.