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/assets/nova-fonts.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.
To use Nova fonts in your React application, you'll need to contact the Nova team via Teams, email, or check the Nova Wiki to obtain the full CDN URL. 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.