Skip to content
CFA Design System

Getting Started - Engineers

The CFA Design System offers a complete collection of code libraries needed to build modern, robust, and accessible UI applications. Get started using the following CFA packages in your application.

Design System Packages
Section titled “Design System Packages”
  • @cfa/react-core
  • @cfa/brand-icons
  • @cfa/system-icons
  • @cfa/design-tokens

Consuming the Design System

Section titled “Consuming the Design System”

1. Artifactory Setup

Section titled “1. Artifactory Setup”

Before consuming or contributing to the Design System, you will need to setup Artifactory access. You’ll then need to configure Artifactory with either npm or yarn. The instructions for doing so are in the same wiki and can be found by navigating to the appropriate section.

Important: The CFA Design System packages are scoped under the @cfa namespace. To install packages like @cfa/react-core, your npm configuration must include the scoped registry setting:

@cfa:registry=https://cfa.jfrog.io/artifactory/api/npm/npm/

2. Installing Packages

Section titled “2. Installing Packages”

React Core

Section titled “React Core”
Terminal window
npm install @cfa/react-core

Icons

Section titled “Icons”
Terminal window
npm install @cfa/system-icons
npm install @cfa/brand-icons

3. Importing Packages

Section titled “3. Importing Packages”

React Core

Section titled “React Core”
import { ComponentName } from "@cfa/react-core";


<ComponentName />;

Icons

Section titled “Icons”
import { ChevronLeft } from "@cfa/system-icons";


const ChevronLeftIcon = <ChevronLeft />;

4. Styling Your App

Section titled “4. Styling Your App”

For React Core styles to render correctly in your app, you must utilize one of the required methods:

Importing CSS

Section titled “Importing CSS”

You can import the CSS directly into your app, this may vary depending on how CSS imports are resolved in your app.

Generally, this will work in JSX/TSX files.

import "@cfa/react-core/index.css";

If you are using postcss or are using @import rules in your CSS files, the import path may vary depending on your tooling.

/* Next.js */
@import "@cfa/react-core/dist/index.css";
/* PostCSS Import / Vite */
@import "@cfa/react-core/index.css";

You can find additional CSS guides here:

ThemeProvider

Section titled “ThemeProvider”

By wrapping your app with the ThemeProvider, the styles from @cfa/react-core/index.css will be applied globally. This component simply imports the CSS file for you.

We do not suggest this approach at this time, and recommend just importing the CSS directly.

import { ThemeProvider } from "@cfa/react-core/theme";


function Layout() {
  return (
    <ThemeProvider>
      <App />
    </ThemeProvider>
  );
}

Overlays and Isolation

Section titled “Overlays and Isolation”

React Core utilizes isolation when rendering our overlay components such as Modal, Drawer or Popover. For this to work correctly in some apps, you will need to add a top level CSS property to ensure that the stacking context works correctly.

This example is for demonstration purposes, how you implement this in your app can vary.

<body>
  <div className="wrapper">{children}</div>
</body>
.wrapper {
  isolation: isolate;
}
Tailwind
Section titled “Tailwind”

If you are using Tailwind, your implementation might look like this.

<body>
  <div className="isolate">{children}</div>
</body>

This style creates a separate stacking context for your application root element. This way, popups will always appear above the page contents, and any z-index property in your styles will not interfere with them.

Styling Guides

Section titled “Styling Guides”

For more information on CSS and styling your App, please refer to these guides: