Skip to main content

Development workflow

latest

Arc UI System offers both React components and design tokens, published as packages to npm.

Getting started with Arc React components​

Requirements​

Please ensure you are using typescript 4.7 or later for typescript projects, or Node 12 or later for non typescript projects. For typescript projects make sure that you have the moduleResolution set to either nodenext or bundler in your tsconfig.

In the event that you project does not meet these requirements and these packages cannot be upgraded, please contact a member of the Arc team for support.

Installation​

Arc supports multiple themes, below are examples of how to install the correct packages.

npm:

$ npm install @arc-ui/components @arc-ui/themes

pnpm:

$ pnpm install @arc-ui/components @arc-ui/themes

Configuration​

Styles, Fonts and Icons​

Import the Arc component styles and theme styles in your application or site. Ensure they are only included once, and available everywhere.

We currently offer 3 themes. BT, BT-Business, BT-Enterprise(legacy)

Here's an example for the BT Enterprise theme:

import "@arc-ui/themes/lib/bt-enterprise.css";
import "@arc-ui/components/lib/styles.css";

Here's an example for the BT Business theme:

import "@arc-ui/themes/lib/bt-business.css";
import "@arc-ui/components/lib/styles.css";

And EE.

import "@arc-ui/themes/lib/ee.css";
import "@arc-ui/components/lib/styles.css";

By incorporating these theme imports, you ensure that your application adopts the visual styles and fonts and icons associated with each theme.

How themes work​

There is a single css file required per theme. The theme import would look like the following e.g @arc-ui/themes/lib/bt-enterprise.css.

each of the themes are wrapped in a class which is controlled by the <Theme /> component. This is needed to implement a theme, and will also allow you to have multiples theme at the same time.

Global Theme​

Include Theme once for your whole application or site. This is beneficial when you want a uniform theme across your entire project.

For example, using Next.js:

// pages/_document.js

import { Theme } from "@arc-ui/components/Theme";
import Document, { Head, Html, Main, NextScript } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Theme theme="bt-enterprise">
            <Main />
          </Theme>

          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Local Theme​

Include Theme selectively throughout your application to apply different themes to specific sections or components.

import { Theme } from "@arc-ui/components/Theme";
import { Heading } from "@arc-ui/components/Heading";
import { Text } from "@arc-ui/components/Text";

import { Footer, Header, Widget } from "../components";

export default function Home() {
  return (
    <>
      <Header />

      <Theme theme="bt-enterprise">
        <Heading level="1">Arc area</Heading>
        <Text>This is Arc text</Text>
      </Theme>

      <Widget />

      <Theme theme="ee">
        <Heading level="2">Another Arc area</Heading>
        <Text>Some more Arc text</Text>
      </Theme>
    </>
  );
}

export default MyDocument;

Getting started with Arc Tokens​

Design tokens are a single source of truth for design decisions. We use them to keep all parts of Arc consistent with one another. They can also be used directly by those who want to either build components in keeping with Arc or who just want access to raw design values in order to build their own on-brand experiences.

Arc Tokens are made available in CSS, JavaScript, JSON and Sass formats.

Installation​

npm:

$ npm install  @arc-ui/tokens-bt-enterprise @arc-ui/tokens-bt-business @arc-ui/tokens-ee

pnpm:

$ pnpm install @arc-ui/tokens-bt-enterprise @arc-ui/tokens-bt-business @arc-ui/tokens-ee

Configuration​

CSS​

Include Arc's CSS Custom Properties (vars) in your application or site. Ensure the Arc Tokens CSS file is available to all files that reference the vars.

For example, using PostCSS (to resolve node_modules):

/* MyComponent.css */
@import "@arc-ui/tokens-bt-enterprise/web/css/index.css" .MyComponent {
  color: var(--colors-bg-default);
}

JavaScript​

Import Arc's JavaScript variables wherever you need to use them.

For example, using Webpack & React:

// MyComponent.js

import { ColorsBgDefault } from "@arc-ui/tokens-bt-enterprise";

export default MyComponent = ({ children }) => (
  <div style={{ color: ColorsBgDefault }}>{children}</div>
);

SCSS​

Import Arc's SCSS variables as appropriate.

For example:

/* MyComponent.scss */
@import "@arc-ui/tokens-bt-enterprise/scss";

.MyComponent {
  color: $arc-color-black;
}

Icons​

There are separate packages for each themes icon set. The icons used inside Arc's own components will automatically use the correct icons for the current theme, so you don't need to worry about those. For more information visit docs/using-icons

V12 Breaking changes​

For more guidance on migrating to v12 please see the migration guide.