{"id":30683288,"url":"https://github.com/visa/nova-react","last_synced_at":"2025-09-01T19:46:15.454Z","repository":{"id":288111820,"uuid":"958170013","full_name":"visa/nova-react","owner":"visa","description":"Visa Product Design System - Nova React library","archived":false,"fork":false,"pushed_at":"2025-04-15T15:35:10.000Z","size":2011,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-15T16:45:25.945Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/visa.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-31T18:55:34.000Z","updated_at":"2025-04-15T15:35:15.000Z","dependencies_parsed_at":"2025-04-15T16:56:53.776Z","dependency_job_id":null,"html_url":"https://github.com/visa/nova-react","commit_stats":null,"previous_names":["visa/nova-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/visa/nova-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visa%2Fnova-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visa%2Fnova-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visa%2Fnova-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visa%2Fnova-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/visa","download_url":"https://codeload.github.com/visa/nova-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visa%2Fnova-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273183158,"owners_count":25059812,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-01T02:00:09.058Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-01T19:46:10.967Z","updated_at":"2025-09-01T19:46:15.439Z","avatar_url":"https://github.com/visa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\n *              © 2025 Visa\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *         http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n --\u003e\n# Visa Product Design System - Nova React\n\n- [About](#about)\n- [Security](#security)\n- [Background](#background)\n- [Install](#install)\n- [Usage](#usage)\n- [Why Nova React?](#why-nova-react)\n- [Testing](#testing)\n- [Maintainers](#maintainers)\n- [Thanks](#thanks)\n- [Contributing](#contributing)\n- [License](#license)\n\n## \u003ca name=\"about\"\u003e\u003c/a\u003eAbout Nova React\n\nAccessible Visa Product Design System components built for React\n\nNova React is a comprehensive library of accessible components designed to align with the Visa Product Design System. It provides developers with a set of reusable UI elements that can be easily integrated into React applications. With Nova React, developers can quickly build visually consistent and user-friendly interfaces that adhere to accessibility best practices.\n\n### Key Features\n\n- **Wide range of components**: Includes buttons, form elements, navigation menus, and more.\n- **Customizable**: Built on Nova Styles CSS, allowing for extensive theming and customization.\n- **Accessibility**: Adheres to accessibility best practices to ensure inclusive user experiences.\n- **Flexible state management**: Supports bring-your-own state, enabling custom services and classes.\n\nWhether you are building a small project or a large-scale application, Nova React offers a robust foundation for creating visually appealing and accessible user interfaces.\n\nThis library is built on our Nova Styles CSS which is extremely theme-able/customizable and the React components are now bring-your-own state. That means if our examples, styles, or behaviors don't cover your use case then you just add your own services, classes, or themes and now the world is your oyster!\n\n## \u003ca name=\"security\"\u003e\u003c/a\u003eSecurity\n\nOur package follows security best practices and ensures the safety of user data. It relies on a minimal number of dependencies, minimizing potential vulnerabilities.\n\n## \u003ca name=\"install\"\u003e\u003c/a\u003eInstall\n\nAvailable through [NPM](https://www.npmjs.com/).\n\n**NPM:**\n\n```sh\nnpm install @visa/nova-react\n```\n\n**PNPM:**\n\n```sh\npnpm install @visa/nova-react\n```\n\n**Yarn:**\n\n```sh\nyarn add @visa/nova-react\n```\n\n**Bun:**\n\n```sh\nbun add @visa/nova-react\n```\n\n### Dependencies\n\nView our package.json for the most up-to-date dependencies, including peer dependencies and dev dependencies.\n\n## \u003ca name=\"usage\"\u003e\u003c/a\u003eUsage\n\n### Step 1: Update React\n\nNova React supports React 18 and up. Visit React’s guide on \u003ca href=\"https://react.dev/blog/2022/03/08/react-18-upgrade-guide\"\u003ehow to upgrade to React 18\u003c/a\u003e for more.\n\n### Step 2: Install the library\n\nReference our \u003ca href=\"#install\"\u003einstall guidelines\u003c/a\u003e.\n\n### Step 3: Set up the application\n\n#### Import Nova styles\n\nImport the Nova Styles library and your desired theme at the root level of your React project. The visa-light theme is the default.\n\n```ts\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\n\n// Import the styles:\nimport '@visa/nova-styles/styles.css';\n// Import your desired theme:\nimport '@visa/nova-styles/themes/visa-light/index.css';\n\nconst root = createRoot(document.getElementById('root'));\n\nroot.render(\n  \u003cReact.StrictMode\u003e\n    \u003cApp /\u003e\n  \u003c/React.StrictMode\u003e\n);\n```\n\n### Step 4: Add icons (optional)\n\nFor 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.\n\nOnce you’ve installed the icon library, you can use them as components inside your TSX or JSX.\n\n```tsx\nimport React from 'react';\nimport { GenericAccessibilityLow, GenericCalendarTiny } from '@visa/nova-icons-react';\n\nexport const MyComponent: React.FC = () =\u003e (\n  \u003cdiv\u003e\n    MyComponent\n    \u003cGenericAccessibilityLow /\u003e\n    \u003cGenericCalendarTiny /\u003e\n  \u003c/div\u003e\n);\n```\n\n### Step 5: Use the components\n\nYou’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.\n\n```tsx\nimport { Button, ContentCard, ContentCardBody, ContentCardTitle, Link, Typography, Utility } from '@visa/nova-react';\n\ntype YourComponentProps = { className?: string; name?: string };\n\n// Reusable component that has a name prop with a default name set to \"Alex Miller\",\n// and developer can add to the className prop at the top layer of the component.\nconst YourComponent = ({ className, name = 'Alex Miller' }: YourComponentProps) =\u003e {\n  return (\n    \u003cContentCard borderBlockEnd className={className}\u003e\n      \u003cUtility element={\u003cContentCardBody /\u003e} vFlex vFlexCol vGap={4}\u003e\n        \u003cContentCardTitle variant=\"headline-4\"\u003e{name}\u003c/ContentCardTitle\u003e\n        \u003cTypography className=\"v-pt-4\"\u003eOur favorite commmunity member\u003c/Typography\u003e\n        \u003cUtility vAlignItems=\"center\" vFlex vFlexWrap vGap={16} vPaddingTop={12}\u003e\n          \u003cButton\u003ePrimary action\u003c/Button\u003e\n          \u003cLink href=\"./content-card\" noUnderline\u003e\n            Destination label\n          \u003c/Link\u003e\n        \u003c/Utility\u003e\n      \u003c/Utility\u003e\n    \u003c/ContentCard\u003e\n  );\n};\n\nexport default YourComponent;\n```\n\n## \u003ca name=\"why-nova-react\"\u003e\u003c/a\u003eWhy Nova React?\n\n### Light Weight\n\nWe've reduced our library to basic markup components and functional hooks for a lighter, simpler, and more flexible experience.\n\n### Building Blocks\n\nNo more waiting on feature requests. We provide the building blocks for you to easily create and customize your own components.\n\n### Built For Developers\n\nNova React is sleek and unobtrusive. Our beautifully designed components allow any developer to create stunning apps with ease. We now also support strict type safety, so now type warnings are provided inline, before building and deploying.\n\n## \u003ca name=\"testing\"\u003e\u003c/a\u003eTesting\n\n### Our Approach\n\nWe conduct rigorous testing using Jest to ensure our components are accessible and meet our high standards. We use Axe for comprehensive accessibility testing and snapshot testing to minimize regression. Each component undergoes individual unit testing based on its API, followed by integration testing using examples to ensure seamless interaction.\n\nOur goal is to achieve 100% test coverage for all components. Our pipeline safeguards against merging any code that fails our tests. While we have hundreds of tests providing us with full code coverage, we recognize that there is always room for improvement. We are constantly working to improve our testing suite.\n\n## \u003ca name=\"maintainers\"\u003e\u003c/a\u003eMaintainers\n\nThis project is maintained by the Visa Product Design System engineering team. If you need to get in touch please reach out to us via any of our options on our support page.\n\n## \u003ca name=\"thanks\"\u003e\u003c/a\u003eThanks\n\nThanks to all those who have contributed and to the Visa Product Design team for all of the hours and thought that have gone into making the design system as easy to use as possible.\n\n## \u003ca name=\"contributing\"\u003e\u003c/a\u003eContributing\n\nSEE CONTRIBUTING.md\n\n## \u003ca name=\"license\"\u003e\u003c/a\u003eLicense\n\nSEE LICENSE IN LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisa%2Fnova-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvisa%2Fnova-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisa%2Fnova-react/lists"}