https://github.com/jpmorganchase/salt-ds
React UI components built with a focus on accessibility, customization and ease-of-use
https://github.com/jpmorganchase/salt-ds
cib jpmorgan
Last synced: 4 months ago
JSON representation
React UI components built with a focus on accessibility, customization and ease-of-use
- Host: GitHub
- URL: https://github.com/jpmorganchase/salt-ds
- Owner: jpmorganchase
- License: apache-2.0
- Created: 2022-01-31T14:38:25.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-06-09T11:15:02.000Z (4 months ago)
- Last Synced: 2025-06-09T12:26:44.624Z (4 months ago)
- Topics: cib, jpmorgan
- Language: TypeScript
- Homepage: https://www.saltdesignsystem.com
- Size: 123 MB
- Stars: 158
- Watchers: 20
- Forks: 97
- Open Issues: 430
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Salt
[](https://www.npmjs.com/package/@salt-ds/core)
[](https://www.npmjs.com/package/@salt-ds/lab)
[](https://www.npmjs.com/package/@salt-ds/theme)
[](https://www.npmjs.com/package/@salt-ds/icons)
Salt provides you with a suite of UI components and a flexible theming system. With no customisation, the default theme offers an attractive and modern look-and-feel, with both light and dark variants and support for a range of UI densities.
We have included a theming system which allows you to easily create theme variations, or in fact substitute alternate themes.
Salt has been developed with the following design goals:
- Providing a comprehensive set of commonly-used UI controls.
- Complying with WCAG 2.1 accessibility guidelines.
- To be lightweight and performant.
- Offering flexible styling and theming support.
- Minimizing dependencies on third-party libraries.
## Installation
There are four packages you can install:
- `@salt-ds/core` is required, this contains stable components and receives
new features and patch updates when needed.
- `@salt-ds/lab` is where we introduce new components which are under initial development until they are stable and moved over to core. This is typically an unstable environment and may have major breaking changes.
- `@salt-ds/theme` is required, this contains the Salt .css files required
for any application you develop with Salt.
- `@salt-ds/icons` contains SVG-based icons you can use in your
application.
Depending on the package manager you use, edit and run one of the following commands to install the packages you need:
```sh
npm install @salt-ds/core @salt-ds/theme @salt-ds/lab @salt-ds/icons
```
Or
```sh
yarn add @salt-ds/core @salt-ds/theme @salt-ds/lab @salt-ds/icons
```
You will then need to import the .css files into your application, along with any components that you plan to use.
Here’s a quick example of button for your reference:
```JSX
import { Button, SaltProvider } from "@salt-ds/core";
import "@salt-ds/theme/index.css";
function App() {
return (
Button
);
}
```
## Accessibility
Salt is a high-quality, WCAG 2.1 compliant solution for building great, accessible experiences for your users.
### Screen reader support & compatibility
We support specific combinations of assistive technologies (ATs) and
browsers, outlined in the table below.
| Operating System | Web browser | Screen reader |
| ---------------- | ----------- | ------------- |
| Windows | Firefox | NVDA |
| | Chrome | JAWS |
| macOS | Safari | VoiceOver |
## Thanks
Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.