Skip to main content

Getting Started


Qualtrics UI React is available as an npm package. To install, run:

npm install @qualtrics/ui-react

Peer Dependencies

The following are required in order for this library to work properly:

  • react >= 16.8.0
  • react-dom >= 16.8.0


For those using TypeScript, @qualtrics/ui-react requires a minimum version of TypeScript 3.9. See TypeScript documentation for more information.


In order to use the library, you will need to wrap your app in the top-level UI Provider component and pass in translations, as shown below:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import getTranslations from './utils/getTranslations';

// 1. import UIProvider component
import { UIProvider } from '@qualtrics/ui-react';

// 2. Wrap your app in the UIProvider component
// 3. Pass in translations for components that require them
const Root = () => (
localizedText: getTranslations(),
<App />

ReactDOM.render(<Root />, document.getElementById('my-app'));


If qstrap is already loaded on your page, you can skip this section since the css resets and fonts are already loaded!!

All components styles are built into their respective components. However, the global styles such as css resets and fonts are found in a separate package. To install them, run:

npm install @qualtrics/base-styles

You will then need to include the @qualtrics/base-styles/dist/base-styles.css file in your application. There are two common ways to do this:

Option 1

Use a bundler, such as webpack, that is configured to handle importing css files

import '@qualtrics/base-styles/dist/base-styles.css';

Option 2

In your build step, copy the files found in @qualtrics/base-styles to your public assets folder and link to the css file inside your html file

<html lang="en">
<div id="root"></div>

Example Usage

You're all set. You can start using the components now!

import React from 'react';
import { Button } from '@qualtrics/ui-react';

const App = () => <Button kind="primary">Click Me</Button>;

export default App;