Nova Components React is a lightweight wrapper for React that allows you to use the native UI elements from the Nova UI package seamlessly within your React applications.
To get started, install the necessary packages using your package manager of choice:
npm install @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-reactor
yarn add @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-reactYarn Peer Dependency
If you’re using Yarn, note that it does not automatically install peer dependencies. You will need to install the following peer dependency manually:
yarn add @stencil/react-output-targetAfter installing the packages, you'll need to include the Nova UI CSS and define the custom elements in your main.tsx or index.tsx file:
import '@nova-design-system/nova-base/dist/css/nova-utils.css';
import '@nova-design-system/nova-base/dist/css/spark.css'; // or ocean.css
import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
defineCustomElements();This setup ensures that all the necessary Nova web-components are available in your application.
[!WARNING] Nova Fonts is a protected asset and is not included in the Nova Base package. You need to include the Nova Fonts CSS file in your project. To get the Nova Fonts URL, please contact us via Teams or get the URL in the Nova Design System internal wiki.
Once you have the URL, you can integrate it using any of these methods:
In your main CSS file (e.g., src/index.css or src/App.css):
@import url('https://novaassets.azureedge.net/fonts/nova-fonts-pro.css');In your public/index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://novaassets.azureedge.net/fonts/nova-fonts-pro.css">
</head>
<body>
<div id="root"></div>
</body>
</html>The nova-fonts-pro.css file includes both font definitions and the font-family rule for the body, automatically applying the fonts across your React application.
With everything set up, you can start using Nova components in your React application. Here's a quick example:
import { NvButton } from '@nova-design-system/nova-react';
const MyComponent = () => {
const [count, setCount] = useState(0);
return (
<NvButton danger onClick={() => setCount(count + 1)}>
count is {count}
</NvButton>
);
};In this example, the NvButton component is imported and used just like any other React component. The danger prop and onClick handler are passed to customize its behavior.
Nova Components React provides an easy way to integrate Nova's native web components into your React projects, enabling you to leverage the power of Nova UI with the flexibility of React. For more detailed documentation and examples, refer to the official Nova documentation.