@codux-boards/react-semantic

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

$3

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.

$3

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
`

2. Install the Codux Semantic integration as a devDependency:

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

or

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

3. Open your project in Codux.
4. Open your Codux configuration, and add the following:

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

5. Import the styles for Semantic in your "Board Global Setup" / application top level component (root.tsx" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Semantic UI:

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

6. Open an App or Board in the project.
7. Open to the Add Elements panel.
8. Find the Semantic under the "External Libraries" category.
9. Drag and drop components onto the Stage.
10. Customize data and styling using Codux's visual interface.

Requirements

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

License

MIT

Author

Codux Team