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​

Installation​

With NPM:

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

With Yarn:

$ yarn add @arc-ui/components @arc-ui/fonts

Configuration​

Styles and fonts​

Include Arc styles and fonts in your application or site. Ensure they are only included once, and available everywhere.

For example, using Webpack (configured to handle CSS) and Next.js:

// _app.js

import "@arc-ui/components/dist/styles.css";
import "@arc-ui/fonts";

Base component​

Arc uses a Base component to provide CSS resets and brand theming. All Arc components must be wrapped in a Base. Base can either be included once globally, or in multiple places locally, depending on your use case.

Global Base​

Include Base once for your whole application or site.

For example, using Next.js:

// pages/_document.js

import { Base } from "@arc-ui/components";
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>
          <Base>
            <Main />
          </Base>
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument;
Local Base​

Include Base throughout your application or site as required to wrap compositions of Arc components.

For example:

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

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

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

      <Base>
         <Heading level="1">Arc area</Heading>
         <Text>This is Arc text</Text>
      </Base>

      <Widget />

      <Base>
         <Heading level="2">Another Arc area</Heading>
         <Text>Some more Arc text</Text>
      </Base>

      <Footer />
    </>
  );
}

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.

Requirements​

Installation​

CSS and JavaScript​

With NPM:

$ npm install @arc-ui/fonts @arc-ui/tokens

With Yarn:

$ yarn add @arc-ui/fonts @arc-ui/tokens

SCSS​

With NPM:

$ npm install @arc-ui/fonts @arc-ui/tokens-scss

With Yarn:

$ yarn add @arc-ui/fonts @arc-ui/tokens-scss

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/fonts";
@import "@arc-ui/tokens/dist/index.css";

.MyComponent {
  color: var(--arc-color-black);
}

JavaScript​

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

For example, using Webpack & React:

// MyComponent.js

import { ArcColorBlack } from "@arc-ui/tokens";

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

SCSS​

Import Arc's SCSS variables as appropriate.

For example:

/* MyComponent.scss */

@import '@arc-ui/fonts';
@import '@arc-ui/tokens-scss';

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