@codux-boards/react-semantic

@codux-boards/react-semantic

[Semantic UI](https://semantic-ui.com/} is a responsive component library for building applications and websites - buttons, accordions, inputs, and much more.

This package provides a collection of pre-built React components designed specifically for use within the Codux visual editor. When installed, these components automatically appear in your Codux Add Elements panel, allowing for seamless drag-and-drop integration into your projects.

Features

• Ready-to-use React components optimized for Codux
• Responsive design out of the box
• Accessible UI elements
• Customizable through Codux's visual interface
• Components include:
  • Buttons
  • Accordions
  • Input fields
  • Form components
  • Layout elements
  • Navigation components
  • And more...

Installation & Usage

Automatic

1. When creating a new project using Codux, select Semantic to add it as a library.
2. Open the Add Elements panel when viewing your app or boards. There you'll find Semantic under the "External Libraries" category.
3. Drag on stage, or click to select any Semantic component to add it to your current selection on the Stage.

Manual

1. Install Semantic in your Codux project

npm i -S semantic-ui-react semantic-ui-css

or

yarn add semantic-ui-react semantic-ui-css

1. Install the Codux Semantic integration as a devDependency:

npm i -D @codux-boards/react-semantic

or

yarn add -D @codux-boards/react-semantic

1. Open your project in Codux.
2. Open your Codux configuration, and add the following:

"addPanel": {
    "assets": [
      "@codux-boards/react-semantic"
    ]
  }

1. Import the styles for Semantic in your "Board Global Setup" / application top level component (root.tsx):

import 'semantic-ui-css/semantic.min.css';

1. Open an App or Board in the project.
2. Open to the Add Elements panel.
3. Find the Semantic under the "External Libraries" category.
4. Drag and drop components onto the Stage.
5. Customize data and styling using Codux's visual interface.

Requirements

• Codux editor installed
• React 18+
• Node.js 20+

License

MIT

Author

Codux Team