Installation

Multiple NPM packages compose Orbit. By creating a bundle package named @sharegate/orbit-ui, we simplify the installation process and allow you to install Orbit with just a single package.

Install packages

To install Orbit, open a terminal at the root of your project workspace and run the following command:

npm install @sharegate/orbit-ui

To install Orbit's experimental components, open a terminal at the root of your project workspace and run the following command:

npm install @orbit-ui/experimental @sharegate/orbit-ui

Import styles

Orbit styles include the ShareGate font, a CSS bootstrap and of course the component's styles.

To import Orbit styles, add the following import declaration to your root stylesheet:

/* index.css */

@import "@sharegate/orbit-ui/index.css";

To import Orbit experimental components styles, also add the following import declaration to your root stylesheet:

/* index.css */

@import "@orbit-ui/experimental/index.css";

Set up your tooling environment

Orbit offer an ESLint plugin to see in-context help in your IDE. This includes accessibility pointers, deprecation notices, and other helpful tips.

First, add the ESlint plugin to your dependencies:

npm install @orbit-ui/eslint-plugin eslint

Then, add the plugin to your ESlint config. For example, your .eslintrc.json file may look like this:

{
    "$schema": "https://json.schemastore.org/eslintrc",
    "plugins": ["@orbit-ui"],
    "extends": [
        "plugin:@orbit-ui/recommended"
    ]
}

More about ESlint configuration

Configure your application

Below is an example of how to configure an application with a pre-constructed ShareGate theme object:

// index.ts

import { createThemeVars, ShareGateTheme, ThemeProvider } from "@sharegate/orbit-ui";
import { createRoot } from "react-dom/client";
import App from "./App";

createThemeVars([ShareGateTheme]);

const root = createRoot(document.getElementById("root")!);
root.render(
    <ThemeProvider theme={ShareGateTheme} colorScheme="light">
        <App />
    </ThemeProvider>
);

Instead of harcoding the foundation values in Orbit, we choose to implement a theming system allowing applications to supply their core values to Orbit.

The theming system introduced a concept of theme object. To configure Orbit, you'll need to build your own theme object or import a pre-constructed one from Orbit. The theme object will be used to render the foundation variables with the createThemeVars function and define a theme provider at the root of your application.

Start creating components

You're all set! You can start creating your application with Orbit:

import { Div, Text } from "@sharegate/orbit-ui";

export const App = () => (
    <Div backgroundColor="alias-warning">
        <Text color="alias-primary">Hello World!</Text>
    </Div>
);