@codux-boards/react-blueprint

@codux-boards/react-blueprint

React Blueprint is a high-quality UI toolkit for building complex, data-dense web applications. It offers a set of robust React components and design patterns that are optimized for browser-based applications and desktop apps.

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

Features

• Ready-to-use React Blueprint components optimized for Codux
• Responsive and accessible UI elements
• Customizable through Codux's visual interface
• Components include:
  • Buttons
  • Menus and Dropdowns
  • Modals and Dialogs
  • Form Controls (inputs, selects, etc.)
  • Navigational Components (Headers, Sidebars, Breadcrumbs)
  • Data Visualization (Charts, Tables, Trees)
  • And more...

Installation & Usage

Automatic

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

Manual

• Install the package in your Codux project:

npm i -S @blueprintjs/<component-name>

or

yarn add @blueprintjs/<component-name>

• Install the Codux Blueprint integration as a devDependency:

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

or

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

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

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

• Open an App or Board in the project.
• Open to the Add Elements panel.
• Find the Blueprint components under the "External Libraries" category.
• Drag and drop charts onto the Stage.
• Customize data and styling using Codux's visual interface.

Requirements

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

License

MIT

Author

Codux Team