Developing with Salt

Learn how to use Salt's UI components in your React web applications.

To start developing with Salt, you should:

• Be familiar with React and web development fundamentals (such as HTML, CSS and JavaScript).
• Have Node.js (version 16 or later) installed on your system.
• Create a React (version 16 or later) web application project. For new projects, use Create React App or a similar tool.

There are three packages that you need to add to your project:

• @salt-ds/core contains production-ready UI components.
• @salt-ds/theme contains CSS files that apply Salt's default theme.
• @salt-ds/icons contains SVG-based icons.

Use this npm command to install all three packages in one go:

If you prefer not to use npm, you can install the packages using yarn or other package managers.

Salt’s default theme requires the Open Sans and PT Mono web fonts. You can integrate them into your application using one of the following methods.

To load the fonts directly from Google Fonts, add the following into your application’s index.html file:

Refer to the Google Fonts page for more information.

With Fontsource, you can include the web font files into your build and self-host them.

First, install the relevant npm packages:

Next, import the CSS for the weights and styles that Salt requires. In a typical React project setup, the best place to put these imports is in your src/index.js file:

Learn more about Fontsource.

If you prefer not to use Google Fonts or Fontsource, you can use any other method to incorporate the web fonts. Make sure the CSS @font-face declarations associate the correct font-family, font-weightandfont-style with the corresponding web fonts.

To integrate Salt into your project, import the CSS theme and Salt Provider component—and then wrap your application in it.

For example, in a typical React project, you can do this in your src/index.js as follows:

Now that you’re ready to use our UI components, you can import them from the @salt-ds/core package and use them in your JSX code.

For example:

Head over to our available components to view their respective APIs.

Our @salt-ds/lab package is where we introduce new components that are in the initial stages of development. Once they’re stable, we move them over to the core package.

Because it’s an unstable environment that may cause major breaking changes, we don’t recommend using lab components in production applications. However, early adopters are welcome to use and experiment with them.