The fundamental-react library is a set of React components built using SAP Fundamental Styles.
The SAP Fundamental Styles library is a design system and HTML/CSS component library used to build modern product user experiences with the SAP look and feel.
See Component Documentation for examples and API details.
You will need to install Node and Node Package Manager.
For an existing react application, follow the steps below:
-
Install
fundamental-react.npm install fundamental-react -
All components are currently packaged together with their respective
css, you will need to edit your webpack configuration to handle these files. See css-loader. -
Import components as needed. See Component Documentation for examples and API details.
import { MessageStrip } from 'fundamental-react/MessageStrip';
or
import { MessageStrip } from 'fundamental-react';
NOTE: Importing from specific component is recommended. Doing so will bring in only the component you are using instead of the whole library, which will reduce your bundle size significantly.
-
This project does not contain fonts and icons - they must be added to your project separately. Fonts and icons can be found at
@sap-theming/theming-base-content. After importing fonts and icons from@sap-theming/theming-base-content, add the following to your css:
@font-face {
font-family: "72";
src: url("path/to/fonts") format("woff"); // Bold, Light, Regular available in woff and woff2
font-weight: normal;
font-style: normal;
};
@font-face {
font-family: "SAP-icons";
src: url("path/to/icons") format("woff"); // available in woff, woff2 and ttf
font-weight: normal;
font-style: normal;
}
Additionally, edit your webpack configuration to load font and icon fonts - see file-loader.
The fundamental-react library follows Semantic Versioning. These components strictly adhere to the [MAJOR].[MINOR].[PATCH] numbering system (also known as [BREAKING].[FEATURE].[FIX]).
Merges to the master branch will be published as a prerelease. Prereleases will include an rc version (e.g. [MAJOR].[MINOR].[PATCH]-rc.[RC]).
Please see Issues.
If you encounter an issue or want to request a feature, you can create an issue.
If you want to contribute, please check the Contribution Guidelines. Also see our Developer Guide to Getting Started.
Copyright (c) 2020 SAP SE or an SAP affiliate company. All rights reserved. This library is licensed under the Apache Software License, v. 2 except as noted otherwise in the License File.