Tableau UI is a React component library containing UI components which have the look-and-feel of Tableau.
npm install @tableau/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' });
Please refer to Tableau UI Components for documentation and samples.