Cortex React Plugin UI Components

This package enables Cortex plugin developers to create plugins that share the look and feel of Cortex as a plugin iframe guest.

Terminology

• "Plugin Host": The client-side Cortex web application that creates the iframe. The host iframe element loads your plugin.
• "Plugin Guest": Your compiled plugin application, running within the context of the host. This is the bundled HTML/JS file you will upload to Cortex.

How it works

Once your guest plugin loads, Cortex host will sent a message to your plugin via window.postMessage. We provide utilities for this within @cortexapps/plugin-core. The messages will update with context information on when the host theme changes (dark/light mode) and provide essential CSS variables to your plugin.

Setup

Essential to your plugin is including base styles from this package. Most bundlers will allow you to do this via import:

import "@cortexapps/react-plugin-ui/index.css";

If this option is not available to you, consult your bundler documentation.

The imported CSS will apply some global styling for fonts and base colors, and provide necessary classes for the component library.

Components

Full documentation is not available for our React components yet. In the meantime, please reference cookiecutter-beta for example implementations of each component. Additionally, these components are fully typed with Typescript.

These components' APIs heavily draw from/are built on top of Radix/shadcn. For a primer on how these components generally work, check out these docs:

• https://www.radix-ui.com/primitives/docs/overview/introduction
• https://ui.shadcn.com/docs

Each component may have a family of components. See example implementations in cookiecutter-beta. The components available are as listed:

• Badge
• Button
• Breadcrumb
• Card
• Checkbox
• Dialog
• Input
• Label
• Loader
• Progress
• Select
• Tabs
• Typeahead