Tableau UI

Tableau UI is a React component library containing UI components which have the look-and-feel of Tableau.

Add Tableau UI

npm install @tableau/tableau-ui

Using Tableau UI

Tableau UI requires React. If you aren’t familiar with React, check out their Getting Started document.

If you have a TypeScript project you can simply import the components and prop interfaces that you want to use, e.g.:

import * as React from 'react';
import { Button, ButtonProps } from '@tableau/tableau-ui';
const buttonProps: ButtonProps = { kind: 'outline', children: 'OK' };
const button = React.createElement(Button, buttonProps);

If you’re using JSX, this example might look more like:

import * as React from 'react';
import { Button } from '@tableau/tableau-ui';
const button = <Button kind='outline'>OK</Button>

Or, you could also choose to include the bundled javascript file in your web project just as you would any other javascript library. You will then be able to reference tableau-ui with the global TableauUI variable, e.g.:

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="tableau-ui.min.js"></script>
const button = React.createElement(TableauUI.Button, { kind: 'outline', children: 'OK' });

API Documentation and Samples

Please refer to Tableau UI Components for documentation and samples.