@splunk/react-ui

@splunk/react-ui

A library of UI components that implement the Splunk design language in React.

Install

Install the package and its dependencies.

• Install the peer dependencies:

  npm install react@^16 react-dom@^16 styled-components@^4
  

• Install the package:

  npm install @splunk/react-ui
  

Production builds

@splunk/react-ui and React support production and development builds. The production build removes warnings and guidance from the output. To create a production build, set the environment variable NODE_ENV to "production" and use the webpack DefinePlugin to inject the variable into the code.

Use the components

Children

Nearly all components accept node children. Only components that require specific constraints include information about the children prop in its documentation.

Styling

• Pass style to control layout, margins, or positioning. See the following example:

  <Button label="Hello" style={{ flexBasis: '200px' }} />
  

• Alternatively, you can use a component's inline property to switch between inline-block/inline-flex and block/flex. You can use this property instead of passing a style prop. See the following example:

  <Button inline={false} />
  

• Avoid using className.

• Avoid overriding style sheets. When selector specificity changes, the change can break style sheet overrides.

The generated markup isn't an API and may change at any time without notice, even in a patch release. The selector specificity also isn't an API and may change at any time without notice.

Defining fonts

The component library doesn't include fonts. You must define and load fonts in a @font-face declaration. By default, the components render in "Splunk Platform Sans", an alias of "Proxima Nova", and "Splunk Platform Mono", an alias of "Inconsolata".

Please make sure to obtain all required font licenses.

For quick reference, most themes use the following font-family stack:

Sans (default): Splunk Platform Sans, Proxima Nova, Roboto, Droid, Helvetica Neue,
    Helvetica, Arial, sans-serif;
Mono: Splunk Platform Mono, Inconsolata, Consolas, Droid Sans Mono, Monaco,
    Courier New, Courier, monospace;

Individual themes might use different fonts.