Start building with React

Step 1: Update React

Nova React supports React 18 and up. Visit React’s guide on how to upgrade to React 18 for more.

Step 2: Install the library

You can install the Nova React library and the Nova styles library using the package manager of your choice. Below we’ve provided the most common: NPM, PNPM, Yarn, and Bun.

Note: Package managers can resolve dependencies differently and might not automatically install all required dependencies.

Step 3: Set up the application

Import Nova styles

Next, import the Nova styles library and your desired theme at the root level of your React project. The visa-light theme is the default. To learn more, visit Theming, and for more about Nova styles, visit Get started with Styles (CSS).

Step 4: Add icons (optional)

For React, each icon has been developed as a React component, allowing you to selectively choose the icons you need. The library is designed to support deep tree shaking, ensuring that only the icons you use are bundled with your app. This optimization reduces build and load times as well as app sizes. The React library also provides native support for TypeScript, along with full support for all SVG properties and refs.

Once you’ve installed the icon library, you can use them as components inside your TSX or JSX.

Step 5: Use the components

After adding Nova icons, you’re ready to use React components by copying and pasting the example code into your application. Check out below how to put our components to use with a few sample components.

Need help?

If you experience any issues while getting set up with Nova React, visit Support or create an issue .