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/icons

Consuming the Design System

Section titled “Consuming the Design System”

1. Installing Packages

Section titled “1. Installing Packages”

React Core

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

Icons ( Optional )

Section titled “Icons ( Optional )”
Terminal window
npm install @cfa/icons

2. Importing Packages

Section titled “2. Importing Packages”

React Core

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


<ComponentName />;

Icons

Section titled “Icons”
import { ChevronLeft } from "@cfa/icons/system";
import { ChickenSandwich } from "@cfa/icons/brand";
import { Symbol } from "@cfa/icons/logos";


const ChevronLeftIcon = <ChevronLeft />;
const ChickenSandwichIcon = <ChickenSandwich />;
const SymbolLogo = <Symbol />;

3. Styling Your App

Section titled “3. 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:

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:

@cfa/tailwind-utils is not supported with @cfa/react-core v2. Remove it when upgrading. If you have custom CSS on v1 token variables, see Custom CSS using v1 tokens in the v2 migration guide.

Set up AI tooling

Section titled “Set up AI tooling”

If you use Cursor, install the Cursor plugin and MCP next to your React Core packages. Pin @cfa/design-system-mcp to the same version as @cfa/react-core.