Overview:

Circuit UI Web is the web implementation of the SumUp Circuit Design System. Its primary goal is to create a system that can be used to build various SumUp websites and apps while providing a consistent and inclusive user experience. The design system and component library are designed to be easy to use for developers and designers.

Features:

• Documentation - Learn how to use Circuit UI and view the components in Storybook.
• Getting started - Set up a new app with Circuit UI or add it to an existing project.
• Theming - Learn about the foundations of Circuit UI such as colors, spacing, and typography.
• Contribute - File bug reports, suggest changes, or open pull requests.
• Packages - Includes core React component library, visual primitives, SVG icons, Next.js app bootstrap, ESLint rules, and Stylelint rules.

Installation:

To get started with Circuit UI, follow these steps:

1. Install the core React component library:

npm install @sumup/circuit-ui

2. Install the visual primitives package:

npm install @sumup/design-tokens

3. Install the SVG icons package:

npm install @sumup/icons

4. Install the Next.js app bootstrap package:

npm install @sumup/cna-template

5. Install the ESLint rules package:

npm install @sumup/eslint-plugin-circuit-ui

6. Install the Stylelint rules package:

npm install @sumup/stylelint-plugin-circuit-ui

Summary:

Circuit UI Web is a web implementation of the SumUp Circuit Design System. It aims to provide a consistent and inclusive user experience while being easy to use for developers and designers. The package includes a core React component library, visual primitives, SVG icons, Next.js app bootstrap, ESLint rules, and Stylelint rules. Developers can contribute to the project and follow the Contributor Covenant Code of Conduct. SumUp is a mobile-point of sale provider with a mission to make easy and fast card payments a reality worldwide.